Accordion

An Accordion is a set of disclosures that know about each other. Unlike tabs, every header is its own tab stop, as the ARIA Authoring Practices ask: each header is something to act on, not a choice in a strip. The arrow keys still move between headers, and change nothing else.

When does it arrive?

Two days, or four to an island.

Can I send it back?

Gift wrapping

AccordionDemo.tsx

import { View } from '@hozo/core'
import { Accordion } from '@hozo/ui'

const QUESTIONS = [
  { id: 'shipping', header: 'When does it arrive?', content: 'Two days, or four to an island.' },
  { id: 'returns', header: 'Can I send it back?', content: 'Within thirty days, unopened.' },
  { id: 'wrap', header: 'Gift wrapping', content: 'Not yet.', disabled: true },
]

export function AccordionDemo() {
  return (
    <View className="w-full max-w-md">
      <Accordion items={QUESTIONS} accessibilityLabel="Questions" defaultExpanded="shipping" />
    </View>
  )
}

• items: { id, header, content, disabled? } for each section. Key by id, so reordering the list does not move the open panel.
• defaultExpanded, or expanded and onExpandedChange: the open section’s id, or null.
• multiple: lets several be open at once; the expanded value is then a list of ids.
• headingLevel: the heading each header sits in, 3 by default. Only you know what is above the accordion, so set it to fit the page’s outline.