mozilla / mozilla/protocol

`mzp-c-sidemenu` collapsed summary mouse affordance & keyboard controls

Open
#947 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug :beetle:
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

  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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.