Example app: icon-only IconButtons on the Icon Button screen have no accessible name

Aberta Para iniciantes
  • Algo errado?
#5,182 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
1/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
86/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react-native, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Abra example/src/Examples/IconButtonExample.tsx e inspecione cada IconButton que exibe apenas um ícone. Adicione um aria-label que descreva sua ação, depois execute o aplicativo de exemplo na web e verifique /icon-button com axe-core. O trabalho estará concluído quando o axe não relatar nenhuma violação de button-name nessa tela.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Accessibility example app good first task
Current behaviour

On the example app's Icon Button screen (example/src/Examples/IconButtonExample.tsx), no IconButton passes an aria-label, so the icon-only ones render as buttons with no text, and a screen reader announces them only as "button". On the web axe-core reports button-name (critical): "Buttons must have discernible text".

Expected behaviour

Every icon-only IconButton in the example has an aria-label that says what it does, and axe reports no button-name violation on the screen.

How to reproduce?
  1. Run the example app on the web from main (yarn install, then npx expo start --web in example/).
  2. Open the Icon Button example (/icon-button).
  3. Run axe-core on the page.
Preview
What have you tried so far?
Your Environment
software version
react-native-paper main (8cb344b)
browser Chromium 153
Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
2d 12h
PRs com merge (30d)
22

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.