Grade em árvore e outros padrões avançados

Alguns componentes são realmente complexos: treegrids, grades e árvores combinam linhas, colunas e nós expansíveis ao mesmo tempo. 🌳

Uma treegrid é uma grade cujas linhas podem ser expandidas e recolhidas como uma árvore, perfeita para um navegador de arquivos com pastas aninhadas e colunas de detalhes.

Use role="treegrid" no contêiner, role="row" em cada linha e role="gridcell" nas células. A estrutura reproduz uma grade real.

Uma linha que pode ser aberta contém aria-expanded, com valor true quando os filhos são exibidos e false quando está recolhida. Linhas folha omitem esse atributo completamente.

Use aria-level para informar aos usuários a profundidade de uma linha na árvore. O nível 1 é o topo, e cada linha aninhada aumenta esse valor em um.

Em uma treegrid, as teclas de seta movimentam-se em ambos os eixos: Para cima e Para baixo alteram as linhas, enquanto Esquerda e Direita movem-se entre as células ou recolhem e expandem.

Em uma linha-pai, Right Arrow a expande e Left Arrow a recolhe. Isso corresponde ao funcionamento tradicional das árvores de arquivos em computadores.

A treegrid inteira é um único ponto de tabulação. O tabindex rotativo move o foco real entre as células para que o componente pareça um único controle composto.

Para linhas dinâmicas ou virtualizadas, use aria-setsize e aria-posinset para que os usuários ouçam as posições mesmo quando nem todas as linhas são renderizadas.

Grades avançadas adicionam Home e End para saltar para a primeira ou a última célula, e Ctrl com Home ou End para ir diretamente ao início ou ao fim dos dados.

Esses padrões não perdoam erros, portanto siga atentamente o exemplo do APG e faça testes com um leitor de tela real. Pequenos erros comprometem o componente inteiro.

Uma treegrid combina grade e árvore: linhas com aria-expanded e aria-level, teclas de seta em dois eixos e um único ponto de tabulação por meio do tabindex rotativo. Consulte o APG e faça testes rigorosos. ✅