@19h47/radiogroup

Custom radios elements with accessibility in mind

Usage no npm install needed!

<script type="module">
  import 19h47Radiogroup from 'https://cdn.skypack.dev/@19h47/radiogroup';
</script>

README

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