The bars show fullscreen only where it works, and name every control

Abierto
  • ¿Algo no está bien?
#22 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
70/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
accessibility, frontend

Línea de trabajo

Start with the fullscreen button in src/deck-engine/DeckChromeViewer.tsx and DeckChromePresenter.tsx, then the isFullscreen initial value in DeckController.tsx. Hide the button when document.fullscreenEnabled is false, add aria-label={EXIT_DECK_LABEL} to the presenter's Exit button, and move the compact bar's ✕ and chevron sizes into named constants in viewerBarLayout.ts. Done when a wide browser without the Fullscreen API shows no fullscreen button, and the engine's tests pass.

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

Descripción

enhancement good first issue

Why

There are three small gaps in the bars.

  1. Fullscreen. src/deck-engine/DeckChromeViewer.tsx and DeckChromePresenter.tsx draw the fullscreen button at every non-compact width, even in a browser with no Fullscreen API (document.fullscreenEnabled is false, as on an iPhone held in landscape). There the button does nothing, which reads as broken. DeckController.tsx also starts isFullscreen at false, even when the page is already fullscreen.
  2. Names. The presenter bar's Exit button has no aria-label, unlike the viewer's, which uses EXIT_DECK_LABEL.
  3. Glyph sizes. On the compact bar, Exit's ✕ and the chevrons share one 20px size. Exit is the control most often reached for in a hurry; a slightly larger ✕ (22px) and slightly smaller chevrons (18px) make it easier to find.

What changes

  1. Both bars render the fullscreen button only when document.fullscreenEnabled is true, checked once.
  2. isFullscreen starts from !!document.fullscreenElement.
  3. The presenter's Exit gets aria-label={EXIT_DECK_LABEL}.
  4. On the compact bar, Exit's ✕ is 22px and the chevrons are 18px, each as a named constant beside the bar's other sizes in viewerBarLayout.ts.

Done when

  • At a wide width, a browser without the Fullscreen API shows no fullscreen button, and F does nothing.
  • Every presenter-bar button has an accessible name.
  • The engine's tests pass.

Out of scope

  • The presenter's previous and next glyphs, which issue 18 covers.
  • Any layout change.
Lenguaje dominante
TypeScript
Estrellas
1
Forks
0
Merge medio
30 min
PR fusionados (30 d)
9

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

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.

Más de johnfrog76/connected-deck

Todos los issues de johnfrog76/connected-deck

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.