Accordion (Collapsible Sections)

// Gold Standard: Proper button with ARIA states
.accordion
  // Item 1
  .accordion-item
    h3
      button(
        type="button"
        aria-expanded="false"
        aria-controls="panel-1"
        class="accordion-trigger"
      )
        span.accordion-title What is an accordion?
        span.accordion-icon(aria-hidden="true") ▼

    div#panel-1(
      role="region"
      aria-labelledby="panel-1-heading"
      class="accordion-panel"
      hidden
    )
      p#panel-1-heading.sr-only What is an accordion?
      p An accordion is a vertically stacked list of headers.

  // Item 2
  .accordion-item
    h3
      button(
        type="button"
        aria-expanded="false"
        aria-controls="panel-2"
        class="accordion-trigger"
      )
        span.accordion-title When to use accordions?
        span.accordion-icon(aria-hidden="true") ▼

    div#panel-2(
      role="region"
      aria-labelledby="panel-2-heading"
      class="accordion-panel"
      hidden
    )
      p#panel-2-heading.sr-only When to use accordions?
      p Use accordions to reduce scrolling.

const AccordionItem = ({ title, children, id, isOpen, onToggle }) => (
  <div className="accordion-item">
    <h3>
      <button
        type="button"
        aria-expanded={isOpen}
        aria-controls={`panel-${id}`}
        onClick={onToggle}
      >
        <span className="accordion-title">{title}</span>
        <span className="accordion-icon" aria-hidden="true">
          {isOpen ? '▲' : '▼'}
        </span>
      </button>
    </h3>
    <div
      id={`panel-${id}`}
      role="region"
      aria-labelledby={`panel-${id}-heading`}
      className="accordion-panel"
      hidden={!isOpen}
    >
      <p id={`panel-${id}-heading`} className="sr-only">
        {title}
      </p>
      {children}
    </div>
  </div>
);

<template>
  <div class="accordion-item">
    <h3>
      <button
        type="button"
        :aria-expanded="isOpen"
        :aria-controls="`panel-${id}`"
        @click="isOpen = !isOpen"
      >
        <span class="accordion-title">{{ title }}</span>
        <span class="accordion-icon" aria-hidden="true">
          {{ isOpen ? '▲' : '▼' }}
        </span>
      </button>
    </h3>
    <div
      :id="`panel-${id}`"
      role="region"
      :aria-labelledby="`panel-${id}-heading`"
      class="accordion-panel"
      v-show="isOpen"
    >
      <p :id="`panel-${id}-heading`" class="sr-only">
        {{ title }}
      </p>
      <slot />
    </div>
  </div>
</template>

<div className="border border-gray-200 rounded-lg">
  <h3>
    <button
      type="button"
      :aria-expanded="isOpen"
      :aria-controls="`panel-${id}`"
      @click="isOpen = !isOpen"
      className="w-full flex items-center justify-between p-4 text-left font-semibold"
    >
      <span>What is an accordion?</span>
      <span aria-hidden="true" className="text-gray-400">
        {isOpen ? '▲' : '▼'}
      </span>
    </button>
  </h3>
  <div
    :id="`panel-${id}`"
    role="region"
    :aria-labelledby="`panel-${id}-heading`"
    className="px-4 pb-4"
    v-show="isOpen"
  >
    <p :id="`panel-${id}-heading`` className="sr-only">
      What is an accordion?
    </p>
    <p className="text-gray-600">
      An accordion is a vertically stacked list...
    </p>
  </div>
</div>