Accordion
StablePrimitive de disclosure: uma pilha de cabeçalhos em que cada um revela o seu painel. Composto sobre Base UI Accordion; a abertura transiciona a altura pela escala de motion da Foundation, então reduced motion a colapsa sem desligar o disclosure.
Instalação
npx up-web-ds add accordionGera chevron-down para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
Multiple
Por npm run ds:add, que escreve em staging e registra a proveniência. Sem --promote nada é escrito em src/.
With Disabled Item
Rich Content
Implementação, metadata completa, examples, testes, registro no catálogo e tokens da Foundation. Além disso: dark mode, revisão de acessibilidade por teclado e leitor de tela, reduced motion, typecheck e biome.
As afirmações que o jsdom não consegue observar — alvo de toque e reduced motion — são provadas em tests/e2e/, não de memória. O validador cobra isso mecanicamente pelo DS011, e marcar stable para contornar o validador é a única saída que não vale.
All states
Default
Multiple
Por npm run ds:add, que escreve em staging e registra a proveniência. Sem --promote nada é escrito em src/.
With Disabled Item
Rich Content
Implementação, metadata completa, examples, testes, registro no catálogo e tokens da Foundation. Além disso: dark mode, revisão de acessibilidade por teclado e leitor de tela, reduced motion, typecheck e biome.
As afirmações que o jsdom não consegue observar — alvo de toque e reduced motion — são provadas em tests/e2e/, não de memória. O validador cobra isso mecanicamente pelo DS011, e marcar stable para contornar o validador é a única saída que não vale.
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- disclosure
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / accordion
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado e leitor de tela verificados por teste: cada gatilho é um button dentro de um heading, Enter e Space alternam o painel, Tab percorre os gatilhos na ordem do documento, e o foco permanece no gatilho depois de abrir — o painel é conteúdo, não destino. Um item desabilitado continua focalizável e anunciado como desabilitado, e apenas recusa abrir: um cabeçalho que some da sequência de tabulação também some do outline que um usuário de leitor de tela percorre. O painel aberto é uma region nomeada pelo seu gatilho por aria-controls, e aria-expanded acompanha o estado real. Touch verificado em viewport de 375px com emulação de toque: os gatilhos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e o toque abre e fecha. Reduced motion verificado com prefers-reduced-motion: reduce — a transição de altura mede 1ms e o painel continua abrindo e fechando.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- chevron-down
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda