Contrib.social

Use ARIA disclosure pattern for submenu buttons in vertical toolbar orientation

Open on Drupal.org →
Created on 9 November 2019, about 5 years ago
Updated 29 February 2024, 9 months ago

Problem/Motivation

When the manage toolbar is open, in the vertical orientation, sub-menus are available for each section. Visually they are just an icon, but for screen readers there is a visually hidden name.

Currently these buttons conflate the name and state; the name of the button is the opposite of the current state. There's some unnecessary cognitive effort there, to figure out what the current state is.

The behaviour of the button is only conveyed by the name string. The fact that it opens and closes a submenu isn't machine readable.

Proposed resolution

Use aria-expanded to convey the current open/closed state.
Use a constant name for the button: "parent-link-title sub-menu".

The button's name, role, and value will no longer be conflated. There's a clearer indication of the behaviour and current state, which is programmatically understood by assistive tech. Screen reader announcements will be along the lines of "structure submenu, button, expanded" and "structure submenu, button, collapsed".

Remaining tasks

Update JS + templates.
Update tests.

User interface changes

Improves semantics of toolbar submenu buttons for assistive technology.

API changes

None.

Data model changes

None.

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Toolbar  →

Last updated 9 days ago

  • Maintained by
  • 🇫🇷France @nod_
Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
  • Merge request !6821Use aria disclosure pattern in vertical toolbar submenu toggle buttons. → (Open) created by camilledavis
  • Status changed to Needs review 9 months ago
  • Comment 9 months ago →
    camilledavis

    Made MR based on the following feedback from @maxstarkenburg in #accessibility Slack:

    1. Remove the ["Expand/Collapse" text] because it's redundant with information a screen reader would already announce via aria-expanded.
    2. Depending on who you ask, the button's accessible name (potentially via aria-labelledby) ought to be "[sibling link text]" or "[sibling link text] sub-menu" or "More [sibling link text]".
    3. Also, personally, I would recommend not letting the effort to add aria-controls block this issue (perhaps could be made into a separate issue?), since adding aria-expanded and removing the incorrect state would both be easier wins, adding value sooner. aria-controls seems to have limited AT support and/or be semi-"controversial" in its usefulness, see e.g. https://heydonworks.com/article/aria-controls-is-poop/ and https://github.com/w3c/aria/issues/995
  • Pipeline finished with Success
    9 months ago
    Total: 635s
    #106263
  • Status changed to Needs work 9 months ago
  • Comment 9 months ago →
    🇺🇸United States smustgrave

    Know it's a task but possible to add a simple assertion that checks the aria value. So we can ensure we don't break this.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024