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.

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

See the Contributing guide for details.

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

License

This project is licensed under the MIT License.

vasilionjea / ember-a11y-accordion Goto Github PK