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
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:
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/(mostlytabindex, onearia-hidden). For a complex SQL IDE this is a significant screen-reader and keyboard-navigation gap.Scope
listbox/option+aria-activedescendant(src/ui/editor-complete.js)menu/menuitem(src/ui/file-menu.js,app.jsanchoredPopover)tablist/tab(src/ui/tabs.js)aria-liveon the toast / error region so query errors and "session expired" are announced, not just shown (src/ui/toast.js).outline:noneis set without a replacement (src/styles.css:158,165,320,408,454,528,535,…). Today, tabbing through some controls shows no focus indicator.Acceptance
aria-live.npm testgreen 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:
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.