vailabel/vailabel-studio

a11y: Add accessible labels to canvas tool-rail buttons

Open

#246 geöffnet am 19. Juni 2026

Auf GitHub ansehen
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (22 Forks)auto 404
good first issuehacktoberfest

Repository-Metriken

Stars
 (62 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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.

Contributor Guide

Research-Richtung
Überprüfen Sie die nur Symbole enthaltenden Schaltflächen in der Werkzeugleiste der Leinwand (apps/studio/src/features/studio) und fügen Sie jeder Schaltfläche ein beschreibendes aria label Attribut hinzu. Überprüfen Sie dies mit dem Bedienfeld für Barrierefreiheit der Browser Entwicklertools. Stellen Sie sicher, dass keine Lint oder Typfehler auftreten.
Tech Stack
typescriptreact
Domain
frontenddesktop
Issue Type
Barrierefreiheit
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitHTML accessibility basics
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
85