search

mozilla / protocol

A design system for Mozilla websites.
https://protocol.mozilla.org/
Mozilla Public License 2.0
258 stars 77 forks source link

Menu List component could use a11y improvements #551

Open alexgibson opened 4 years ago

alexgibson commented 4 years ago

Description

The menu list component could benefit from some a11y improvements.

Steps to reproduce

  1. Visit https://protocol.mozilla.org/patterns/molecules/menu-list.html
  2. Using the keyboard, tab so the menu list is focused.
  3. Hit enter to open the menu.

Expected result

  1. If i hit esc when open, it should close the menu.
  2. If I click anywhere outside of the menu whilst open, the menu should close again.
  3. If I tab through the menu items and past the last item in the list, then the menu should close when focus leaves the element.

Actual result

The menu remains open for all of the above items. The only way to close a menu currently is to click the title again.

Environment

Firefox Nightly (but happens in any browser)

stephaniehobson commented 4 years ago

See also #478

stephaniehobson commented 2 months ago

I was lazy and re-used the Javascript from the details component for this. The details component should probably not get these enhancements so we may have to split them apart.