https://github.com/schne324/radiogroupify

adding roles/keyboard functionality to a "group" of custom radio buttons
https://github.com/schne324/radiogroupify

Last synced: about 2 months ago
JSON representation

adding roles/keyboard functionality to a "group" of custom radio buttons

• Host: GitHub
• URL: https://github.com/schne324/radiogroupify
• Owner: schne324
• Created: 2016-08-15T14:39:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-17T03:36:30.000Z (over 8 years ago)
• Last Synced: 2024-11-11T05:12:45.411Z (about 2 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# radioGroupify

Converts custom radio group to accessible, keyboard friendly radio group.

## Installation

```bash

$ bower install radio-groupify

```

## Options

* `radioSelector`: _{String}_ The selector of the child elements which represent the custom radio button.

	* defaults to `'.radio-item'`

* `circular`: _{Boolean}_ Whether or not to make the keyboard logic circular (traverse from last to first and first to last when arrowing through radios).

  * defaults to `true`

* `checkedClass`: _{String}_ The class to be added to the "checked" (selected) radio button.

  * defaults to `null` (meaning no class will be added by default)

* `label`: _{Function|String}_

  * `{String}`: A string that will be added as the `aria-label` of the radiogroup OR a function that returns the label element.

  * `{Function}`: A function that returns the label element. `radioGroupify` will associate that element with the radiogroup via `aria-labelledby`.

  * defaults to `null` (meaning no accessible label will be added by default)

* `defaultChecked`: _{Function|Boolean}_

  * `{Function}`: A function that receives the radio elements (the collection based on `options.radioSelector`) which expects a single element to be returned (the item to be rendered as the initially checked radio button).

  * `{Boolean}`:

    * `true` will treat the first element in the radio collection as the initially checked radio button.

    * `false` will NOT have a initially selected element

  * defaults to `false` (meaning there will NOT be an initially checked radio button)

## Example usage

Given the following html...

```html

Quack



  
Foo

  
Bar

  
Baz



```


```js

jQuery('.radio-container').radioGroupify({

  checkedClass: 'radio-item-checked',

  initialSelected: true, // "Foo" will be initially checked

  label: function ($container, $items) {

    return jQuery('h2.group-label');

  }

});

```

## Running tests

```bash

$ gulp test

```

## Building locally

```bash

$ npm install

$ gulp

```