rajasegar / ember-aria-switch

Ember ARIA switch button with accessibility

ember-aria-switch

ARIA Switch button in an Ember addon based on the WAI-ARIA specifications.

Demo

Demo

Installation

• ember install ember-aria-switch

Usage

Example Markup:

<AriaSwitch @label="My Label" @checked={{true}} />

With external label

<p id="ex_label">
  Item 2
</p>
<AriaSwitch @ariaLabelledBy="ex_label" />

With disabled state

<AriaSwitch @label="My Label" @disabled={{true}} />

Without aria-label

<AriaSwitch />

With custom on/off labels

<AriaSwitch @onLabel="Yes" @offLabel="No" />

With toggle callback

<AriaSwitch @onToggle={{this.toggleCallback}} />

And your toggleCallback can be defined such as:

export default class IndexController extends Controller{
    @action
    toggleCallback(toggleValue) {
      let val = toggleValue ? "ON" : "OFF";
      alert(`ARIA Switch: You turned me ${val}!`);
    }
}

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/.