ember-aria-switch

ARIA Switch button in an Ember addon.

Usage no npm install needed!

<script type="module">
  import emberAriaSwitch from 'https://cdn.skypack.dev/ember-aria-switch';
</script>

README

ember-aria-switch

Build and Deploy Coverage Status semantic-release npm version EmberObserver

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

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