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

yc-shawn / ember-a11y-accordion Goto Github PK