@19h47/radiogroup
Install
yarn add @19h47/radiogroup
Usage
HTML
<div role="radiogroup">
<div aria-checked="true" tabindex="0" role="radio">
<span>Option 1</span>
<input
id="option_1"
type="radio"
name="option"
value="option_1"
checked
style="display: none;"
/>
</div>
<div aria-checked="false" tabindex="-1" role="radio">
<span>Option 2</span>
<input type="radio" id="option_2" name="option" value="option_2" style="display: none;" />
</div>
</div>
JavaScript
import RadioGroup from '@19h47/radiogroup';
const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);
radiogroup.init();
Keyboard Support
Key |
Function |
Tab |
- Moves keyboard focus to the checked
radio button in a radiogroup. - If no
radio button is checked, focus moves to the first radio button in the group.
|
Down arrow |
- Moves focus to next
radio button in the group. - If focus is on the last
radio button in the group, move focus to the first radio button.
|
Home |
Move to first input. |
Up arrow |
- Moves focus to previous
radio button in the group. - If focus is on the first
radio button in the group, move focus to the last radio button.
|
End |
Move to last input. |
Space |
If the radio button with focus is unchecked, it's state will be changed to checked. |
ARIA Roles, Properties and States
Role |
Property/State |
Usage |
radiogroup |
|
- The
role="radiogroup" attribute identifies the div element as a container for a group of radio buttons. - The descendent
radio buttons are considered part of the group. - The accessible name comes the
aria-labelledby attribute, which points to the element that contains the label text. - The
radiogroup widget does not need a tabindex value, since the ul[role"radiogroup"] element never receives keyboard focus.
|
radio |
aria-checked |
Indicate state of radio:
- Checked (e.g. aria-checked=true)
- Unchecked (e.g. aria-checked=false)
|
aria-labelledby |
|
Used to identify radio group |
Events
Event |
Arguments |
Description |
Radio.activate |
event |
Return an object containing current element and current value |
Radio.deactivate |
event |
Return an object containing current element and current value |
import RadioGroup from '@19h47/radiogroup';
const $element = document.querySelector('[role="radiogroup"]');
const radiogroup = new RadioGroup($element);
radiogroup.init();
radiogroup.radios.forEach(radio => {
radio.on('Radio.activate', ({ element, value }) => {
console.log(element, value);
}
radio.on('Radio.deactivate', ({ element, value }) => {
console.log(element, value);
}
}
Options
Option |
Type |
Default |
description |
tagger |
array |
[] |
|
template |
function |
() => {} |
|
name |
string |
'' |
|
RadioGroup Methods
Method |
Description |
Arguments |
init() |
|
|
destroy() |
|
|
Radio Methods
Method |
Description |
Arguments |
activate() |
Active a given radio |
shouldFocus (optional) Default to true
|
deactivate() |
|
|
destroy() |
|
|
Test
yarn test
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn start
# build for development
$ yarn dev
# build for production
$ yarn prod
References