Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Copy of 'Part 4: Custom Checkbox Widget with synchronization of ARIA and visual states''
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 30, 2024, 12:08 p.m.
HTML Head
HTML Body
<h1>Part 4: Custom Checkbox Widget with synchronization of ARIA and visual states</h1> <fieldset> <legend> Pizza Toppings </legend> <label> <input type="checkbox" onfocus="checkboxFocus(event)" onblur="checkboxBlur(event)"> Green pepper </label> <label> <input type="checkbox" onfocus="checkboxFocus(event)" onblur="checkboxBlur(event)"> Onion </label> <div class="checkbox" role="checkbox" aria-checked="false" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"> <span aria-hidden="true"></span> Mushrooms </div> <div class="checkbox" role="checkbox" aria-checked="false" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"> <span aria-hidden="true"></span> Spinach </div> </fieldset>
CSS
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, [role="checkbox"] { padding: 4px; width: 10em; display: block; margin-top: 0.25em; margin-bottom: 0.25em; } label input { margin-right: 0.5em; } [role="checkbox"] span { padding: 0.25em; } [role="checkbox"] span:before { content: '✗'; color: red; padding-right: 0.125em; } [role="checkbox"][aria-checked="true"] span:before { content: '✓'; color: green; padding-right: 0.190em; } label.focus, [role="checkbox"]:focus { padding: 2px; border: 2px solid #999; background-color: #DDE; } label:hover, [role="checkbox"]:hover { background-color: #CCD; }
JavaScript
function toggleCheckbox(node) { if (node.getAttribute('aria-checked') === 'true') { node.setAttribute('aria-checked', 'false'); } else { node.setAttribute('aria-checked', 'true'); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } function keydownCheckbox(event) { var cb = event.currentTarget; if (event.key === ' ') { toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } } function checkboxFocus(event) { event.currentTarget.parentElement.classList.add('focus'); } function checkboxBlur(event) { event.currentTarget.parentElement.classList.remove('focus'); }