Topbar accessibility mobile and zoomed view
Maintainers usually reply within 2 days
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Domain
- accessibility, design, frontend
Research direction
Start by reproducing the topbar problems in the developer-tools responsive emulator using the iPhone 12 view, then compare the behavior with the linked Figma design and functional specifications. Done means no content loss at 200% zoom, overlap or horizontal scrolling at 320px, and the specified overflow-menu, theme, click-target, and spacing behavior is met.
Written by the indexing model from the issue text.
Description
Describe the bug
The Deque audit of Teams raised three issues related to the mobile or zoomed view of the topbar:
- Content is lost at 200% zoom
- Content overlaps other content at 320px width
- Horizontal scrolling at 320px
To Reproduce
Steps to reproduce the behavior:
- Go to stackoverflow.com
- Open the developer tools
- Use the responsive emulator and select iPhone 12 (this will give you a similar experience to both a mobile user and a user operating the site at 200% zoom)
- See the horizontal scrollbar that appears around the action menus and the lost information on the avatar
Expected behavior
The design of the topbar for smaller screens is adapted to better suit the available real estate as per the Figma file.
Functional specs
- Priority navigation for the action menu btns (see CSS Tricks or this example), which moves items into the overflow menu as the screen changes sizes.
- When outside the overflow menu, action menus are full width and use existing UI (see the search example)
- When inside the overflow menu, action menus open like an accordion and use existing UI (see the help example)
- The overflow menu can only have one open action menu at once
- Entire block for menu items (e.g. “Help” in the overflow menu) and subitems (e.g. the Help subitems) are clickable
- Sub menus and dropdowns inherit the theme (Teams is always dark, public depends on user’s theme)
- There must be at least a 96px gap (TBC; this should be configurable so we can play with it) between the end of the team name or SO logo and the first menu item unless the first possible item is the overflow menu, in which case the team names gets a ... at the end (rather than wrapping). Exception: logged out view.
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 29
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
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.
Similar issues
-
bug HemiStake
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
hemilabs/ui-monorepo#2413 ·
Maintainers usually reply within 1 day
-
component/ui framework/react kind/bug language/javascript
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
meshery/meshery#22216 · 3 comments ·
Maintainers usually reply within 1 day
-
type/bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
paperclipai/paperclip#14982 ·
Maintainers usually reply within 1 day
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
lingdojo/kana-dojo#31515 · 1 comment · 5 reactions ·
Maintainers usually reply within 1 day