Accordion

Accessible, lightweight accordion behaviour used across the design system. The script provides a small initializer that wires up click handlers on markup that follows the project's CSS conventions.

Markup

Minimal accessible markup the script expects:

<div class="ds-accordion">
  <button class="ds-accordion__summary-wrapper" aria-controls="accordion-01" aria-expanded="false">
    <div class="ds-accordion__summary">Summary title</div>
  </button>
  <div id="accordion-01" class="ds-accordion__content">
    <!-- panel content -->
  </div>
</div>

Notes:

• The toggling element must be a focusable control (usually a button).
• The toggler should have aria-controls pointing to the content id and an aria-expanded attribute (the script will update it).

Installation

This package is built into the monorepo and distributed as a compiled script and styles. In an application bundler or demo, include the script and call the initializer after DOM ready:

<script type="module">
  import initAccordions from '@wmcadigital/ui-accordion/dist/scripts/accordion.js';
  document.addEventListener('DOMContentLoaded', () => initAccordions());
</script>

Or, if you use the default build output via a bundler you can import the default export:

import initAccordions from '@wmcadigital/ui-accordion';
initAccordions();

Options

The initializer accepts an optional options object to customise selectors, class and attribute names:

initAccordions({
  rootSelector: '.my-accordion',
  summarySelector: '.my-summary',
  openClass: 'is-open',
});

Accessibility

• Use a button for the summary control so it is keyboard-accessible by default.
• Keep aria-controls and aria-expanded in sync — the script will update aria-expanded automatically when a user toggles.
• Ensure each content panel has a unique id referenced by its toggler's aria-controls.
• Provide sufficient heading structure inside the summary for screen reader users. Avoid duplicate id values across accordions.

Behaviour and keyboard

• Click toggles open/closed state and updates aria-expanded.
• The component does not move focus; if required, manage focus in your page-level scripts.

Contributing

If you need additional features (keyboard navigation between headers, single-open behaviour, etc.) open a PR or issue with proposed API and tests.