mozilla / mozilla/protocol

Menu List component could use a11y improvements

Open
#551 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11y ♿️ Bug :beetle:
Dominant language
SCSS
Stars
298
Forks
83
Avg merge
16h 48m
Merged PRs (30d)
1

Description

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)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the menu list component shown on the linked Menu List page and reproduce the keyboard and focus behavior in the issue. Check how the menu responds to Escape, outside clicks, and focus moving past the last item. Done means each action closes the open menu consistently across browsers.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.