a11y: revealjs scrollable code blocks cannot be scrolled by keyboard
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 55/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Attiva
- Stack tecnologico
- css, html, javascript
- Ambito
- accessibility, frontend
Direzione di ricerca
Start by reproducing the provided revealjs document at 390x844, then inspect src/resources/formats/revealjs/reveal/css/theme/template/theme.scss and the target scrollers: .reveal pre code, .scrollable, and .active-menu-panel. Read #14795 alongside this issue; done means keyboard users can reach hidden content without arrow keys fighting slide navigation, while off-screen slides do not add phantom tab stops.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Split from #14378, which covers format: html only.
WCAG: 2.1.1 Keyboard (A), 2.1.3 Keyboard, No Exception (AAA)
axe rule: scrollable-region-focusable — reports the .scrollable slide and the reveal-menu .active-menu-panel, but not the code blocks. The code-block half of this issue is invisible to axe; see below.
Targets: .reveal pre code, .scrollable slides, reveal-menu .active-menu-panel
Repro:
---
title: "Scrollable regions in revealjs"
format: revealjs
---
## Wide code block
```python
wide_code = "an_unbroken_token_that_cannot_wrap_and_overflows_the_slide_width_easily"
```
## Tall code block
```python
line_01 = "padding"
line_02 = "padding"
line_03 = "padding"
line_04 = "padding"
line_05 = "padding"
line_06 = "padding"
line_07 = "padding"
line_08 = "padding"
line_09 = "padding"
line_10 = "padding"
line_11 = "padding"
line_12 = "padding"
line_13 = "padding"
line_14 = "padding"
line_15 = "padding"
line_16 = "padding"
line_17 = "padding"
line_18 = "padding"
line_19 = "padding"
line_20 = "padding"
line_21 = "padding"
line_22 = "padding"
line_23 = "padding"
line_24 = "padding"
line_25 = "padding"
```
## Scrollable slide {.scrollable}
- item one
- item two
- item three
- item four
- item five
- item six
- item seven
- item eight
- item nine
- item ten
- item eleven
- item twelve
- item thirteen
- item fourteen
- item fifteen
- item sixteen
- item seventeen
- item eighteen
- item nineteen
- item twenty
Code blocks
theme.scss gives .reveal pre code overflow: auto; max-height: 400px. The scroll container is therefore the code element, not the div.sourceCode wrapper as in HTML output. At 390x844 the wide block hides 192px to the right and the tall block hides 215px below; div.sourceCode and pre both measure 0 overflow.
A keyboard user cannot reach that hidden content. Tabbing into the wide block lands on the line-number link for line 1 and leaves scrollLeft at 0, so all 192px stay clipped.
Why axe stays silent. revealjs turns on code line numbers by default. Pandoc emits a real fragment link per numbered line (<a href="#cbN-n">), which is focusable by design — it is how a reader links to a line. Without line numbers Pandoc instead emits a decorative anchor carrying aria-hidden="true" tabindex="-1". scrollable-region-focusable passes any scrollable region containing focusable content, so a numbered block satisfies the rule.
The rule is satisfied, but the region still cannot be scrolled. Line anchors sit at the start of each line, so focusing one never moves the region horizontally: measured scrollLeft stays 0 with 192px still clipped. Vertical overflow fares better, since tabbing down the anchors does scroll the block, at a cost of one tab stop per line (25 for the block above).
The focusable anchors are deliberate and are not the bug here. #14655 (fa5f81cf7) added aria-label to them and explicitly rejected aria-hidden, "since these anchors are real, focusable fragment links, and aria-hidden on a focusable element is itself an accessibility violation." Any fix should keep them focusable.
Scrollable slides and the menu panel
A .scrollable slide is reported by axe (#scrollable-slide), as are body and #slide-N on several quarto-web decks, and the reveal-menu .active-menu-panel at both 390x844 and 1440x900.
Constraints
- revealjs binds the arrow keys to slide navigation, so making a region focusable is not sufficient on its own — the keys that scroll it must not fight slide navigation.
- #14795 (off-screen slides stay tabbable) interacts directly. Adding
tabindex="0"to scrollers on.pastand.futureslides would add more phantom tab stops, while theinertfix proposed there would neutralize them. These two want fixing together, or in that order.
Related: #14710 (same rule, the axe report UI on revealjs and dashboard), #14249 (same vendored slide-menu component, different rule), #13574 (prior a11y work on revealjs code line numbers).
Part of #8706.
- Lingua principale
- JavaScript
- Stelle
- 6k
- Fork
- 458
- Merge medio
- 1g 9h
- PR unite (30g)
- 41
Guida per i contributori
Apri 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.
Altre issue di quarto-dev/quarto-cli
-
binder bug
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 92/100
quarto-dev/quarto-cli#14907 · 3 commenti ·
-
brand bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 85/100
quarto-dev/quarto-cli#14875 ·
-
Percent scripts: accept raw-string (r""") and '''-delimited markdown cells, as jupytext writes them Apertaengines-jupyter enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
quarto-dev/quarto-cli#14850 · 2 commenti ·
Tutte le issue di quarto-dev/quarto-cli
Issue simili
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
avniproject/avni-client#2135 ·
-
enhancement
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
bevyengine/bevy-website#2595 ·
-
ecosystem wording
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
matrix-org/matrix.org#3649 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100
vadimdemedes/ink#1029 ·