ant-design/ant-design

Proposal: Collapse accessibility enhancements

Aberta

#53.203 aberto em 18 de mar. de 2025

Ver no GitHubGuia do colaborador
 (7 comentários) (4 reações) (0 responsável)TypeScript (54.612 forks)batch import
Inactivehelp wanted⌨️ Accessibility

Métricas do repositório

Stars
 (98.031 estrelas)
Métricas de merge de PR
 (Mesclagem média 3d 4h) (248 fundiu PRs em 30d)

Description

What problem does this feature solve?

The collapse component does not comply with w3c accessibility guidelines here: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

What does the proposed API look like?

Proposed Changes:

  1. Add an optional prop allowing user/consumer to set a heading level for the collapse button. We could use headingLevel?: h1 | h2 | h3 | h4 | h5 | h6, and then wrap the collapse-button-header in the <h_>.

  2. Set an aria-controls attribute on each button, and the aria-controls would reference the id of the panel that the button controls.

  3. Add an optional Collapse prop, panelsRole?: 'region' | 'none', by which consumers can optionally set role="region" on the panels.

These changes would have little impact on consumers implementation, but would improve accessibility by default, and also give consumers powerful opt-in functionality to set the heading level and role="region".

Please let me know if you find the proposed changes acceptable.

Guia do colaborador

Direção de pesquisa
Implemente as melhorias de acessibilidade propostas: adicione a prop opcional headingLevel (h1 h6), envolva o botão em um elemento de cabeçalho desse nível; adicione o atributo aria controls vinculando o botão ao id do painel; adicione a prop opcional panelsRole ('region' | 'none') para definir o role nos painéis.
Pilha de tecnologia
typescriptreact
Domain
frontend
Tipo Issue
Funcionalidade
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.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactTypeScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80