Accordion

Um accordion é um conjunto de cabeçalhos interativos empilhados verticalmente, cada um contendo um título, trecho de conteúdo ou miniatura representando uma seção de conteúdo. Os títulos funcionam como controles que permitem aos usuários revelar ou ocultar suas seções de conteúdo associadas.

São comumente usados para reduzir a necessidade de rolar a página ao apresentar várias seções de conteúdo em um espaço vertical limitado, ou simplesmente como mecanismos de agrupamento de informações de forma organizada.

Variações

Este componente pode ser utilizado conforme as variações descritas a seguir.

Contraído

Quando contraído, o bloco de conteúdos referente àquele cabeçalho de accordion fica completamente oculto. Caso haja vários cabeçalhos de accordion em sequência, os posteriores ao elemento contraído devem naturalmente fluir para cima e ocupar o espaço não mais ocupado pelo conteúdo que foi escondido.

A aparência desta variação em modo claro, com seus diferentes estados:

A aparência desta variação em modo escuro, com seus diferentes estados:

Expandido

Quando expandido, o bloco de conteúdos referente àquele cabeçalho de accordion se torna visível. Caso haja vários cabeçalhos de accordion em sequência, os posteriores ao elemento expandido devem naturalmente fluir para baixo.

A aparência desta variação em modo claro, com seus diferentes estados:

A aparência desta variação em modo escuro, com seus diferentes estados:

Exemplo com conteúdo

Conforme citado, cabeçalhos de accordion podem ser posicionados em grupo. Além disso, os cabeçalhos também podem receber conteúdo personalizado, como ícone e subtítulo no cabeçalho, bem como os conteúdos da área expandida de cada accordion podem ser completamente personalizados conforme a necessidade. Basta apenas garantir que o espaçamento do conteúdo interno respeite o alinhamento de espaçamento do cabeçalho correspondente.

Exemplo em modo claro:

Exemplo em modo escuro:

Boas práticas

Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.

Exibição e comportamento

Cabeçalhos de accordion sempre possuem 64px de altura, ainda que esteja sendo exibido apenas um título, sem ícone e/ou subtítulo.

Área de conteúdo de um accordion expandido não precisa ter altura fixa, a menos que se queira propositalmente limitar seu tamanho e exibir barra de rolagem vertical ali mesmo. Em geral, é uma melhor opção deixar o conteúdo do accordion expandir livremente seu container, ficando a barra de rolagem vertical no exterior do grupo de cabeçalhos de accordion.

Usabilidade

Quando cabeçalhos de accordion são posicionados em grupo, duas usabilidades distintas são válidas, cabendo ao desenvolvedor escolher conforme a necessidade:

1. Ao expandir um cabeçalho de accordion, os outros permanecem em seus estados atuais (sejam eles expandidos ou contraídos), sem que um interfira no outro. Esta abordagem é interessante quando as áreas de conteúdo não tem qualquer relação, ou quando o espaço vertical não é um problema, ou ao menos a exibição de barra de rolagem vertical no container da área de accordion não é um problema.
2. Ao expandir um cabeçalho de accordion, os outros são automaticamente contraídos, garantindo-se sempre apenas uma área de conteúdo expandida. Esta abordagem é interessante para evitar excessivo reposicionamento de itens, ou qual a exibição de barra de rolagem vertical no container da área de accordion pode causar um resultado ruim.

Acessibilidade

Cada cabeçalho de accordion deve ser acessível por teclado, ou seja, deve respeitar tabindex e deve apresentar corretamente o indicador de foco conforme demonstrado no estado :focus-visible. A ação da tecla Enter em um cabeçalho de accordion com foco deve ser a mesma de clicar/tocar neste: Expandir ou contrair seu conteúdo, alternando de acordo com o estado atual.