Fix accessibility issues found by the Storybook catalog

Aperta
  • Qualcosa non va?
#390 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
57/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, storybook, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with ui/host/src/catalog/accessibility.ts to see the exceptions, then inspect shell.tsx, the dashboard and settings pages, dashboards/viz/health-pieces.tsx, rail.tsx, dashboards/panel-card.tsx, and settings.tsx. Run just design-check after removing an exception, or open the affected story with just design and check its Accessibility panel. Done when each listed issue is fixed and its exception is deleted.

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

Descrizione

bug

The Storybook catalog runs axe on every story with a11y.test: "error". To keep it green, these existing issues in the shipping markup are excepted in ui/host/src/catalog/accessibility.ts. Fix each one, then delete its exception.

  • Nested and duplicate <main> landmarks. AppShell.Main in shell.tsx and the dashboard and settings pages each render a <main>. axe reports landmark-main-is-top-level (one nested main), landmark-no-duplicate-main (two mains) and landmark-unique (two unnamed mains).
  • Degraded health label contrast, light scheme. The degraded Metric label in dashboards/viz/health-pieces.tsx inherits warn text #c87d21, which is 3.275:1 on white (color-contrast, needs 4.5:1). Mantine's c prop overrides the component's darker status ink.
  • Selected chat timestamp contrast, light scheme. In rail.tsx, the dimmed timestamp on the active chat row is 3.901:1 against the selected background (color-contrast).
  • Panel loader label. The labelled Mantine Loader in dashboards/panel-card.tsx (aria-label="Loading panel") renders a span with no role (aria-prohibited-attr). Give it role="status" or use visually hidden text.
  • Settings documentation link. The "Sending telemetry" link in settings.tsx inherits the text colour and underlines only on hover. That is 1.289:1 against the surrounding text (link-in-text-block). Underline it at rest, or give it link colour.

Reproduce: run just design-check after removing an exception, or open the story in just design and check the Accessibility panel.

Lingua principale
Go
Stelle
11
Fork
0
Merge medio
7h 39m
PR unite (30g)
97

Preparare l'ambiente

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 labstack/fanout

Tutte le issue di labstack/fanout

Issue simili

Altre issue su Go

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.