@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	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()

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

References

• Radio Group Pattern