Accessible Accordion Component For JavaScript – A11Y Accordion

a11y-accordion-component is a library written in vanilla JavaScript to easily create easy-to-config, WAI-ARIA compliant accordion on the web app.

Features:

• Enter or Space key to toggle accordion panels.
• Arrow keys to move the focus.
• Home key to move the focus to the first header.
• End key to move the focus to the last header.
• Page Up and Page Down keys to move the focus to the associated headers.

Installation:

# Yarn
$ yarn add a11y-accordion-component
# NPM
$ npm install a11y-accordion-component --save

How to use it:

The primary HTML structure for the accordion component. Available attributes:

• data-component=”accordion”: initialize a new accordion
• data-multiselectable=”false”: allows to select multiple accordion panels
• data-collapsible=”false”: is collapsible?
• id=”trigger-ID”: trigger ID
• id=”panel-ID”: panel ID
• data-controls=”panel-ID”: control ID
• data-open=”true”: if is open on init

<div class="c-accordion u-p" data-component="accordion">
  <div role="heading" aria-level="3">
    <div
      id="accordion-trigger-1"
      class="c-accordion__trigger"
      data-controls="accordion-panel-1"
      data-open="true">
      Accordion Header 1
    </div>
  </div>
  <div id="accordion-panel-1" class="c-accordion__panel">
    <div class="c-accordion__inner">
      <h3>Section 1</h3>
      <p>
        A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a
        discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.
        Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,
        used to organize longer prose.
      </p>
      <p><a href="#">This is a text link</a></p>
    </div>
  </div>
  <div role="heading" aria-level="3">
    <div
      id="accordion-trigger-2"
      class="c-accordion__trigger"
      data-controls="accordion-panel-2">
      Accordion Header 2
    </div>
  </div>
  <div id="accordion-panel-2" class="c-accordion__panel">
    <div class="c-accordion__inner">
      <h3>Section 2</h3>
      <p>
        A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a
        discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.
        Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,
        used to organize longer prose.
      </p>
      <p><a href="#">This is a text link</a></p>
    </div>
  </div>
  <div role="heading" aria-level="3">
    <div
      id="accordion-trigger-3"
      class="c-accordion__trigger"
      data-controls="accordion-panel-3">
      Accordion Header 3
    </div>
  </div>
  <div id="accordion-panel-3" class="c-accordion__panel">
    <div class="c-accordion__inner">
      <h3>Section 3</h3>
      <p>
        A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a
        discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.
        Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing,
        used to organize longer prose.
      </p>
      <p><a href="#">This is a text link</a></p>
    </div>
  </div>
</div>

Load the necessary JavaScript file ‘a11y-accordion-component.js’ in the document.

<script src="a11y-accordion-component.js"></script>

Initialize the library and done.

document.addEventListener('DOMContentLoaded', () => {
  Accordions.init();
});

Changelog:

v1.2.6 (11/05/2018)

• removed touchstart event