accordion

Accordion

A custom element for building accessible accordions.

The accordion element wraps multiple disclosure elements, and ensures only one of these is expanded at a time.

Example

import { AccordionElement } from 'inclusive-elements';

window.customElements.define('ui-accordion', AccordionElement);

<ui-accordion>
    <ui-disclosure>
        <h2>
            <button type="button">Section A</button>
        </h2>
        <div>
            Details
        </div>
    </ui-disclosure>
    
    <ui-disclosure>
        <h2>
            <button type="button">Section B</button>
        </h2>
        <div>
            Details
        </div>
    </ui-disclosure>
</ui-accordion>

Behavior

• Whenever a direct child <ui-disclosure> or <details> element is opened, sibling <ui-disclosure> and <details> elements will be closed.

• If the required attribute is present, the <ui-disclosure> element that is currently open will be disabled.

Further Reading

• ARIA Authoring Practices Guide: Accordion Pattern