AbacatePay / AbacatePay/ecosystem

Botão "Carregar mais" sem aria-expanded, não anuncia estado para leitores de tela

Aperta
#39 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
8
Fork
5
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

**Descrição:**
O botão que expande a seção de cards adicionais (SDKs, Ferramentas, ChangeLog, CLI, AI) na página `/pages/start/welcome` alterna conteúdo visível via JavaScript, mas não expõe o estado (expandido/recolhido) para tecnologias assistivas.

**Elemento:** ``

O texto do botão muda visualmente ("Carregar mais" ↔ "Mostrar menos"), mas isso é só cosmético — não há atributo `aria-expanded` no elemento, então leitores de tela não informam ao usuário se o conteúdo associado (`id="card-11"`) está visível ou oculto.

![IMG_20260719_125358.jpg](https://github.com/user-attachments/assets/cf52d255-3961-43d7-9c15-edf6fd51d1c2)

**Por que isso precisa ser corrigido:**
- Sem `aria-expanded`, um usuário de leitor de tela clica no botão e não tem confirmação de que algo mudou na página — a experiência fica incompleta ou confusa.
- É um requisito coberto pela WCAG 2.1 (critério 4.1.2 - Name, Role, Value), que exige que o estado de componentes interativos seja programaticamente determinável.
- É uma correção pequena e de baixo risco (adicionar um atributo), com impacto direto em acessibilidade — bom equilíbrio de esforço vs. benefício.

**Sugestão de correção:**
Adicionar `aria-expanded={isHidden}` no ``, e `aria-controls="card-11"` apontando para o container expandido, atualizando o valor a cada clique junto com a troca de texto já existente.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.