Skip to content

19h47/19h47-radiogroup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

@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