@19h47/checkbox

Custom checkbox element with accessibility in mind

Usage no npm install needed!

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

README

@19h47/checkbox

Install

yarn add @19h47/checkbox

HTML

<div role="checkbox" aria-checked="false">
    <button type="button" tabindex="-1">Do you want to click me?</button>
    <div style="display: none;">
        <input id="option" name="option" value="false" type="checkbox" />
    </div>
</div>

JavaScript

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

Keyboard Support

Key Function
Tab Moves keyboard focus to the checkbox.
Space Toggles checkbox between checked and unchecked states.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
h3 Provides a grouping label for the group of checkboxes.
group div Identifies the div element as a group container for the checkboxes.
aria-labelledby div The aria-labelledby attribute references the id attribute of the h3 element to define the accessible name for the group of checkboxes.
checkbox div
  • Identifies the div element as a checkbox.
  • The child text content of this div provides the accessible name of the checkbox.
tabindex="0" div Includes the checkbox in the page tab sequence.
aria-checked="false" div Indicates the checkbox is not checked.
aria-checked="true" div Indicates the checkbox is checked.

Methods

Method Description Arguments
activate() Activate the checkbox trigger (optional) Whether or not the event should be trigger. Default to true
deactivate() Deactivate the checkbox trigger (optional) Whether or not the event should be trigger. Default to true
import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelector('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.activate();
checkbox.deactivate();

Event

Activate

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.$input.addEventListener('activate', event => {
    const {
        target: { value },
    } = event;

    console.log(value); // Current activate value
});

Deactivate

import Checkbox from '@19h47/checkbox';

const $checkbox = document.querySelectorAll('[role="checkbox"]');
const checkbox = new Checkbox($checkbox);

checkbox.init();

checkbox.$input.addEventListener('deactivate', event => {
    const {
        target: { value },
    } = event;

    console.log(value); // Current deactivate value
});

CheckboxGroup

The CheckboxGroup is a wrapper class around Checkbox.

When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

<div role="group">
    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Curst
        <div style="display: none;">
            <input id="curst" name="curst" value="Curst" type="checkbox" />
        </div>
    </div>

    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Doppelganger, Greater
        <div style="display: none;">
            <input
                id="doppelganger-greater"
                name="city-of-splendors[]"
                value="Doppelganger, greater"
                type="checkbox"
            />
        </div>
    </div>

    <div tabindex="0" role="checkbox" aria-checked="false">
        <button type="button" tabindex="-1"></button>
        Duhlarkin
        <div style="display: none;">
            <input id="duhlarkin" name="city-of-splendors[]" value="Duhlarkin" type="checkbox" />
        </div>
    </div>
</div>
import { CheckboxGroup } from '@19h47/checkbox';

const $element = document.querySelector('[role="group"]');
const checkboxgroup = new CheckboxGroup($element);

checkbox.init();

Example

An example is located right here, see sources.

References