ember-aria-accordion
An accessible Accordion component in Ember using WAI-ARIA authoring practices
Last updated 2 months ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-aria-accordion 
SYNC missed versions from official npm registry.

ember-aria-accordion

Build Status Coverage Status npm version dependencies Status devDependencies Status EmberObserver

An Accordion component in Ember based on the WAI-ARIA authoring practices.

Demo

https://rajasegar.github.io/ember-aria-accordion

Usage

  {{#aria-accordion active="Billing address"  as |a|}}
    {{#a.panel title="Personal Information" }}
      <h2>Personal Information</h2>
      <p>This is the accordion content for Personal Information</p>
    {{/a.panel}}
    {{#a.panel title="Billing address" }}
      <h2>Billing Address</h2>
      <p>This is the accordion content for Billing Address</p>
    {{/a.panel}}
    {{#a.panel title="Shipping Address" }}
      <h2>Shipping Address</h2>
      <p>This is the accordion content for Shipping Address</p>
    {{/a.panel}}
  {{/aria-accordion}}

Options

active

To set the active accordion panel

toggle

Allow for each toggle to both open and close individually

multiple

Allow for multiple accordion sections to be expanded at the same time. Assumes toggle option is true, otherwise you would not be able to close any of the accordions

Keyboard Interaction

Enter or Space:

When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.

When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.

Tab:

Moves focus to the next focusable element; all focusable elements in the accordion are included in the page Tab sequence.

Shift + Tab:

Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page Tab sequence.

Down Arrow :

If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.

Up Arrow :

If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.

Home :

When focus is on an accordion header, moves focus to the first accordion header.

End :

When focus is on an accordion header, moves focus to the last accordion header.

Installation

  • ember install ember-aria-accordion

Running

Running Tests

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

See the Contributing guide for details.

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Building

  • ember build

For more information on using ember-cli, visit https://ember-cli.com/.

Current Tags

  • 2.0.3                                ...           latest (2 months ago)

11 Versions

  • 2.0.3                                ...           2 months ago
  • 2.0.2                                ...           2 months ago
  • 2.0.1                                ...           2 months ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |