Altinity / Altinity/altinity-sql-browser

Accessibility pass: ARIA on menus/autocomplete/tabs, aria-live on errors, visible focus rings

Aperta
#73 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

enhancement
Lingua principale
TypeScript
Stelle
8
Fork
2
Merge medio
1h 34m
PR unite (30g)
6

Descrizione

Part of #68 (Roadmap to 1.0.0) — should-have. The substantial one.

Problem

The app has almost no accessibility affordances — ~11 a11y attributes across all of src/ (mostly tabindex, one aria-hidden). For a complex SQL IDE this is a significant screen-reader and keyboard-navigation gap.

Scope
  • ARIA semantics on the custom widgets so assistive tech announces them correctly:
    • autocomplete dropdown → listbox/option + aria-activedescendant (src/ui/editor-complete.js)
    • File menu and the user/save popovers → menu/menuitem (src/ui/file-menu.js, app.js anchoredPopover)
    • query tab strip → tablist/tab (src/ui/tabs.js)
  • aria-live on the toast / error region so query errors and "session expired" are announced, not just shown (src/ui/toast.js).
  • Visible keyboard-focus rings everywhere outline:none is set without a replacement (src/styles.css:158,165,320,408,454,528,535,…). Today, tabbing through some controls shows no focus indicator.
Acceptance
  • Screen reader announces the autocomplete, menus, and tabs with correct roles/state.
  • Errors/toasts are announced via aria-live.
  • Every interactive control shows a visible focus ring on keyboard focus.
  • npm test green at the per-file coverage gate.

Largest of the 1.0 should-haves; worth its own focused pass + a screen-reader/keyboard test.


Folded in from the roadmap (#68) nice-to-haves:

  • Honor prefers-reduced-motion — a @media (prefers-reduced-motion: reduce) block that disables/limits transitions and animations (chart updates, hovers) for users who've set reduce-motion in their OS.

Guida per i contributori

Apri la guida per i contributori

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.

Direzione di ricerca

Inizia leggendo src/ui/editor-complete.js, src/ui/file-menu.js, app.js, src/ui/tabs.js, src/ui/toast.js e le regole outline:none indicate in src/styles.css. Esegui npm test per comprendere il limite di coverage per file, quindi verifica i criteri di accettazione indicati per screen reader, focus da tastiera, aria-live e riduzione del movimento con il test di screen reader/tastiera menzionato.

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

Valutazione

Stack tecnologico
css, javascript
Ambito
accessibility, frontend, testing-qa
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.