@19h47/accordion

Sur un petit air d'accordéon Léon

Installation

yarn add @19h47/accordion

Usage

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();

<div class="js-accordion">
	<div class="js-accordion-panel" data-accordion-open="true" data-accordion-deselect="true">
		<button
			class="js-accordion-header"
			type="button"
			aria-expanded="true"
			aria-controls="lorem-body"
			id="lorem-header"
		>
			Toggle
		</button>

		<div id="lorem-body" role="region">
			<div class="js-accordion-inner">
				Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas
				quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at
				magnam tenetur maxime ad optio veniam!<br />
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias
				excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum
				ullam at quod soluta qui tempore sit eveniet dicta esse.
			</div>
		</div>
	</div>
</div>

Keyboard Support

Key	Function
Space or Enter	When focus is on the accordion header of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab	Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow	When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
Up Arrow	When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
	aria-controls="ID"	button	oints to the ID of the panel which the header controls.
region		div	Creates a landmark region that contains the currently expanded accordion panel.

Option

Options can be set as data-attribute.

Open

Is the panel open or not.

<button data-accordion-open="true">Button</button>

Deselect

Can the panel be deselected or not.

<button data-accordion-deselect="true">Button</button>

Event

Open

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);

accordion.init();

accordion.panels.forEach(panel => {
	panel.el.addEventListener('Panel.open', ({ detail }) => {
		console.log({ detail });
	});
});

Close

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);

accordion.init();

accordion.panels.forEach(panel => {
	panel.el.addEventListener('Panel.close', ({ detail }) => {
		console.log({ detail });
	});
});

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn serve

# build for production
$ yarn build

Example

An example is located right here, see sources.

Acknowledgments

• Accessible toggle tabs and accordion
• Accordion