Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

a11y: search button accessible name does not contain its visible label (WCAG 2.5.3)

Aperta
#1,618 8 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

  • #1631 di @hivecommons-hive — chiusa senza merge

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
39/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript

Direzione di ricerca

Read the navbar search rendering in docusaurus-plugin-search-local and the site's existing Footer swizzle under src/theme/. Compare the button's visible text and aria-label, then choose an upstream plugin fix or a local SearchBar swizzle. When the label includes the visible text, remove the NAVBAR_VIOLATIONS baseline entry from tests/e2e/accessibility.spec.js and confirm its retirement checks pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

blocked bug hive/claimed-by-scanner needs-human

Finding

docusaurus-plugin-search-local (2.1.2) renders the navbar search button as:

<button class="DocSearch DocSearch-Button" aria-label="Search (Control+k)" aria-keyshortcuts="Control+k">
  <span class="DocSearch-Button-Placeholder">Search</span>
  <span class="DocSearch-Button-Keys"><span><svg .../></span><span>K</span></span>
</button>

Visible text is "Search K" (the Control key is an icon); the accessible name is "Search (Control+k)". The accessible name does not contain the visible label, which fails WCAG 2.5.3 Label in Name. axe-core reports it as label-content-name-mismatch (serious).

Why it surfaced now

axe-core 4.14.0 removed the experimental tag from label-content-name-mismatch, so it runs under wcag21a for the first time. Dependabot's bump in #1606 therefore failed tests/e2e/accessibility.spec.js on all 20 routes and both profile-dialog states. The button was non-conformant before; the scanner just could not see it.

Current state

#1606 carries the bump plus a NAVBAR_VIOLATIONS baseline entry in KNOWN_VIOLATIONS / KNOWN_STATE_VIOLATIONS. The spec's retirement tests fail as soon as the rule stops firing, so the baseline cannot outlive the fix.

Fix options

The plugin's SearchBar renders SearchButton without passing translations, so neither buttonText nor buttonAriaLabel can be changed from docusaurus.config.js. Realistic paths:

  1. Upstream fix in docusaurus-plugin-search-local (make the aria-label contain the visible text, e.g. Search with the shortcut carried only by aria-keyshortcuts), then bump.
  2. Swizzle the plugin's SearchBar theme component into src/theme/ (the site already wraps Footer) and render the button with a conforming label.
  3. Rendering the Control key as text rather than an icon does not help: "Search Ctrl K" is still not a substring of "Search (Control+k)".

When the fix lands, delete the NAVBAR_VIOLATIONS entry in tests/e2e/accessibility.spec.js; the retirement tests will insist on it.

Scope note for the hive

The baseline is the designed mechanism in the spec and is already in place. The remaining work is a production change (option 1 or 2), not a test change.

Lingua principale
JavaScript
Stelle
0
Fork
3
Merge medio
7h 23m
PR unite (30g)
605

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cncf/endusers

Tutte le issue di cncf/endusers

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.