@19h47/radiogroup NPM

@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 Name	Description
Radio.activate	Return an event object containing detail object (current element and current value)
Radio.deactivate	Return an event object containing detail object (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.el.addEventListener('Radio.activate', ({ detail }) => {
		console.log(detail.element, detail.value);
	});

	radio.el.addEventListener('Radio.deactivate', ({ detail }) => {
		console.log(detail.element, detail.value);
	});
});

Options

Option	Type	Default
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()`

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn serve

# build for development
$ yarn dev

# build for production
$ yarn build