Sistema de Acordeão de UI

O que Sistema de Acordeão de UI faz?

Propósito

A skill Sistema de Acordeão de UI fornece uma metodologia para projetar e estruturar acordeões — cabeçalhos empilhados que se expandem para revelar conteúdo associado. Esse padrão é essencial para divulgação progressiva, permitindo que os usuários examinem informações de alto nível e escolham quais detalhes consumir. Uma abordagem sistemática para acordeões garante que eles reduzam a carga cognitiva sem esconder informações críticas ou criar barreiras de acessibilidade.

Casos de Uso

• Seções de FAQ: Organizar uma longa lista de perguntas e respostas em uma lista escaneável.
• Menus Mobile: Recolher itens de navegação secundários para economizar espaço vertical.
• Formulários Complexos: Agrupar campos de formulário relacionados em seções gerenciáveis e alternáveis.
• Detalhes de Produtos: Esconder especificações técnicas, informações de envio ou avaliações em páginas de e-commerce.
• Filtros: Gerenciar múltiplos grupos de facetas em uma barra lateral de descoberta.

Quando NÃO Usar

• Volumes Pequenos de Conteúdo: Se o conteúdo total for breve, escondê-lo atrás de um clique adiciona custo de interação desnecessário.
• Instruções Críticas: Se o usuário precisa ler a informação para prosseguir (ex.: avisos legais ou etapas de "como fazer"), não a esconda.
• Páginas com Busca Intensiva: Se os usuários precisam usar a função "Localizar" do navegador (Cmd/Ctrl+F) com frequência; o conteúdo oculto do acordeão geralmente não é pesquisável por padrão.
• Divulgação de Item Único: Use um link simples de "Mostrar Mais" ou um componente de divulgação única se houver apenas um pedaço de conteúdo para alternar.

Entradas

1. Inventário de Conteúdo: Uma lista de cabeçalhos e seus conteúdos expandidos correspondentes.
2. Lógica de Expansão: Apenas um item deve ficar aberto por vez (Exclusivo) ou vários podem ficar abertos?
3. Contexto do Gatilho: Onde o acordeão ficará? (ex.: área de conteúdo principal, barra lateral ou gaveta mobile?)
4. Sistemas Existentes: Escalas de espaçamento fluido e tipografia do sistema de design pai.

Saídas

1. Especificação de Anatomia do Acordeão: Definições visuais para Cabeçalhos, Ícones, Painéis e Espaçamento.
2. Especificação de Interação: Comportamento para expansão, estados de foco e transições.
3. Blueprint de Acessibilidade: Papéis ARIA, estados e mapeamento de teclado.
4. Estratégia Responsiva: Regras para como o acordeão se adapta a viewports estreitas.

Fluxo de Trabalho

1. Estruturar a Anatomia do Conteúdo

Defina as partes padrão de um item de acordeão:

• O Cabeçalho (Gatilho): A área clicável contendo o título.
• O Ícone (Affordance): Geralmente um chevron ou sinal de mais/menos para indicar expansibilidade.
• O Painel: O contêiner que guarda o conteúdo oculto.
• O Grupo: O contêiner pai que gerencia o relacionamento entre vários itens.

2. Estabelecer Affordances Visuais

Aplique sistema-de-hierarquia-visual para garantir que o acordeão seja reconhecível:

• Indicadores de Estado: Use ícones (chevrons) que giram ou mudam quando o acordeão está aberto.
• Separação: Use bordas, mudanças de cor de fundo ou espaçamento vertical (do sistema-de-espaçamento-fluido) para distinguir itens.
• Cabeçalhos: Garanta que o texto do cabeçalho pareça interativo (peso maior ou cor diferente).

3. Definir a Lógica de Interação

Escolha o padrão de comportamento:

• Exclusivo (Abertura Única): Abrir um item fecha automaticamente os outros. Melhor para foco e redução do comprimento da página.
• Multi-Abertura: Vários itens podem permanecer abertos. Melhor para quando os usuários precisam comparar informações entre seções.
• Estado Padrão: Determine se o primeiro item deve ficar aberto por padrão para sinalizar funcionalidade.

4. Otimizar para Espaçamento e Conteúdo

Aplique sistema-de-espaçamento-fluido ao interior:

• Padding do Cabeçalho: Garanta que o alvo de toque tenha pelo menos 24x24px (WCAG 2.2 SC 2.5.8 mínimo); prefira 44x44px onde o layout permitir para uso tátil confortável.
• Padding do Painel: Use padding interno para criar uma relação clara entre o cabeçalho e seu conteúdo.
• Transições: Use transições sutis de altura ou opacidade (200-300ms) para suavizar o "salto" quando o conteúdo aparecer.

5. Verificar Acessibilidade e Responsividade

• Teclado: Os usuários devem poder usar Tab para navegar pelos cabeçalhos e usar Enter/Espaço para alternar, conforme o padrão de Acordeão do ARIA APG.
• ARIA: Envolva cada gatilho em um elemento de cabeçalho (<h3><button aria-expanded="true/false" aria-controls="id-do-painel">...</button></h3>) e dê ao painel role="region" com aria-labelledby apontando de volta para o gatilho quando os painéis contiverem conteúdo substancial.
• Mobile: Garanta que cabeçalhos longos quebrem graciosamente e não sobreponham os ícones.

Regras de Decisão

• A Regra do Chevron: Sempre inclua um indicador visual (como um chevron) no lado direito do cabeçalho. Deve apontar para baixo quando fechado e para cima quando aberto.
• A Regra do Primeiro Item: Abra o primeiro item do acordeão por padrão se ele contiver a informação mais importante ou mais solicitada.
• Truncamento de Texto: Nunca trunque cabeçalhos de acordeão. Se um título for longo, deixe-o quebrar em várias linhas para garantir clareza.
• Alinhamento: Mantenha o ícone do gatilho de expandir/recolher consistente (geralmente alinhado à extrema direita) para criar um caminho de escaneamento previsível.

Restrições

• Acessibilidade: Os cabeçalhos devem usar tags de cabeçalho semânticas (H2-H4) contendo um <button> para acesso por teclado; atende ao tamanho mínimo de alvo da WCAG 2.2 SC 2.5.8 (24x24px).
• Responsividade: A largura do acordeão deve ser fluida (100% do pai). O conteúdo do painel deve ser totalmente responsivo.
• Hierarquia: Os cabeçalhos do acordeão nunca devem ser visualmente mais proeminentes do que o H1 da página.

Padrões Comuns de Falha

• Gatilhos de Carne Misteriosa: Cabeçalhos de acordeão que parecem texto simples, deixando os usuários desavisados de que podem ser clicados.
• Salto de Conteúdo: Transições rápidas e bruscas que desorientam a posição de rolagem do usuário.
• Estados de Foco Ausentes: Esquecer de projetar um anel de foco visível para usuários de teclado.
• Painéis Superlotados: Colocar muito conteúdo interativo complexo (como outros acordeões) dentro de um painel, levando a "inception aninhada".
• ARIA Inacessível: Falhar em atualizar os estados aria-expanded programaticamente.

Critérios de Validação

• Cada item do acordeão possui um indicador visual claro (ex.: chevron).
• Os cabeçalhos são acessíveis por teclado (baseados em botão) com estados de foco visíveis.
• aria-expanded e aria-controls estão corretamente definidos.
• O espaçamento interno segue o sistema de espaçamento fluido.
• A lógica exclusiva/multi-abertura é apropriada para o tipo de conteúdo.
• O acordeão transita suavemente sem quebrar o layout.
• Os alvos de toque atendem ao mínimo WCAG 2.2 de 24x24px (44x44px preferido).