JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 36
  • Score
    100M100P100Q73650F
  • License MIT

An ember accordion component with accessibility being a first class citizen.

Package Exports

  • ember-a11y-accordion
  • ember-a11y-accordion/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ember-a11y-accordion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ember-a11y-accordion

Build Status

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

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.