@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