Topbar accessibility mobile and zoomed view
I maintainer di solito rispondono entro 1 giorno
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Ambito
- accessibility, design, frontend
Direzione di ricerca
Inizia riproducendo i problemi della topbar nell’emulatore responsive di developer-tools usando la vista iPhone 12, quindi confronta il comportamento con il design Figma collegato e le specifiche funzionali. Il lavoro è completato quando non si perde alcun contenuto con uno zoom del 200%, non si verificano sovrapposizioni né scorrimento orizzontale a 320px e vengono rispettati i comportamenti specificati di overflow-menu, tema, area cliccabile e spaziatura.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 674
- Fork
- 107
- Merge medio
- 1g 38m
- PR unite (30g)
- 45
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Nessun modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Issue simili
-
enhancement
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 80/100
alunduil/projects-v2-sync#21 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 85/100
-
enhancement minor
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
testcontainers/testcontainers-node#1539 ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
christopher-buss/eslint-plugin-flawless#72 ·
I maintainer di solito rispondono entro 1 giorno
-
cleanName keeps a state code that's joined to the word before it (SavannahGa → "Savannah Ga")Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
openwatersio/slackwater-database#281 ·
I maintainer di solito rispondono entro 1 giorno