---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 29
titulo: "Accordion — `estável` (v0.28) · AC1–AC6 · validação executada 213/213 + visual aprovada em 2026-08-05"
sequencia: 31 de 98
bytes_do_corpo: 5068
md5_do_corpo: 2ee49bde6cc7559755876d163a999edf
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 29. 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)**, MDN `hidden="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

1. 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.)*

---