Problem/Motivation
- The relationship of toolbar buttons to their trays is not conveyed to assistive technology.
The Toolbar previously attempted to convey this using
aria-owns
, but it was discovered that his usage was incorrect in this issue: #3066954: Admin toolbar not usable with latest versions of JAWS due to mis-use of aria-owns, andaria-owns
was removed in order to address a bug impacting screenreader users. The correct ARIA relationship attributes need to be implemented. -
The toolbar buttons incorrectly use
aria-pressed
. The value of this attribute never changes (i.e. knows when it is pressed), and it is not the proper attribute to use. The correct dynamic ARIA state for a disclosure control isaria-expanded
. - A major benefit of using
aria-pressed
is that the open/close behaviour is conveyed by assistive tech before the user operates the button, using standardized terms from the operating system and/or assistive tech. Currently the open/close behaviour is only conveyed after pressing the button, using a customDrupal.announce()
message, in terms localized by Drupal. Usingaria-expanded
correctly means we no longer needDrupal.announce
here.
Proposed resolution
- Remove the
aria-pressed
attribute from the toolbar buttons which control trays. - Use an
aria-controls
ID reference for the button/tray relationship. This attribute should be on the element which has the button role, and should point to the tray wrapper which getsdisplay:none
. - Use
aria-expanded
to convey current state of a given tray. This attribute should be on the same element which has the button role. - Remove the
Drupal.announce()
message about the tray being opened. It's no longer necessary after adding thearia-expanded
property to the button.
Scope: this issue is just about the behaviour of the buttons in the top-level toolbar, which control the visibility of the second-level trays. The behaviour of sub-menus under "mange" when the toolbar tray is in vertical alignment has a separate issue: #3093378: Use ARIA disclosure pattern for submenu buttons in vertical toolbar orientation.
Remaining tasks
User interface changes
Improved semantics for assistive technology.
No changes to visual design or behaviour.
API changes
Data model changes
None.
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedAdding this to the parent plan for improving toolbar accessibility. This improvement was already listed there, but it didn't have it's own issue until now. Thanks for filing this @bnjmnm.
There's another benefit to using
aria-expanded
: we can ditch one of theDrupal.announce()
calls, because it's conveyed programmatically in the a11y tree for the button itself. There is widespread support for this in browsers and AT.Comment #4
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commentedThis would be a good one to work on at the Drupal Accessibility Bug Bash duing DrupalCon Global 2020.
Comment #5
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer commented