Criando um acordeão com PE

A versão com PE de um acordeão usa apenas HTML — o par de elementos nativos <details>/<summary>. Clique no resumo para alternar o painel. Funciona sem CSS, sem JS e sem uma estrutura de desenvolvimento: isso já faz parte do HTML.

<summary> é um botão que pode receber foco e ser ativado pelo teclado (Enter/Espaço alterna o estado). Os leitores de tela anunciam o estado expandido/recolhido. Dois elementos HTML oferecem o que um acordeão personalizado em React pode exigir dezenas de linhas de ARIA e manipulação de eventos para realizar.

Estilize o triângulo de divulgação, o preenchimento do painel e as transições com CSS comum. O atributo open reflete o estado, portanto details[open] summary { color: blue; } é aplicado somente quando o conteúdo está expandido. Não é necessário JS para o aprimoramento visual.

A abertura e o fechamento padrão são instantâneos. Anime fazendo uma transição de content-visibility ou usando JS para medir a altura do painel e animar max-height. Em casos simples, a alternância abrupta é aceitável; a animação é um aprimoramento de CSS+JS aplicado progressivamente.

JS pode adicionar recursos opcionais: fechar outros acordeões quando um deles for aberto (modo de abertura única), manter o estado aberto em localStorage, animar a transição ou registrar por análise quais entradas estão expandidas. Cada aprimoramento é puramente adicional.

<details> dispara um evento toggle sempre que seu estado aberto é alterado. Use-o para reagir à expansão feita pelo usuário sem refazer os manipuladores de clique. É compatível tanto com cliques do mouse quanto com ativação pelo teclado.

Para renderizar um acordeão inicialmente aberto, defina o atributo open no servidor: <details open>. O estado está no HTML, acessível a rastreadores e a usuários com conexões lentas antes que qualquer JS seja executado.

Se o design exigir um ícone personalizado de expansão/recolhimento, uma revelação animada ou um painel com várias colunas, crie uma versão personalizada — mas use <details>/<summary> como estrutura subjacente, se possível. Adicione ARIA somente se não puder usar os elementos nativos de forma alguma.

Desative JavaScript no DevTools e verifique se o acordeão continua funcionando: clique em summary, o painel alterna, a ordem do foco permanece lógica e o teclado ativa o componente. Se algo falhar, o JS não é um aprimoramento — é um requisito, o que viola PE.

Para obter o comportamento de rádio de "apenas um aberto por vez" sem JS, use o atributo name em <details> (com suporte no Chrome/Safari): todos os elementos <details name="faq"> compartilham o estado, portanto abrir um fecha os outros. Um padrão exclusivamente em HTML que reproduz o comportamento dos botões de rádio.

Substitua divs+JS por <details>/<summary> e preserve as classes CSS para a estilização. O resultado tem HTML mais curto, nenhuma dependência de JS, melhor acessibilidade e conteúdo indexável. A maioria dos acordeões em JS pode ser migrada para PE com uma mudança mínima perceptível para o usuário.

Um acordeão PE usa <details>/<summary> nativos como base — totalmente acessíveis e operáveis pelo teclado sem JS. Adicione CSS para a estilização visual e, opcionalmente, JS para animações ou para o comportamento de abertura única. Verifique desativando o JS se a base continua funcionando. O novo atributo name permite até mesmo um modo de abertura única somente com CSS.