vailabel/vailabel-studio

a11y: Add accessible labels to canvas tool-rail buttons

Open

#246 ouverte le 19 juin 2026

Voir sur GitHub
 (0 commentaires) (0 réactions) (0 assignés)TypeScript (22 forks)auto 404
good first issuehacktoberfest

Métriques du dépôt

Stars
 (62 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

Summary Icon-only buttons in the tool rail likely lack accessible names, making them unreadable to screen readers. Add aria-label (or title) to each. (Suggest adding an accessibility label to this issue.)

Where

  • apps/studio/src/features/studio (the canvas tool rail) and shared UI in apps/studio/src/shared/ui.

Steps

  1. Branch: git checkout -b a11y/toolrail-aria-labels.
  2. Find the icon buttons in the tool rail (bounding box, polygon, keypoint, etc.) — <button> elements without text children.
  3. Add a descriptive aria-label to each (e.g., aria-label="Bounding box tool").
  4. Verify with the browser devtools accessibility panel or yarn studio.
  5. Run yarn lint and yarn typecheck; commit fix(a11y): add aria-labels to tool rail buttons and open a PR.

Acceptance criteria

  • Every icon-only tool button has a meaningful accessible name.
  • No new lint/type errors.

Good first issue — comment here if you'd like to take it.

Guide contributeur

Direction de recherche
Inspectez les boutons avec seulement des icônes dans la barre d'outils du canevas (apps/studio/src/features/studio) et ajoutez un attribut aria label descriptif à chaque bouton. Vérifiez à l'aide du panneau d'accessibilité des outils de développement du navigateur. Assurez vous qu'il n'y a pas d'erreurs de lint ou de type.
Stack technique
typescriptreact
Domaine
frontenddesktop
Type d'issue
Accessibilité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Récente
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitHTML accessibility basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
85