Problem/Motivation

The drop-button UI widget does not report the open/closed state to assistive tech like screen readers. The more-actions button has a good text alternative to let the user know what to expect, but after pressing it there is no confirmation about what happened.

Proposed resolution

Use ARIA states and properties to describe the dropbutton behaviour to assistive technology APIs.

  • Update dropbutton.js to report the open/closed state, using aria-expanded, together with aria-haspopup, and aria-controls as appropriate.
  • Possibly use the menu button pattern from the W3C ARIA Authoring Practices (APG)? Is it an appropriate match for our existing behaviour or markup? The existing drop button is keyboard accessible, but uses the TAB key to select the action. The W3C APG pattern encourages use of arrow keys to select the action.

Remaining tasks

  • Decide on the markup/DOM pattern. Does this require any markup changes? Would be great if we can implement this without changing any CSS selectors.
  • Write a patch
  • FunctionalJavascript tests - operate the more-actions button, and assert that the aria state attributes have changed.

User interface changes

Accessibility improvements, principally benefiting screen reader users.
No visual design changes.

API changes

None expected.

Data model changes

None expected.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Some interesting quirks in our dropbutton. These might make it a poor match for the W3C menu button pattern.

  • The more-actions button is INSIDE the list container which it controls! I have a feeling that this is an unusual pattern.
  • It's possible to drop off the end of it by tabbing. The W3C pattern examples use arrow keys to select an action, and loop around the first/last items.
  • Pressing escape does nothing in our dropbutton. The W3C pattern collapses the menu button.
  • The menu collapses automatically when focus is no longer inside it. This is only a minor point. So long as the aria-expanded state is up to date, I wouldn't expect any confusion when returning to it.
andrewmacpherson’s picture

Title: Dropbutton does not report open/closed state to assistive technology » Dropbutton should report open/closed state to assistive technology
andrewmacpherson’s picture

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.