Componentes
29. Accordion
seed-componentes.md v1.43 · §29seção 31 de 9829-accordion-estavel-v0-28-ac1-ac6-validacao.md · MD5 2ee49bdeTítulo completo no canon: Accordion — estável (v0.28) · AC1–AC6 · validação executada 213/213 + visual aprovada em 2026-08-05
Base (3 rodadas, 2026-08-05): R1 — APG (button-no-heading, aria-expanded/controls, region até ~6 painéis, Tab nativo + Enter/Espaço), GOV.UK (Show all/Hide all; blog de acessibilidade: reprovações formais em WCAG 1.3.1 — título azulado lido como link — e 3.2.4 — estilos múltiplos de accordion), ONS/Bristol (quando não usar; nesting proibido), NN/g ×4 (multi-aberto obrigatório; estado persiste; 5 cenários de evitar; mobile é o caso mais forte). R2 — Radix (type single/multiple, collapsible, setas/Home/End de graça, animação via
--radix-accordion-content-height), shadcn/Base UI. R3 — Scott O'Hara (primária: quirks do<summary>— role inconsistente entre browsers, confirmado pela regra ACT do W3C), MDNhidden="until-found"+beforematch(Baseline 2025), SAP Fiori panel (nesting not recommended; chevron rotaciona).
29.1 Decisões AC1–AC6#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| AC1 | Semântica APG: <hN><button aria-expanded aria-controls></hN> + painel id recíproco; nível do heading é do consumidor (eco CD2); painel role="region"+aria-labelledby até ~6 seções (acima, div simples); teclado Tab/Enter/Espaço, setas como enhancement do Radix |
APG unânime nas fontes; botão-no-heading habilita navegação por headings no leitor de tela | Header sem heading; aria-disabled prendendo painel aberto |
| AC2 | Implementação ARIA+JS (padrão do stack Radix/shadcn/Lovable), NÃO <details>/<summary>; painel fechado usa hidden="until-found" e o evento beforematch sincroniza aria-expanded quando o find-in-page revela |
O'Hara + regra ACT (role do summary inconsistente entre browsers); GOV.UK também é custom; until-found recupera o find-in-page que era a única vantagem do details (Baseline 2025: Chrome/Firefox, Safari a caminho) | <details> puro (quirks + sem single/multiple); div onclick |
| AC3 | Multi-aberto é o DEFAULT; exclusivo (single) é variante justificada por fluxo de leitura; collapsible sempre (tudo pode fechar) |
NN/g explícito ("garanta abrir múltiplas seções"; estado permanece até o usuário mudar); GOV.UK/Radix | Single como default (fecha o que o usuário abriu — anti-controle); regime "um sempre aberto" |
| AC4 | A linha inteira é o botão (≥48px), chevron rotacionando no trailing (aria-hidden; estado vive no aria-expanded), slot de meta em JetBrains Mono; título nunca com cara de link (lição 1.3.1 GOV.UK); um estilo de accordion por produto (3.2.4); nenhum controle interativo dentro do button — ações por item são exceção documentada como elementos irmãos (eco CD3-c) |
Blog GOV.UK (2 reprovações formais viram regra); HTML proíbe interativo em button; causa nº 1 de summary sem nome na ACT é ícone-só clicável | Só o ícone clicável; ações dentro do button |
| AC5 | Régua de uso: nunca esconder conteúdo crítico ao fluxo; <~4 seções → headings simples; usuário precisa da maioria → tudo aberto; "Mostrar tudo/Ocultar tudo" a partir de 4 seções (omitido em coluna estreita); fronteiras declaradas: tabs/stepper→B5, tree view→fora; nesting proibido (eco CD5) | NN/g/ONS/Bristol; GOV.UK (Show all); Fiori (nesting not recommended) | Accordion para conteúdo essencial; accordion dentro de accordion |
| AC6 | Tudo fechado por default; variante "aberto por default" quando o conteúdo é primário; animação ~200ms ease-out com prefers-reduced-motion desligando (chevron 180ms); divider entre itens via CSS herdando DV1 (zero <hr> na árvore); persistência entre visitas = decisão de produto/Lovable (mesmo tratamento da CN no marco v1.0) |
Fiori (fechado default); ONS (open:true); shadcn/Radix (animação); GOV.UK (rememberExpanded registrado, não adotado no DS) |
Persistência no DS |
29.2 Anatomia e tokens#
Container herda card outlined (§26: --seed-card-bg + borda decorativa declarada) · item+item separado por --seed-divider-color via CSS · botão 48px min, padding 12/16, hover --seed-list-hover · chevron 20px text-muted — par já medido no F: cinza-600/branco 4.74 AA light · cinza-300/raised 7.95 AAA dark (indicador de estado, 1.4.11 ✓) · meta JetBrains Mono text-muted · foco: anel interno (inset) para não vazar do container. Nenhum par de cor novo neste sub-bloco.
29.3 Os 7 testes#
- Pares reusados já medidos ✓ (nenhum número novo sem medição). 2. Estado por chevron rotacionado +
aria-expanded, nunca só cor. 3. Grayscale ✓ (provado no preview). 4. Multi × exclusivo a 1s (seções abertas simultâneas). 5. Regra do um: um estilo de accordion por produto (3.2.4). 6. Aberto/fechado visível sem interação (chevron). 7. 360px: linha 48px inteira clicável; "Mostrar tudo" omitido em coluna estreita. (Validação executada 213/213 + visual aprovada em 2026-08-05.)
Também cita o §29: tela-site.