reactstrap/reactstrap

Tabs accessibility

Aberta

#1.446 aberto em 26 de mar. de 2019

Ver no GitHubGuia do colaborador
 (3 comentários) (0 reação) (0 responsável)JavaScript (1.347 forks)batch import
BS compatibilityPR Welcomea11ygood first issue

Métricas do repositório

Stars
 (10.557 estrelas)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

  • components: TabContent, TabPane, Nav
  • reactstrap version 7.1.0
  • react version ^16
  • bootstrap version ^4

What is happening?

Tab panels created using existing components doesn't follow w3c recommendations.

What should be happening?

It should follow https://www.w3.org/TR/wai-aria-practices/#tabpanel To summarize:

  • The nav buttons and tab panels should have tab related roles, e.g. tablist, tab, tabpanel, and have aria attributes to indicate relationships.
  • The tab buttons should support special keyboard interactions, similar to what Dropdown currently has.

Steps to reproduce issue

  1. goto https://reactstrap.github.io/components/tabs/
  2. compare to example in https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

Guia do colaborador

Direção de pesquisa
Estude o padrão de painel de guias WAI ARIA e implemente as funções, atributos e navegação pelo teclado necessários para os componentes TabContent, TabPane e Nav.
Pilha de tecnologia
javascriptreacthtmlcss
Domain
frontend
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.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 dias
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactAccessibilityHTML
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60