Giters

govau / dta-gov-au

A Drupal 8 sub-theme for the DTA website.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mobile menu not correctly marked up

imperator99 opened this issue · comments

commented

What’s the issue?

The mobile menu does not have the correct role (currently link instead of button)
and attributes which convey to screen reader users that the menu is a type of
interactive popup element and its state (expanded or collapsed).

Why it matters

Screen reader users expect links to take them somewhere, while buttons initiate an
action such as a change on the page.

Our recommendation

Update the menu element with the following:

  • Change the menu element from a link to a <button>.
  • Add aria-haspopup set to either menu or true to the menu element.
  • When the menu is displayed, the menu element has aria-expanded set to
    true. When the menu is hidden, it is recommended that aria-expanded is
    not present. If aria-expanded is specified when the menu is hidden, it is set
    to false. (Note: this appears to have been fixed during the audit period)
commented

The library is currently downloaded via the module's require key in composer.json. This means that without forking both the module (for a new composer.json) and the library (to change the HTML), there is no path forward without changing the menu provider itself.