ember-a11y-accordion

This Ember addon is based on the W3C's ARIA best practices for accordions and treats accessibility as a first class citizen. Live demo: https://vasilionjea.github.io/ember-a11y-accordion/

Install

ember install ember-a11y-accordion

Usage

{{#accordion-list
  class="my-accordion"
  animation=false
  onShow=(action "onAccordionShow") 
  onAfterShow=(action "onAccordionAfterShow") as |accordion|}}
  {{#accordion.item name="item1" expandOnInit=true as |item|}}
    {{#item.header class="first-header" aria-level="4"}}Lorem ipsum{{/item.header}}
    {{#item.panel class="first-panel"}}
      <p>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    {{/item.panel}}
  {{/accordion.item}}

  {{#accordion.item name="item2" as |item|}}
    {{#item.header aria-level="4"}}Dolor Sit{{/item.header}}
    {{#item.panel}}
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    {{/item.panel}}
  {{/accordion.item}}

  {{#accordion.item isDisabled=true as |item|}}
    {{#item.header aria-level="4"}}This is disabled{{/item.header}}
    {{#item.panel}}
      <p>User cannot interact with this item.</p>
    {{/item.panel}}
  {{/accordion.item}}
{{/accordion-list}}

There is an additional collapsible component called collapsible-list and all the options are exactly the same as the accordion list component. The only difference is that accordions expand one item at a time, whereas collapsibles can have multiple items expanded at any point in time.

Both the accordion-list and the collapsible-list components accept the following actions:

• onShow Triggered when the header is clicked.
• onAfterShow Triggered once the content is visible and all animations completed. Without animation, it triggers after the onShow action.

The collapsible-list component additionally accepts the following actions:

• onHide Triggered when the header is clicked and the panel is closing.

onHide, onShow and onAfterShow will receive an object as first argument with a name property containing the name of the accordion-item becoming visible and other properties.

Roles, States, Attributes, and Classes

Role	Attribute	Element	Classes
		div	.a11y-accordion-list	Simply used as a container and doesn't have any semantic meaning.
		section	.a11y-accordion-item .a11y-accordion-item--is-expanded .a11y-accordion-item--is-disabled	Represents an accordion section, which contains the header and the panel. When expanded, it contains the additional .a11y-accordion-item--is-expanded class. When the isDisabled attribute is passed in and set to true, the component's element additionally contains the .a11y-accordion-item--is-disabled class.
heading	aria-level="3"	header	.a11y-accordion-header	Represents an accordion item's heading. By default it acts as level 3 heading but it should be changed to whatever makes sense in a page's context.
	type="button"	button	.a11y-accordion-header__trigger	The button element is the only element inside the heading element and functions as the trigger for the accordion panel.
	aria-expanded="true"	button	.a11y-accordion-header__trigger	Set to true when the accordion panel is expanded, otherwise it's set to false.
	aria-controls="ID"	button	.a11y-accordion-header__trigger	Points to the panel ID, which the trigger controls.
	aria-disabled="true"	button	.a11y-accordion-header__trigger	Set to true when the panel it controls is expanded, and set to false when the panel is collapsed. This ARIA attribute is also controlled by the optional isDisabled attribute that can be passed to accordion item components.
region		section	.a11y-accordion-panel-wrapper	This is the accordion panel which the trigger controls. The region role is helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion. Note that you should never style this element.
	aria-labelledby="ID"	section	.a11y-accordion-panel-wrapper	Points to the associated trigger element, which labels this panel region.
	aria-hidden="true"	section	.a11y-accordion-panel-wrapper	Set to true when the panel is collapsed, otherwise it's set to false. This ARIA attribute is important when accordion items are visually hidden due to animation.
		div	.a11y-accordion-panel-content	This is where the contents of the panel are rendered. The panel content can be styled via CSS, however, note that when the animation=true attribute is passed to the accordion-list component, the content's height is calculated via JavaScript and it doesn't take into account the CSS margin property. With that said, only apply padding for styling purposes to the content element.

Contribute

Install

• git clone <repository-url> this repository
• cd ember-a11y-accordion
• npm install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test the addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build