https://github.com/rajasegar/ember-aria-checkbox

An Ember Checkbox widget addon based on the WAI-ARIA authoring practices
https://github.com/rajasegar/ember-aria-checkbox

a11y accessibility aria checkbox checkbox-component ember-addon

Last synced: 15 days ago
JSON representation

An Ember Checkbox widget addon based on the WAI-ARIA authoring practices

• Host: GitHub
• URL: https://github.com/rajasegar/ember-aria-checkbox
• Owner: rajasegar
• License: mit
• Created: 2017-10-13T07:45:13.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-03T01:29:52.000Z (about 6 years ago)
• Last Synced: 2024-10-13T22:38:54.839Z (about 1 month ago)
• Topics: a11y, accessibility, aria, checkbox, checkbox-component, ember-addon
• Language: JavaScript
• Size: 1.54 MB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-aria-checkbox

[![Build Status](https://travis-ci.org/rajasegar/ember-aria-checkbox.svg?branch=master)](https://travis-ci.org/rajasegar/ember-aria-checkbox) 

[![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-aria-checkbox/badge.svg?branch=master)](https://coveralls.io/github/rajasegar/ember-aria-checkbox?branch=master)

[![npm version](http://img.shields.io/npm/v/ember-aria-checkbox.svg?style=flat)](https://npmjs.org/package/ember-aria-checkbox "View this project on npm")

[![dependencies Status](https://david-dm.org/rajasegar/ember-aria-checkbox/status.svg)](https://david-dm.org/rajasegar/ember-aria-checkbox)

[![devDependencies Status](https://david-dm.org/rajasegar/ember-aria-checkbox/dev-status.svg)](https://david-dm.org/rajasegar/ember-aria-checkbox?type=dev)

[![EmberObserver](http://emberobserver.com/badges/ember-aria-checkbox.svg?branch=master)](http://emberobserver.com/addons/ember-aria-checkbox)

An Ember Checkbox addon widget based on the WAI-ARIA authoring practices.

Fore more info, visit the [page](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox)

### Tutorial

There is also a tutorial available [here](http://hangaroundtheweb.com/2018/02/how-to-create-an-accessible-checkbox-component-in-ember/) to learn how to create this addon from scratch.

### Class Diagram

![Class Diagram](https://raw.githubusercontent.com/rajasegar/ember-aria-checkbox/master/pum/class-diagram.png)

### Component Interface

![Interface Diagram](https://raw.githubusercontent.com/rajasegar/ember-aria-checkbox/master/pum/interface.png)

## Demo

[Demo](http://rajasegar.github.io/ember-aria-checkbox/)

## Installation

* `ember install ember-aria-checkbox`

## Usage

Example Markup:

```hbs

{{#aria-checkbox}}Lettuce{{/aria-checkbox}}

```

Default checked state:

```hbs

{{#aria-checkbox checked=true}}Lettuce{{/aria-checkbox}}

```

You can also pass in any model value to the checked state to reflect the checkbox state.

```js

this.set('isLettuce', true);

```

```hbs

{{#aria-checkbox checked=isLettuce}}Lettuce{{/aria-checkbox}}

```

## Running

* `ember serve`

* Visit your app at [http://localhost:4200](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/](https://ember-cli.com/).