Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tri-State Checkbox Example: Restore Focus Appearance and Update Code Style #1801

Merged
merged 33 commits into from
Oct 12, 2021
Merged

Tri-State Checkbox Example: Restore Focus Appearance and Update Code Style #1801

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
8767f3f
updated javascript to use event.key and coding practices
jongund Mar 4, 2021
cdd98cc
updated checkbox mixed to use improved visual focus styling and impro…
jongund Mar 4, 2021
5656d85
fixed linting bugs
jongund Mar 4, 2021
f4a0627
fixed liniting error
jongund Mar 4, 2021
235db16
fixed liniting error
jongund Mar 4, 2021
c9458b2
fixed linting problems
jongund Mar 4, 2021
815bec0
fixed linting problems
jongund Mar 4, 2021
2e615da
updated examples index file
jongund Mar 4, 2021
f302e2e
updated border styling for focus
jongund Mar 4, 2021
f27c0c0
updated accessibility documentation
jongund Mar 8, 2021
f6cc523
updated focus styling
jongund Apr 6, 2021
adcd065
updated javascript to use event.key and coding practices
jongund Mar 4, 2021
4b950b0
updated checkbox mixed to use improved visual focus styling and impro…
jongund Mar 4, 2021
2f20473
fixed linting bugs
jongund Mar 4, 2021
bb09aac
fixed liniting error
jongund Mar 4, 2021
13f8bde
fixed liniting error
jongund Mar 4, 2021
e8cc4ee
fixed linting problems
jongund Mar 4, 2021
2fd39df
fixed linting problems
jongund Mar 4, 2021
3f64fb0
updated examples index file
jongund Mar 4, 2021
98c3599
updated border styling for focus
jongund Mar 4, 2021
5d0d599
updated accessibility documentation
jongund Mar 8, 2021
c382f33
updated focus styling
jongund Apr 6, 2021
31e457b
updated reference index.html
jongund Jul 28, 2021
c8be41c
Merge branch 'main' into update-tri-state-checkbox-js
jongund Jul 28, 2021
15ab8dc
changed cursor to a pointer on hover
jongund Jul 28, 2021
81b06df
simplified example by updating to use SVG
jongund Jul 28, 2021
75cb05f
updated documentation
jongund Jul 28, 2021
9d4ac5f
Editorial revisions to accessibility features documentation
mcking65 Oct 11, 2021
4b8e2b3
Merge remote-tracking branch 'origin/main' into update-tri-state-chec…
mcking65 Oct 11, 2021
4b99f39
fixed CSS bug and updated accessibility features documentation for SV…
jongund Oct 11, 2021
398fc21
fixed spelling
jongund Oct 11, 2021
515718b
fixed spelling
jongund Oct 11, 2021
ea46deb
updated documentation
jongund Oct 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 0 additions & 151 deletions examples/checkbox/checkbox-2/js/checkboxMixed.js
View file
Open in desktop

This file was deleted.

98 changes: 0 additions & 98 deletions examples/checkbox/checkbox-2/js/controlledCheckbox.js
View file
Open in desktop

This file was deleted.

56 changes: 20 additions & 36 deletions examples/checkbox/checkbox-2/checkbox-2.html → examples/checkbox/checkbox-mixed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../../css/core.css">
<script src="../../js/examples.js"></script>
<script src="../../js/highlight.pack.js"></script>
<script src="../../js/app.js"></script>
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<link href="../css/checkbox.css" rel="stylesheet">
<script src="js/controlledCheckbox.js" type="text/javascript"></script>
<script src="js/checkboxMixed.js" type="text/javascript"></script>
<link href="css/checkbox-mixed.css" rel="stylesheet">
<script src="js/checkbox-mixed.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
Expand All @@ -33,9 +32,6 @@ <h1>Checkbox Example (Mixed-State)</h1>
If the set contains both some checked and unchecked checkboxes, the mixed state checkbox is partially checked.
Activating the tri-state checkbox changes the states of the checkboxes in the set.
</p>
<p>
This example also demonstrates use of <code>fieldset</code> and <code>Legend</code> elements for labeling the checkbox group.
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="../checkbox-1/checkbox-1.html">Checkbox (Two State)</a>: Simple two state checkbox.</li>
Expand All @@ -46,7 +42,7 @@ <h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<fieldset>
<fieldset class="checkbox-mixed">
<legend>Sandwich Condiments</legend>
<div
role="checkbox"
Expand All @@ -64,32 +60,21 @@ <h2 id="ex_label">Example</h2>
<li><label><input type="checkbox" id="cond4">Sprouts</label></li>
</ul>
</fieldset>
<script type="text/javascript">
function checkboxFocus (event) {
event.currentTarget.parentNode.classList.add('focus');
};
function checkboxBlur (event) {
event.currentTarget.parentNode.classList.remove('focus');
};
window.onload = function () {
var i;
var mixed = document.querySelectorAll('[role="checkbox"]');
for (i = 0; i < mixed.length; i++) {
var m = new CheckboxMixed(mixed[i]);
m.init();
}
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (i = 0; i < checkboxes.length; i++) {
var cb = checkboxes[i];
cb.addEventListener('focus', checkboxFocus);
cb.addEventListener('blur', checkboxBlur);
}
};
</script>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>


<section>
<h2>Accessibility Features</h2>
<ul>
<li>To help assistive technology users understand that the mixed checkbox is made of a group of four HTML <code>input[type=<q>checkbox</q>]</code> elements and the ARIA checkbox widget <code>div[role=<q>checkbox</q>]</code>, the checkboxes are wrapped in a <code>fieldset</code> element which is labeled (e.g. Sandwich Condiments) with a <code>legend</code> element.</li>
<li>Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.</li>
<li>To provide a visual indication the labels can also be used to change the state of a checkbox, the background color is changed when the pointer moves over the checkbox or the label.</li>
</ul>
</section>


<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
Expand Down Expand Up @@ -200,9 +185,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul id="css_js_files">
<li>CSS: <a href="../css/checkbox.css" type="text/css">checkbox.css</a></li>
<li>Javascript: <a href="js/checkboxMixed.js" type="text/javascript">checkboxMixed.js</a></li>
<li>Javascript: <a href="js/controlledCheckbox.js" type="text/javascript">controlledCheckbox.js</a></li>
<li>CSS: <a href="css/checkbox-mixed.css" type="text/css">checkbox-mixed.css</a></li>
<li>Javascript: <a href="js/checkbox-mixed.js" type="text/javascript">checkbox-mixed.js</a></li>
</ul>
</section>

Expand Down
Loading