tab component keyboard accessibility

Aberta Para iniciantes
  • Algo errado?
#775 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
68/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
react, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Comece localizando o componente de abas e os testes de interação pelo teclado. Em seguida, compare o comportamento atual com a interação pelo teclado para abas da WAI-ARIA vinculada na issue. Adicione a navegação entre as abas pelas setas, Home e End. O trabalho estará concluído quando quem usa o teclado puder acessar cada aba com essas teclas e o comportamento existente das abas continuar funcionando.

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

Descrição

accessibility bug

According to https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction we should be able to use arrows and Home / End to navigate between individual tabs.

Currently that is not possible.

It sais on the same page that:

Don't use tabs for site navigation. If each "tab" loads a different page or route, it's a navigation menu. Mark it up as

with links and put aria-current="page" on the current one. Screen reader users expect tab semantics to mean switching content in place.

But I don't think we should worry about it. On the component level we have no way how to detect it and in the context of SPA the concept of a page is blurry anyway.

Linguagem predominante
TypeScript
Estrelas
23
Forks
10
Merge médio
5d 12h
PRs com merge (30d)
9

Preparar o ambiente

Abrir no Codespaces

Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.

  • Sem Dockerfile nem arquivo Docker Compose
  • Sem modelo de pull request
  • Sem guia de contribuição

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 react-ui-org/react-ui

Todas as issues de react-ui-org/react-ui

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.