a11y: the floating color-scheme toggle is last in reading and focus order

Abierto Apto para principiantes
#14,838 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript
Área
accessibility, frontend

Línea de trabajo

Localiza el script after-body que inserta el conmutador de color-scheme e inspecciona cómo se añade su contenedor a body. Cambia la inserción para que el contenedor siga siendo un hijo directo y pase a ser el primer hijo; después verifica que su posición dibujada no cambie y que el orden de foco comience con el conmutador. Comprueba documentos simples con y sin un banner de título, incluidos los temas con una regla body > *:first-child.

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

Descripción

accessibility bug html

Split from the review of #14739.

On a document with no navbar, the color-scheme toggle is injected by the after-body script and its container is appended to body, so it is the last element in the DOM. Reading order and focus order both follow DOM order here, since nothing sets tabindex. The toggle is drawn at the top right of the page, so it is the first control a sighted user sees and the last one a keyboard or screen reader user reaches.

Measured on a document with a title block banner (author link, affiliation link, DOI link):

visual order      TOGGLE (top=17) -> title (top=42) -> A Person (226) -> Example Org (226) -> DOI (284)
focus order now   A Person -> Example Org -> DOI -> body link -> TOGGLE

A website is not affected. There the toggle sits in the navbar and is reached in navbar order, matching where it is drawn.

This is not a WCAG failure. Focus order still preserves meaning and operability, and axe reports nothing. It is a usability wrinkle, and it predates #14739: the toggle was appended to body before that change as well.

Inserting the container at the start of body instead of appending it corrects the order and leaves the drawn position untouched:

prepended -> position: {"top":17,"fromRight":17}   (unchanged)
prepended -> focus   : TOGGLE -> A Person -> Example Org -> DOI -> body link

The container must stay a direct child of body: the toggle is positioned against the page, so any ancestor that establishes a containing block captures it (see #14739).

Two things to check before making the change:

  • It alters focus order for every existing plain document with a light/dark theme pair.
  • The container would become body's first child, so any body > *:first-child rule in a theme could pick it up.

On a plain document without a banner the toggle is drawn level with the title but to its right, so prepending puts it one position early rather than exactly right. That is still much closer than last on the page.

Part of #8706.

Lenguaje dominante
JavaScript
Estrellas
6k
Forks
458
Merge medio
1 d 9 h
PR fusionados (30 d)
41

Guía de contribución

Abrir la guía de contribución

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 quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.