vailabel/vailabel-studio

a11y: Add accessible labels to canvas tool-rail buttons

Open

#246 opened on Jun 19, 2026

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (22 forks)auto 404
good first issuehacktoberfest

Repository metrics

Stars
 (62 stars)
PR merge metrics
 (PR metrics pending)

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.

Contributor guide

Research direction
Inspect the icon only buttons in the canvas tool rail (apps/studio/src/features/studio) and add descriptive aria label attributes to each button. Verify using browser devtools accessibility panel. Ensure no lint or type errors.
Tech stack
typescriptreact
Domain
frontenddesktop
Issue type
Accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitHTML accessibility basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85