@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