@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.

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

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