Accessible Accordion Component For JavaScript – A11Y Accordion

Category: Accordion , Javascript | March 29, 2018
Author: jonathanlevaillant
Views Total: 364
Official Page: Go to website
Last Update: March 29, 2018
License: MIT

Preview:

Accessible Accordion Component For JavaScript – A11Y Accordion

Description:

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();

});

Leave a Reply