Accessibility improvements for the new Post summary panel

[afercia]

Description

In the new Post summary panel, some settings previously placed within collapsible panels have been moved to Popovers that open from some new settings panel buttons. Namely, the Excerpt, Author, and Discussion settings.

This made more evident some long standing accessibility issues in this panel.

The most important and still unsolved issue is that all the buttons to edit these settings:

• Status
• Publish
• Link
• Author
• Template
• Discussion
• Revisions

are labelled in an incorrect way. Buttons are meant to perform actions. Buttons should be labeled to communicate the action they perform. Instead, these buttons are labeled with the corresponding value. This was first reported long time ago in #470 and it's not my intent to rehash that discussion now as it appears there's some deep disagreement on the best practices to label controls. Just a reminder that these buttons are all labeled in a far from ideal way. Also, their accessible name mismatch their visual label. As such, they will be flagged as a WCAG violation in any accessibility audit.

Instead, this issue aims to address some minor accessibility and inconsistencies in the new Summary panel.

While the buttons visible text is the actual set value, their accessible name attempts to communicate the button action. The actual aria-labels of these buttons are mostly in thie format:

• Change post status: {current value}
• Change date: {current value}
• Change link: {current value}
• Change author: {current value}
• Change discussion options: {current value}

While this labeling helps blind screen reader users, it doesn't help sighted screen readere users, speech recognition software users, users with cognitive impairments, etc. The visible buttons text is disorienting and doesn't communicate the associated action. At the very leas, to attempt some remediation, the actual accessible name should be visually exposed by the means of a tooltip.

Status setting:

• The 'visual label' is Status.
• The actual label is Change post status: {current value}
• The term 'post' is hardcoded so it will be used also for pages and custom post types, which isn't ideal. The simplest solution would be to just remove 'post' and make this string a more generic Change status: {current value}.
• Clicking the button opens a popover where status, visibility, password protected, and sticky settings are now grouped together.
• However, neither the visual label or the actual label mention the other settings. They only refer to 'Status'.
• I'm not sure these settings should be grouped together in the first place. Anyways, the labeling should better communicate what the popover content is.

2
Revisions.
The revisions link text is.. the number of revisions. This will be announced as, for example: Link, 18 which is less than ideal.

3
Template settings
The template settings button is the only one that shows a tooltip. The tooltipi text is 'Template options'.

That's OK but for consistency all the other buttons should then use a tooltip to visually expose their actual accessible name.
The tooltip position could be improved as well.

4
Incorrect ARIA attributes.
All the buttons highlighted in the screenshot below, with the exception of 'Template options', now open a popover. However, they don't use an aria-haspopup attribute to communicate they open a popover.
The Status button doesn't even use an aria-expanded attribute.

Step-by-step reproduction instructions

• Edit a published post.
• Open the post settings panel.
• Observe the inconsistency of labels, aria attributes and tooltips used for the post settings listed in this issue description

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Reminder to myself: when themes support post formats, this panel will show also the 'Change format' setting;

Also, hierarchical posts e.g. Pages will show two more settings:

• Parent
• Order

More settins are conditional, see a complete list here:

gutenberg/packages/editor/src/components/sidebar/post-summary.js

Lines 72 to 84 in 6b53293

	<PostStatusPanel />
	<PostSchedulePanel />
	<PostURLPanel />
	<PostAuthorPanel />
	<PostTemplatePanel />
	<PostDiscussionPanel />
	<PrivatePostLastRevision />
	<PageAttributesPanel />
	<PostSyncStatus />
	<BlogTitle />
	<PostsPerPage />
	<SiteDiscussion />
	<PostFormatPanel />

[afercia]

Reminder: when the publish date visual label and the actual label are different, the tooltip shows the expanded value. This is less than ideal for labeling. Tooltips shouldn't be used to show values.

[afercia]

I'll submit a quick PR to fix only a few of the points reported in this issue.
I will create a new issue to propose a better, overall, approach for these buttons that would greatly help with resolving the pending points.