Altinity / Altinity/altinity-sql-browser

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

Ouverte
#73 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

enhancement
Langage dominant
TypeScript
Étoiles
8
Forks
2
Merge moyen
1 h 34 min
PR mergées (30 j)
6

Description

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.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par lire src/ui/editor-complete.js, src/ui/file-menu.js, app.js, src/ui/tabs.js, src/ui/toast.js et les règles outline:none indiquées dans src/styles.css. Exécutez npm test pour comprendre le seuil de couverture par fichier, puis vérifiez les critères d’acceptation indiqués concernant le lecteur d’écran, le focus clavier, aria-live et la réduction des animations avec le test de lecteur d’écran/clavier mentionné.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, javascript
Domaine
accessibility, frontend, testing-qa
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.