- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Accordion
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/accordion@3.0.45 |
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
StandardContribution
Item 1
Item 2
Item 3
Item 4
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>