@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

• Checkbox Pattern