checkboxes
The pattern library's checkboxes are not native checkbox elements (<input type="checkbox" />
). They are actually custom checkboxes utilizing the "checkbox" role. There are a number of requirements to use the pattern library custom checkboxes. Each checkbox must include the following:
- A wrapper element with the class
"dqpl-checkbox-wrap"
- An child element with the class
"dqpl-checkbox"
which must also include the following attributes:role="checkbox"
tabindex="0"
- an accessible name (
aria-label
,aria-labelledby
etc..)
- A child labelling element with class
"dqpl-label"
or"dqpl-label-inline"
. You must ensure that this label is properly associated with the"dqpl-checkbox"
element (eitheraria-label
oraria-labelledby
).
NOTE: To make the custom checkboxes behave identically to their native counterparts, the javascript will attach a click listener to the label element which will focus the checkbox control. This is done by simply having that "dqpl-label"
element within the same "dqpl-checkbox-wrap"
element as the "dqpl-checkbox"
. If for some reason the implementation needs to follow a different convention, you can use the "data-label-id"
attribute to tell the script what your label is.
Triggering the "dqpl:checkbox:disable"
and "dqpl:checkbox:enable"
events on the checkbox elements will enable or disable the checkboxes and their labels...
var myCheckbox = document.querySelector('.dqpl-checkbox');
var e = new Event('dqpl:checkbox:disable');
myCheckbox.dispatchEvent(e); // disable the checkbox
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" aria-labelledby="foo"></div>
<div class="dqpl-label" id="foo">Foo</div>
</div>
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" data-label-id="bar"></div>
<div class="dqpl-label" id="bar">Bar</div>
</div>
<div class="dqpl-checkbox-wrap dqpl-flexr">
<div class="dqpl-checkbox" role="checkbox" tabindex="0" data-label-id="baz" aria-disabled="true"></div>
<div class="dqpl-label" id="baz">Baz (disabled)</div>
</div>