a11y: RevealJS/Dashboard axe report scroll region lacks keyboard focus (scrollable-region-focusable)

Abierto Apto para principiantes
#14,710 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
84/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
javascript, playwright

Línea de trabajo

Empieza en src/resources/formats/html/axe/axe-check.js leyendo el manejo existente de overlays y las ramas de RevealJS y Dashboard enlazadas en el issue. Comprueba la diapositiva del informe generado y #quarto-axe-offcanvas .offcanvas-body con el self-scan de Playwright o axe-core. Se considera terminado cuando ambos ancestros con desplazamiento son accesibles mediante el teclado, no quedan violaciones de scrollable-region-focusable y se ha corregido el comentario obsoleto.

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

Descripción

accessibility bug

Found while adding automated Playwright self-scan coverage for the axe accessibility-checker's own report chrome (it audits the page, then injects a report UI that never gets audited itself unless a test scans it directly).

axe rule: scrollable-region-focusable · impact: serious · tag: wcag2a (2.1.1, 2.1.3)
Targets: the RevealJS report slide (section.quarto-axe-report-slide) and the Dashboard offcanvas body (.offcanvas-body inside #quarto-axe-offcanvas).

When the report grows past its container's height, both the reveal report slide and the dashboard offcanvas body become scrollable (overflow-y: auto), but neither element nor any descendant is keyboard-focusable, so keyboard-only users can't reach the rest of the violations.

The HTML overlay variant already handles this case:

https://github.com/quarto-dev/quarto-cli/blob/13b7e598805cb63b385be5e9bc3fa96d8fd7bb3b/src/resources/formats/html/axe/axe-check.js#L346-L358

The comment there reasons the reveal/dashboard variants don't need the same tab stop because "they don't scroll the report element itself" — true of the inner .quarto-axe-report, but the scrolling ancestor (the reveal slide / .offcanvas-body) is a different element the comment doesn't account for:

https://github.com/quarto-dev/quarto-cli/blob/13b7e598805cb63b385be5e9bc3fa96d8fd7bb3b/src/resources/formats/html/axe/axe-check.js#L360-L387
https://github.com/quarto-dev/quarto-cli/blob/13b7e598805cb63b385be5e9bc3fa96d8fd7bb3b/src/resources/formats/html/axe/axe-check.js#L389-L419

Confirmed directly with axe-core on an overflowing report in both formats: reveal's report slide (scrollHeight 901 vs clientHeight 700) and dashboard's offcanvas body (scrollHeight 774 vs clientHeight 658 — this one overflows even with a small, default-sized report) both get flagged.

We could mirror the overlay's fix — tabIndex = 0 / role="region" / aria-label on the scrolling ancestor in each case (the reveal <section> and the offcanvas body <div>), and correct the now-inaccurate comment above.

Related to #14378 (same axe rule, different target — document code blocks rather than the checker's own report UI). Part of #8706.

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

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.