Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Topbar accessibility mobile and zoomed view

Cerrado
  • ¿Algo no está bien?
#1,023 7 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Área
accessibility, design, frontend

Línea de trabajo

Comienza reproduciendo los problemas de la topbar en el responsive emulator de developer-tools usando la vista de iPhone 12 y, después, compara el comportamiento con el diseño de Figma vinculado y las especificaciones funcionales. Se considera terminado cuando no se pierde contenido con un zoom del 200%, no hay solapamientos ni desplazamiento horizontal a 320px y se cumple el comportamiento especificado de overflow-menu, tema, área de clic y espaciado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

accessibility

Describe the bug
The Deque audit of Teams raised three issues related to the mobile or zoomed view of the topbar:

  1. Content is lost at 200% zoom
  2. Content overlaps other content at 320px width
  3. Horizontal scrolling at 320px

To Reproduce
Steps to reproduce the behavior:

  1. Go to stackoverflow.com
  2. Open the developer tools
  3. 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)
  4. See the horizontal scrollbar that appears around the action menus and the lost information on the avatar
Screen Shot 2022-07-19 at 6 04 30 PM

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.
Lenguaje dominante
TypeScript
Estrellas
674
Forks
107
Merge medio
1 d 38 min
PR fusionados (30 d)
45

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.