vailabel/vailabel-studio

a11y: Add accessible labels to canvas tool-rail buttons

Open

#246 aberto em 19 de jun. de 2026

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (22 forks)auto 404
good first issuehacktoberfest

Métricas do repositório

Stars
 (62 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

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.

Guia do colaborador

Direção de pesquisa
Inspecione os botões com apenas ícones na barra de ferramentas do canvas (apps/studio/src/features/studio) e adicione atributos aria label descritivos a cada botão. Verifique usando o painel de acessibilidade das ferramentas do desenvolvedor do navegador. Certifique se de que não haja erros de lint ou de tipo.
Pilha de tecnologia
typescriptreact
Domain
frontenddesktop
Tipo Issue
Acessibilidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
GitHTML accessibility basics
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
85