Skip to content

Commit

Permalink
White space consistency
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcking65
mcking65 committed Oct 3, 2021
1 parent d18cc06 commit dc88351
Showing 1 changed file with 160 additions and 160 deletions.
320 changes: 160 additions & 160 deletions examples/switch/switch-button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,45 +38,45 @@ <h1>Switch Example Using HTML Button</h1>
</ul>
-->

<section>
<div class="example-header">
<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">
<div role="group" aria-labelledby="id-group-label">
<h3 id="id-group-label" >Environmental Controls</h3>
<button
type="button"
role="switch"
aria-checked="false">
<span class="label">Living Room Lights</span>
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
<rect class="container" x="1" y="1" width="34" height="18" rx="4" />
<rect class="off" x="4" y="4" width="12" height="12" rx="4" />
<rect class="on" x="20" y="4" width="12" height="12" rx="4" />
</svg>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</button>

<button
type="button"
role="switch"
aria-checked="false">
<span class="label">Outdoor Lights</span>
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
<rect class="container" x="1" y="1" width="34" height="18" rx="4" />
<rect class="off" x="4" y="4" width="12" height="12" rx="4" />
<rect class="on" x="20" y="4" width="12" height="12" rx="4" />
</svg>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</button>
<section>
<div class="example-header">
<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">
<div role="group" aria-labelledby="id-group-label">
<h3 id="id-group-label" >Environmental Controls</h3>
<button
type="button"
role="switch"
aria-checked="false">
<span class="label">Living Room Lights</span>
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
<rect class="container" x="1" y="1" width="34" height="18" rx="4" />
<rect class="off" x="4" y="4" width="12" height="12" rx="4" />
<rect class="on" x="20" y="4" width="12" height="12" rx="4" />
</svg>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</button>

<button
type="button"
role="switch"
aria-checked="false">
<span class="label">Outdoor Lights</span>
<svg xmlns='http://www.w3.org/2000/svg' height='20' width='36'>
<rect class="container" x="1" y="1" width="34" height="18" rx="4" />
<rect class="off" x="4" y="4" width="12" height="12" rx="4" />
<rect class="on" x="20" y="4" width="12" height="12" rx="4" />
</svg>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</button>
</div>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
<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>
Expand Down Expand Up @@ -109,139 +109,139 @@ <h2>Accessibility Features</h2>
</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>
</thead>
<tbody>
<tr data-test-id="key-tab">
<th><kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves keyboard focus to the <code>switch</code>.</li>
</ul>
</td>
</tr>
<tr data-test-id="key-space">
<th><kbd>Space</kbd>, <kbd>Enter</kbd></th>
<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>
<ul>
<li>Toggle switch between on and off.</li>
<li>Moves keyboard focus to the <code>switch</code>.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="switch-role">
<th scope="row"><code>switch</code></th>
<td></td>
<td><code>button</code></td>
<td>Identifies the <code>button</code> element as a <code>switch</code>.</td>
</tr>
<tr data-test-id="switch-aria-checked">
<td></td>
<th scope="row"><code>aria-checked="false"</code></th>
<td><code>button</code></td>
<td>
<tr data-test-id="key-space">
<th><kbd>Space</kbd>, <kbd>Enter</kbd></th>
<td>
<ul>
<li>Indicates the <code>switch</code> is off.</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>Toggle switch between on and off.</li>
</ul>
</td>
</tr>
<tr data-test-id="switch-aria-checked">
<td></td>
<th scope="row"><code>aria-checked="true"</code></th>
<td><code>button</code></td>
<td>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="switch-role">
<th scope="row"><code>switch</code></th>
<td></td>
<td><code>button</code></td>
<td>Identifies the <code>button</code> element as a <code>switch</code>.</td>
</tr>
<tr data-test-id="switch-aria-checked">
<td></td>
<th scope="row"><code>aria-checked="false"</code></th>
<td><code>button</code></td>
<td>
<ul>
<li>Indicates the <code>switch</code> is off.</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>
</ul>
</td>
</tr>
<tr data-test-id="switch-aria-checked">
<td></td>
<th scope="row"><code>aria-checked="true"</code></th>
<td><code>button</code></td>
<td>
<ul>
<li>Indicates the <code>switch</code> is on.</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>
</ul>
</td>
</tr>
<tr data-test-id="aria-hidden">
<td></td>
<th scope="row"><code>aria-hidden="true"</code></th>
<td><code>span.on</code> and <code>span.off</code></td>
<td>
<ul>
<li>Indicates the <code>switch</code> is on.</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>Removes the strings <q>on</q> and <q>off</q> that appear to the right of the switch from the accessible name of the switch.</li>
<li>These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.</li>
</ul>
</td>
</tr>
<tr data-test-id="aria-hidden">
<td></td>
<th scope="row"><code>aria-hidden="true"</code></th>
<td><code>span.on</code> and <code>span.off</code></td>
<td>
<ul>
<li>Removes the strings <q>on</q> and <q>off</q> that appear to the right of the switch from the accessible name of the switch.</li>
<li>These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.</li>
</ul>
</td>
</tr>
<tr data-test-id="h3">
<th scope="row"></th>
<td></td>
<td><code>h3</code></td>
<td>Provides a grouping label for the group of switches.</td>
</tr>
<tr data-test-id="group-role">
<th scope="row"><code>group</code></th>
<td></td>
<td><code>div</code></td>
<td>Identifies the <code>div</code> element as a <code>group</code> container for the switches.</td>
</tr>
<tr data-test-id="group-aria-labelledby">
<th scope="row"></th>
<td><code>aria-labelledby</code></td>
<td><code>div</code></td>
<td>References the <code>h3</code> element to define the accessible name for the group of switches.</td>
</tr>
</tbody>
</table>
</section>
</td>
</tr>
<tr data-test-id="h3">
<th scope="row"></th>
<td></td>
<td><code>h3</code></td>
<td>Provides a grouping label for the group of switches.</td>
</tr>
<tr data-test-id="group-role">
<th scope="row"><code>group</code></th>
<td></td>
<td><code>div</code></td>
<td>Identifies the <code>div</code> element as a <code>group</code> container for the switches.</td>
</tr>
<tr data-test-id="group-aria-labelledby">
<th scope="row"></th>
<td><code>aria-labelledby</code></td>
<td><code>div</code></td>
<td>References the <code>h3</code> element to define the accessible name for the group of switches.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul id="css_js_files">
<li>
CSS:
<a href="css/switch-button.css" type="tex/css">switch-button.css</a>
</li>
<li>
Javascript:
<a href="js/switch-button.js" type="text/javascript">switch-button.js</a>
</li>
</ul>
</section>
<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul id="css_js_files">
<li>
CSS:
<a href="css/switch-button.css" type="tex/css">switch-button.css</a>
</li>
<li>
Javascript:
<a href="js/switch-button.js" type="text/javascript">switch-button.js</a>
</li>
</ul>
</section>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<!--
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
It renders the HTML in the preceding pre element with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<!--
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
It renders the HTML in the preceding pre element with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../#switch">Switch Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
Expand Down

0 comments on commit dc88351

Please sign in to comment.