Componentes
52. Árvore
seed-componentes.md v1.43 · §52seção 54 de 9852-arvore-estavel-f7-2-2026-08-15-ar1-ar8-fecha-a.md · MD5 23d55a74Título completo no canon: Á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.)
Também cita o §52: tela-lista, tela-tabela.