• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Accordion

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/accordion@3.0.45
View repository
GitHub
View package
npm

Usage notes

While remaining backward compatible, the recommended markup has been updated to implement the WAI-ARIA 1.1 Accordion design pattern to better support accessibility for keyboard and screen reader users.

Variants

Standard
Contribution

Show markup
<!-- WAI-ARIA 1.1: Accordion container role changed from "tablist" to "region" -->
<div class="spectrum-Accordion" role="region">
  <div class="spectrum-Accordion-item is-open" role="presentation">

    <!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
    <h3 class="spectrum-Accordion-itemHeading">
      <!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. -->
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-0-header" aria-controls="spectrum-accordion-item-0-content" aria-expanded="true">Recent</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </h3>

    <!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" -->
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-0-content" aria-labelledby="spectrum-accordion-item-0-header">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item is-disabled" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" disabled id="spectrum-accordion-item-1-header" aria-controls="spectrum-accordion-item-1-content" aria-expanded="false">Architecture</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-1-content" aria-labelledby="spectrum-accordion-item-1-header">Item 2</div>
  </div>
  <div class="spectrum-Accordion-item" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-2-header" aria-controls="spectrum-accordion-item-2-content" aria-expanded="false">Nature</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-2-content" aria-labelledby="spectrum-accordion-item-2-header">Item 3</div>
  </div>
  <div class="spectrum-Accordion-item" role="presentation">
    <h3 class="spectrum-Accordion-itemHeading">
      <button class="spectrum-Accordion-itemHeader" type="button" id="spectrum-accordion-item-3-header" aria-controls="spectrum-accordion-item-3-content" aria-expanded="false">Really Long Accordion Item According to Our Predictions</button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </h3>
    <div class="spectrum-Accordion-itemContent" role="region" id="spectrum-accordion-item-3-content" aria-labelledby="spectrum-accordion-item-3-header">Item 4</div>
  </div>
</div>