ember-ticketfly-accordion

An ARIA-compliant, easy-to-use accordion system built from composable Ember components -- with optional built-in animation through the Web Animations API.

View

Installing

ember install ember-ticketfly-accordion

Features

• Full WAI-ARIA Compliance for Accessibility Winning.
• A robust callback API for handling DOM events with closure actions.
• Built-in (but configurable) buttery-smooth animation through the Web-Animations API and ember-web-animations-next-polyfill.
• Semantic HTML
  • Tabs are comprised of <button> elements instead of plain <div>s.

Compatibility

This addon makes use of contextual components, and is therefore intended to support versions of Ember >= 2.3.0.

Usage

View the interactive documentation for usage information and tips.

Configuration

To provide ember-ticketfly-accordion with configuration options, define them in a hash on the 'ember-ticketfly-accordion' property of the object exported from your config/environment.js file:

ENV['ember-ticketfly-accordion'] = {
  // options go here
};

Supported Options

Toggling Animation

Animation is enabled by default, and includes a super-lightweight implementation of panel opening and closing built with the Web Animations API — with support back to IE 10 thanks to the thanks to the W3C's web-animations-next polyfill (enabled in Ember by the ember-web-animations-next-polyfill addon).

To disable animation, simply set animatable to false on the root accordion component.

To customize animation, there are two approaches:

1. Overriding the addon's default implementation by passing your own functions to the animatePanelOpen and animatePanelClosed properties on the root accordion component (One or both can be overridden).

2. Configuring aspects of the addon's default implementation by setting addonAnimationSettings properties in config/environment.js like so (available settings are shown with their current defaults):

ENV['ember-ticketfly-accordion'] = {
  useAddonAnimations: true,
  addonAnimationSettings: {
    panelClose: {
      duration: 390
      easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)' // ease-in-out-cubic
    },
    panelOpen: {
      duration: 390
      easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)' // ease-out-cubic
    }
  }
};

Working with ARIA Attributes

As part of its adherence to the WAI-ARIA accordion spec, each part of the component system contains the attributeBindings needed to automatically set proper values for attributes such as aria-expanded() aria-multiselectable(), aria-controls(), etc.

This behavior is built-in for free.

Some ARIA attribute values are arbitrary, however, and where it's appropriate, components will declare bindings for attributes that you can set directly. Currently, this includes:

tf-accordion-panel

• aria-level: Since the panel functions as a "heading", but isn't any of the standard heading elements (<h1>, <h2>, etc), this value should be set on each panel in the accordion according to how you would define its heading level within your document. Since accordions can be used in just about any context, tf-accordion-panel makes no default assumptions about this in advance.

Collaborating

• git clone <repository-url> this repository
• cd ember-ticketfly-accordion
• npm install
• bower install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

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

Building

• ember build

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