Accordion

Anatomy

Elements

Accordion

The container.

Section

I made a choice between "item" and "section". Because ever item has a header, I decided to go with "section".

Header

WAI-ARIA Authoring Practices call it "Accordion Header". Other options: "summary".

Toggle button

The clickable area inside the header.

Panel

WAI-ARIA Authoring Practices call it "Accordion Panel". I was also considering "panel", "body" and "content", "details".

States

Are things open/closed or expanded/collapsed or hidden? Which elements are open/expanded?

API

Considering:

• focusFirst() for implementing Home key
• focusNext() for implementing ArrowDown key
• focusLast() for implementing End key
• focusPrevious() for implementing ArrowUp key
• expandAll()
• collapseAll()

Events

Considering:

• toggle like the event for details/summary

States

Considering:

• open boolean

Technology

• The custom element should be stylable by CSS depending on the state. There should be an open attribute that can be selected by CSS.

Accessibility

• WAI-ARIA Authoring Practices - Accordion
• Dave Rupert: Why <details> is Not an Accordion

UX Design

Toggle button:

• Proximity of the toggle icon to the heading text: When the toggle button is aligned to the opposite side of the heading text, the space between the toggle button and the heading might be too large to see what button corresponds to what heading. Consider limiting the space by a) aligning the items on the same side, or b) limiting the width of the accordion so the space is limited.
• Arrow direction of the toggle icon: when using an arrow, which direction should the arrow point for the expanded state and for the collapsed state? Many implementations have expanded = up and collapsed = down. Adobe Spectrum uses expanded = down, collapsed = text direction.

Example Component

• Gemeente Amsterdam - Design System - Accordion
• GOV.UK - Components - Accordion
• USWDS - Components - Accordion
• DSO Toolkit - Componenten - Accordion
• ING / Lion - Components - Accordion
• Material UI - Components - Accordion
• Vlaanderen - JS Components - Accordion
• Nijmegen - Componenten - Accordion
• Salesforce / Lightning - Components - Accordion
• Rijkshuisstijl - Basiselementen - Accordeon
• Ant Design - Components - Collapse

Experiment

Just CSS class names

BEM identifiers:

nih-accordion

nih-accordion__section

nih-accordion__section--open

nih-accordion__header

nih-accordion__header--expanded

nih-accordion__header--collapsed

nih-accordion__button-toggle

nih-accordion__button-toggle--expanded

nih-accordion__button-toggle--collapsed

nih-accordion__panel

nih-accordion__panel--hidden

Custom element implementation

Custom elements:

nih-accordion

nih-accordion-section

nih-accordion-header

nih-accordion-panel

nih-accordion,
nih-accordion-section,
nih-accordion-header,
nih-accordion-panel {
  display: block;
}

nih-accordion-panel[hidden] {
  display: none;
}

nih-accordion-header::after {
  content: "🔽";
}

nih-accordion-header[open]::after {
  content: "🔼";
}

Custom element implementation