Accessibility improvements for the new Post summary panel #63308
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Package] Editor
/packages/editor
[Type] Bug
An existing feature does not function as intended
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:
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:
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:
Status
.Change post status: {current value}
Change status: {current value}
.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
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
The text was updated successfully, but these errors were encountered: