Problem/Motivation

  1. 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, and aria-owns was removed in order to address a bug impacting screenreader users. The correct ARIA relationship attributes need to be implemented.

  2. 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 is aria-expanded.
  3. 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 custom Drupal.announce() message, in terms localized by Drupal. Using aria-expanded correctly means we no longer need Drupal.announce here.

Proposed resolution

  1. Remove the aria-pressed attribute from the toolbar buttons which control trays.
  2. 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 gets display:none.
  3. Use aria-expanded to convey current state of a given tray. This attribute should be on the same element which has the button role.
  4. Remove the Drupal.announce() message about the tray being opened. It's no longer necessary after adding the aria-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.

Release notes snippet

Comments

bnjmnm created an issue. See original summary.

andrewmacpherson’s picture

Title: ARIA implementation needed for Toolbar buttons and trays » Use ARIA disclosure pattern for Toolbar buttons with trays
Issue summary: View changes
Issue tags: +Accessibility, +aria
Parent issue: » #3084529: [META] improve accessibility of toolbar
Related issues: +#2893640: Modernize ARIA usage, in line with ARIA 1.1 and the ARIA Authoring Practices guide.

Adding 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 the Drupal.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.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

andrewmacpherson’s picture

Issue summary: View changes
Issue tags: +JavaScript, +Global2020

This would be a good one to work on at the Drupal Accessibility Bug Bash duing DrupalCon Global 2020.

andrewmacpherson’s picture

Issue tags: +Bug Smash Initiative

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.