apex4x
Version:
The Comprehensive ARIA Development Suite
307 lines (272 loc) • 10.3 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ARIA Checkboxes - Apex 4X Technical Style Guide</title>
<meta name="description" content="Scalable ARIA Components" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="../_common/_doc_files/css/global.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../_common/_doc_files/css/components-style.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../_common/_doc_files/prism.css"
/>
<script src="../_common/_doc_files/prism.js"></script>
</head>
<body>
<div class="outer-wrapper">
<header class="header">
<div class="logo">
<a href="https://whatsock.com">
<img
alt="WhatSock : Changing the world one step at a time"
src="/Templates/_common/_doc_files/img/whatsock.svg"
/>
</a>
</div>
</header>
<div class="wrapper">
<main id="main" class="main">
<h1><strong>ARIA Checkboxes</strong></h1>
<nav class="navigation--parent">
<p>
<a href="/Tutorials/Beginner-Introduction.htm"
>Beginner Tutorial</a
>
</p>
<h2 class="parent--page">Template Examples</h2>
<ul>
<li><a href="../index.htm">Back to Components</a></li>
<li><a href="Standard/index.htm">Standard</a></li>
</ul>
</nav>
<section class="section--instructions">
<h2>Expected behaviors</h2>
<p>
The checkbox should be focusable using the keyboard, and toggle
its checkable state when pressing the Spacebar or Enter key.
</p>
<p>
The 4X ARIA Checkbox module automatically configures all required
ARIA attributes and focus handling, in strict accordance with the
ARIA specification.
</p>
<p>
The following attributes are handled automatically by the Checkbox
module:
</p>
<ul>
<li>role=checkbox</li>
<li>aria-checked</li>
<li>tabindex</li>
</ul>
<p>Available attributes for checkbox elements:</p>
<ul>
<li>
data-check : May be set to "false", "true", or "mixed" to set
the current state of a checkable control when rendered.
</li>
<li>
aria-disabled : When set to "true" on the triggering element,
will automatically disable associated functionality.
</li>
</ul>
<p>
Note: When dynamically disabling a triggering element, the 4X
setDisabled() function should be used to set the disabled state of
the triggering element. This will ensure proper background
mapping.
</p>
<div>
<pre><code class="language-javascript">
$A.setDisabled(triggeringElement, boolean);
</code></pre>
</div>
<h2>HTML syntax</h2>
<h3>Standard Unchecked</h3>
<div>
<pre><code class="language-markup"><div data-check >
Markup with checkbox name
<input hidden type="checkbox" name="OptionalBoundCheckbox" />
</div></code></pre>
</div>
<h3>Standard Checked</h3>
<div>
<pre><code class="language-markup"><div data-check="true" >
Markup with checkbox name
<input checked hidden type="checkbox" name="OptionalBoundCheckbox" />
</div></code></pre>
</div>
<h3>Standard Partially-Checked</h3>
<div>
<pre><code class="language-markup"><div data-check="mixed" >
Markup with checkbox name
</div></code></pre>
</div>
<p>
IMPORTANT: The focusable active element must not include any other
exposed active elements, otherwise these will not be accessible to
non-sighted screen reader users.
</p>
<p>
Whenever a hidden checkbox is embedded within the simulated
control, it will automatically reflect the toggled state of the
parent element. This makes it possible to implement custom toggle
controls that can be submitted in the same manner as native form
controls. This, however, is optional, and may be removed without
having any negative impact on the functionality of the simulated
toggle control.
</p>
<h2>JavaScript syntax</h2>
<div>
<pre><code class="language-javascript">$A.setCheckbox( domNodeOrCSSSelectorForTriggeringElement , {
// Configure functionality key / value mappings
});</code></pre>
</div>
<ul>
<li>Module file: Button.js</li>
<li>Requires: AccName.js, RovingTabIndex.js.</li>
<li>Recommended: Velocity.js, VelocityUI.js.</li>
</ul>
<h2>Parameters</h2>
<ol>
<li>
A DOM element or CSS selector to specify the triggering element
</li>
<li>A configuration map to customize behaviors and options</li>
</ol>
<h3 tabindex="-1" id="configure">Configuration</h3>
<div>
<pre><code class="language-javascript">{
// Set an explicit name for the checkbox.
// If undefined, the accessible name will default to the text content within the checkbox element.
label: "My informative checkbox label",
// Specify if the checkbox is required.
// If a native checkbox element is specified, this property will automatically be set to match the checkbox element's 'required' property.
required: false,
// Specify if the checkbox is disabled.
// If a native checkbox element is specified, this property will automatically be set to match the checkbox element's 'disabled' property.
disabled: false,
// Set the class to be applied when a checkbox is checked.
// If undefined, "checked" will be set by default.
toggleClassName: "checked",
// Set the class to be applied when a checkbox is partially-checked.
// If undefined, "partially-checked" will be set by default.
partialClassName: "partially-checked",
// Set a custom event handler to process every time a checkbox is activated.
onActivate: function(ev, triggerNode, boundCheckbox, checked, set) {
// 'checked' reflects the current attribute value for the checkable item, and is always a number if applicable.
// if 0, the checked state is "false".
// if 1, the checked state is "true".
// if 2, the checked state is "mixed".
// The 'set' argument is a function that will set the checkable item to a new state.
// The new value must be a string consisting of "false", "true", or "mixed".
if (checked) {
set("false");
} else {
set("true");
}
ev.preventDefault();
}
}</code></pre>
</div>
</section>
</main>
</div>
<footer class="footer">
<div class="flex-container-row">
<div class="flex-item">
<h2>License</h2>
<p>
Apex 4X including all template design patterns is distributed
under the terms of the Open Source Initiative OSI - MIT License,
and may be freely used for any purpose within any web technology.
</p>
</div>
<div class="flex-item">
<h2>Resources</h2>
<ul>
<li>
<a target="ext" href="https://github.com/WhatSock/apex"
>Apex 4X on GitHub</a
>
</li>
<li>
<a
target="ext"
href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
>Visual ARIA Bookmarklet</a
>
</li>
<li>
<a
target="ext"
href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
>Visual ARIA Chrome Extension</a
>
</li>
<li>
<a
target="ext"
href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
>Visual ARIA Firefox Extension</a
>
</li>
<li>
<a target="ext" href="https://github.com/AccDC/visual-aria"
>Visual ARIA on GitHub</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/matrices/"
>ARIA Role Conformance Matrices</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/"
>Accessibility Tree Training Guide</a
>
</li>
</ul>
</div>
<div class="flex-item">
<h2>Acknowledgements</h2>
<ul class="list--horizontal">
<li>
Author and developer:
<a target="ext" href="https://www.linkedin.com/in/bgaraventa"
>Bryan Garaventa</a
>
</li>
<li>
Website designer:
<a target="ext" href="https://gericci.me/">Angela Ricci</a>
</li>
<li>
Style and markup editor:
<a
target="ext"
href="https://www.linkedin.com/in/laurence-lewis-77520365/"
>Laurence Lewis</a
>
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
</html>