@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