Ember-a11y-accordion NPM

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

<AccordionList
  @animation={{false}}
  @onAfterShow={{this.onAfterShow}}
  @onShow={{this.onAccordionShow}}
  class="my-accordion" as |accordion|>
  <accordion.item @expandOnInit={{true}} @name="item1" as |item|>
    <item.header @ariaLevel="4" class="first-header">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 @ariaLevel="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 @ariaLevel="4">This is disabled</item.header>
    <item.panel>
      <p>User cannot interact with this item.</p>
    </item.panel>
  </accordion.item>
</AccordionList>

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.