`mzp-c-sidemenu` collapsed summary mouse affordance & keyboard controls
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 298
- Forks
- 83
- Avg merge
- 16h 48m
- Merged PRs (30d)
- 1
Description
Description
When mzp-c-sidemenu is collapsed on narrow viewports, the mzp-c-sidemenu-summary section acts as a toggle to expand/collapse the local navigation. It doesn't however signal the affordance when hovered over, and doesn't respond to keyboard controls.
Steps to reproduce
Open https://protocol.mozilla.org/components/preview/sidebar-menu in a smaller viewport and try interacting with the collapsed sidemenu (either on top or bottom of the page, depending what page it is, e.g. https://www.mozilla.org/mission/ has it on top) both with mouse and with keyboard.
Expected result
Pointer on hover signaling the UI is interactive.
Ideally keyboard being able to interact with the nav toggle.
Actual result
Pointer is passive for text selection, only upon clicking the element it's shown it could be interacted with.
When "spacebar" is hit to open the element when focused with keyboard, a default scroll is triggered instead.
https://github.com/mozilla/protocol/assets/1784648/6a33ce3e-845a-4bbf-9e4e-20a4dba11309
Environment
macOS Catalina
FXDX 128b8, Chromium 127r1313161
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the sidebar-menu component preview and inspect the mzp-c-sidemenu and mzp-c-sidemenu-summary implementation. Reproduce the collapsed behavior at a narrow viewport, then verify that hover signals interactivity and that keyboard activation opens the navigation without triggering a default page scroll.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100