checkboxes

Checkboxes

What is needed?

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 (either aria-label or aria-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.

Enabling/Disabling

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

Example HTML

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