Chip: on the web every Chip sets aria-selected on role button

Aberta Para iniciantes
  • Algo errado?
#5,180 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
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
84/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

Comece em Chip.tsx, onde a issue diz que aria-selected é passado e selected tem false como valor padrão; compare o comportamento na web com o nativo antes de alterá-lo. Confira o exemplo de Chip em /chip e execute axe-core no app web para confirmar que a violação foi eliminada e que um toggle selecionado expõe seu estado. O trabalho estará concluído quando chips de ação simples omitirem o estado de toggle e chips web selecionados usarem o estado de botão compatível.

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

Descrição

Accessibility bug web
Current behaviour

On the web, every Chip renders <button role="button" aria-selected="true|false"> (Chip.tsx passes aria-selected={selected}, and selected defaults to false). aria-selected is not allowed on role button, so screen readers ignore the selected state, and axe-core reports aria-allowed-attr (critical): "ARIA attribute is not allowed: aria-selected". The example app shows it on the Chip, Card, Floating Action Button, List.Section and Tooltip screens.

Expected behaviour

On the web a Chip used as a toggle exposes its state with aria-pressed, the state role button supports, and only when the app passes selected, so a plain action chip isn't announced as a toggle. Native keeps announcing the selected state as it does today. axe reports no aria-allowed-attr violation.

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 Chip example (/chip).
  3. Run axe-core on the page (for example with the axe DevTools extension).
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.