---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 52
titulo: "Árvore — `estável` (F7.2, 2026-08-15) · AR1–AR8 · fecha a lacuna C16"
sequencia: 54 de 98
bytes_do_corpo: 3017
md5_do_corpo: 23d55a744413362e332663f029fe69f1
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
---
## 52. Árvore — `estável` (F7.2, 2026-08-15) · AR1–AR8 · fecha a lacuna C16

> **Base (3 rodadas, 2026-08-15):** **R1/R3** — APG *Treeview* e a régua do APG para quando uma
> treeview com colunas é aceitável: (a) as colunas **cabem sem rolagem horizontal**, (b) as colunas
> são **apresentação**, não navegação, e (c) a linha inteira pode ser anunciada **como uma única
> string** sem perda. Fora dessas três condições, o arquétipo é **tabela**, não árvore ·
> APG *Roving tabindex* · Roselli (treegrid: composto, suporte pobre — descartado). **R2** — a
> árvore já existia no shell (§46) **sem spec própria**: era o item C16 do mapa de cobertura,
> marcado "parcial (vive no §46)".

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| AR1 | **`role="tree"` no contêiner, `role="treeitem"` em cada nó, `role="group"` no `<ul>` filho** | Semântica de árvore não existe em HTML; aqui a ARIA é o caminho certo, não remendo | `<details>` aninhado (não expõe nível nem posição) · lista com links (perde a hierarquia) |
| AR2 | **Roving tabindex: exatamente UM `treeitem` no tab sequence** | A árvore é widget composto — um tab-stop, navegação por setas. Vários tab-stops fazem o teclado atravessar dezenas de nós | `tabindex="0"` em todos (a sidebar vira armadilha de Tab) |
| AR3 | **Setas: ↑↓ movem, → expande (ou entra), ← recolhe (ou sobe ao pai)**; `Espaço`/`Enter` ativam | Padrão APG, e é o que o usuário de teclado já sabe de qualquer explorador de arquivos | Setas só movendo (expandir só com clique quebra o CP30) |
| AR4 | **`aria-expanded` SÓ nos nós que agrupam.** Folha com o atributo mente sobre a estrutura | O atributo em folha faz a AT anunciar um nó expansível que nunca expande | Pôr em todos "por simetria" |
| AR5 | **Contador junto ao rótulo (C26) no nó, com zero explícito**, em `text-muted` | Responde "quanto tem aqui" antes de expandir — numa hierarquia de 3–4 níveis, evita navegação exploratória | Contador só no nó agrupador (o item folha é onde a contagem decide o clique) |
| AR6 | **Item ativo tem TRÊS sinais**: fundo, peso e barra lateral de 3px em `text-brand` — nunca só cor | Regra dos três sinais do Bloco 1, herdada; o grayscale tem de sobreviver | Só fundo (some no grayscale e no alto contraste) |
| AR7 | **A régua árvore × tabela é normativa** (APG): se as colunas precisam ser navegadas, **é tabela agrupada (§50)** — não se usa árvore com colunas | É a diferença entre um widget que funciona e um treegrid que nenhuma AT lê bem | Árvore com colunas "porque parece uma tabela hierárquica" |
| AR8 | **Fronteiras:** seleção múltipla em árvore, arrastar nó e carregamento assíncrono de subárvore entram por demanda, com pesquisa própria | Cada um traz norma nova (2.5.7 para o arraste, live region para o assíncrono) | Especificar sem caso real |

*(Guardas: `suite-container.mjs`, ARV-01…ARV-03, nas duas telas.)*

---