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

Jump to bottom

Checkbox Example: Restore focus styling, add accessibility features documentation, and implement current code guide practices #1802

Merged
merged 24 commits into from
Oct 17, 2021
Merged

Checkbox Example: Restore focus styling, add accessibility features documentation, and implement current code guide practices #1802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
5f9fbf4
updated JS to current coding practices and restored visual focus styl…
jongund Mar 4, 2021
9fefc77
updated border styling for focus
jongund Mar 4, 2021
76a6472
updated accessibility documentation
jongund Mar 8, 2021
7aa2b88
updated JS to current coding practices and restored visual focus styl…
jongund Mar 4, 2021
08226df
updated border styling for focus
jongund Mar 4, 2021
8bacc48
updated accessibility documentation
jongund Mar 8, 2021
a0e3a91
updated index file
jongund Jul 28, 2021
cd636f9
Merge branch 'main' into update-checkbox
jongund Jul 28, 2021
782e248
added pointer cursor
jongund Jul 28, 2021
384d868
updated hover styling and documentation
jongund Jul 28, 2021
4372458
updated reference table
jongund Sep 21, 2021
b05cace
Merge branch 'main' of github.com:w3c/aria-practices
jongund Sep 28, 2021
6044a71
Merge branch 'main' of github.com:w3c/aria-practices
jongund Oct 5, 2021
18d05a5
Merge branch 'main' into update-checkbox
jongund Oct 11, 2021
3749562
updated example to use SVG to make focus and hover styling simipler a…
jongund Oct 11, 2021
2f51958
updated regression test to remove CSS checking for state
jongund Oct 11, 2021
84959d9
fixed spelling mistake
jongund Oct 11, 2021
4809fa1
fixed spelling
jongund Oct 11, 2021
11d016a
updated accessibility features documentation
jongund Oct 11, 2021
79f7b48
updated documentation
jongund Oct 11, 2021
83abe6f
Update with latest from main
mcking65 Oct 17, 2021
6bfd2ab
Editorial revisions to accessibility features
mcking65 Oct 17, 2021
75a779a
Editorial revisions to state abnd props documentation
mcking65 Oct 17, 2021
99d0a9b
white space consistency
mcking65 Oct 17, 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
80 changes: 0 additions & 80 deletions examples/checkbox/checkbox-1/js/checkbox.js
View file
Open in desktop

This file was deleted.

158 changes: 82 additions & 76 deletions examples/checkbox/checkbox-1/checkbox-1.html → examples/checkbox/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@

<!-- 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">
<link href="css/checkbox.css" rel="stylesheet">
<script src="js/checkbox.js" type="text/javascript"></script>
</head>
<body>
Expand Down Expand Up @@ -42,53 +42,63 @@ <h2 id="ex_label">Example</h2>
<h3 id="id-group-label">Sandwich Condiments</h3>
<div role="group" aria-labelledby="id-group-label">
<ul class="checkboxes">
<li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
<li><div role="checkbox" aria-checked="true" tabindex= "0">Tomato</div></li>
<li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
<li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Lettuce</div></li>
<li><div role="checkbox" aria-checked="true" tabindex="0">Tomato</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Mustard</div></li>
<li><div role="checkbox" aria-checked="false" tabindex="0">Sprouts</div></li>
</ul>
</div>

<script type="text/javascript">
window.onload = function () {

var checkboxes = document.querySelectorAll('[role="checkbox"]');

for (var i = 0; i < checkboxes.length; i++) {
var cb = new Checkbox(checkboxes[i]);
cb.init();
}

};
</script>

</div>

<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>

</section>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr data-test-id="key-tab">
<th><kbd>Tab</kbd></th>
<td>Moves keyboard focus to the <code>checkbox</code>.</td>
<section>
<h2>Accessibility Features</h2>
<ul>
<li>To help assistive technology users understand that each checkbox is part of a set of related checkboxes named <q>Sandwich Condiments</q>, the checkboxes are wrapped in a <code>group</code> labeled by the <code>h3</code> heading element.</li>
<li>To enable assistive technology users to perceive the set of checkboxes as a list of four items, each <code>div</code> element that serves as a checkbox is contained within a <code>li</code> element contained by a <code>ul</code> element.</li>
<li>To make it easier to perceive that clicking either the label or checkbox will activate the checkbox, when a pointer hovers over either the checkbox or label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
<li>
Because transparent borders are visible on some systems when operating system high contrast settings are enabled, transparency cannot be used to create a visual difference between the element that is focused and 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 ensure the borders of the inline SVG checkbox graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
For example, the color of the checkbox borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentColor</code> value for the <code>stroke</code> property of the <code>rect</code> and <code>polyline</code> elements used to draw the checkbox.
To make the background of the checkbox graphics match the high contrast background color, the <code>fill-opacity</code> attribute of the <code>rect</code> element is set to zero.
If specific colors were instead used to specify the <code>stroke</code> and <code>fill</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the checkbox and the background or even make the checkbox invisible if the color matched the high contrast mode background.<br>
Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentColor</code> value to be updated in high contrast mode.
Some browsers do not use <code>auto</code> for the default value.
</li>
</ul>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
<tr data-test-id="key-space">
<th><kbd>Space</kbd></th>
<td>Toggles checkbox between checked and unchecked states.</td>
</tr>
</tbody>
</table>
</section>
</thead>
<tbody>
<tr data-test-id="key-tab">
<th><kbd>Tab</kbd></th>
<td>Moves keyboard focus to the <code>checkbox</code>.</td>
</tr>
<tr data-test-id="key-space">
<th><kbd>Space</kbd></th>
<td>Toggles checkbox between checked and unchecked states.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
Expand Down Expand Up @@ -126,11 +136,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<th scope="row"></th>
<td><code>aria-labelledby</code></td>
<td><code>div</code></td>
<td>
<ul>
<li>The <code>aria-labelledby</code> attribute references the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of checkboxes.</li>
</ul>
</td>
<td>References the <code>id</code> attribute of the <code>h3</code> element to define the accessible name for the group of checkboxes.</td>
</tr>
<tr data-test-id="checkbox-role">
<th scope="row"><code>checkbox</code></th>
Expand All @@ -145,30 +151,30 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</tr>
<tr data-test-id="checkbox-tabindex">
<td></td>
<th scope="row"><code>tabindex=&quot;0&quot;</code></th>
<th scope="row"><code>tabindex="0"</code></th>
<td><code>div</code></td>
<td>Includes the checkbox in the page tab sequence.</td>
</tr>
<tr data-test-id="checkbox-aria-checked">
<td></td>
<th scope="row"><code>aria-checked=&quot;false&quot;</code></th>
<th scope="row"><code>aria-checked="false"</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Indicates the <code>checkbox</code> is <strong>not</strong> checked.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>To support operating system and browser high contrast settings, the CSS <code>::before</code> pseudo element and <code>content</code> property are used to generate the visual indicators of the checkbox state.</li>
</ul>
</td>
</tr>
<tr data-test-id="checkbox-aria-checked">
<td></td>
<th scope="row"><code>aria-checked=&quot;true&quot;</code></th>
<th scope="row"><code>aria-checked="true"</code></th>
<td><code>div</code></td>
<td>
<ul>
<li>Indicates the <code>checkbox</code> is checked.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>CSS attribute selectors (e.g. <code>[aria-checked="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
<li>To support operating system and browser high contrast settings, the CSS <code>::before</code> pseudo element and <code>content</code> property are used to generate the visual indicators of the checkbox state.</li>
</ul>
</td>
Expand All @@ -177,30 +183,30 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</table>
</section>

<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/checkbox.js" type="text/javascript">checkbox.js</a>
</li>
</ul>
</section>

<section>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
<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/checkbox.js" type="text/javascript">checkbox.js</a>
</li>
</ul>
</section>

<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
<section>
<h2>HTML Source Code</h2>
<h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
<div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
<pre><code id="sc1"></code></pre>
<div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>

<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../../#checkbox">Checkbox Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
Expand Down
Loading