Skip to content

Commit

Permalink
Toolbar Example: Complete Example Page
Browse files Browse the repository at this point in the history 
For issue #126, completed the examples/toolbar/toolbar.html page:
* Revise wording of introduction.
* Convert keyboard documentation from list to table format.
* Update roles, states, and properties table to current format.
* Update links to source code.
* Editorial revisions to documentation.
  • Loading branch information
@mcking65
mcking65 committed Nov 26, 2017
1 parent ce24993 commit 25ef3ce
Showing 1 changed file with 121 additions and 46 deletions.
167 changes: 121 additions & 46 deletions examples/toolbar/toolbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,14 @@
<main>
<h1>Toolbar Example</h1>
<p>
<strong>NOTE:</strong> This example is not yet complete.
When it is ready for review, feedback will be welcome in
<a href="https://github.com/w3c/aria-practices/issues/126">issue 126.</a>
<strong>NOTE:</strong> Please provide feedback on this example page in
<a href="https://github.com/w3c/aria-practices/issues/539">issue 539.</a>
</p>
<p>
Following is an example implementation of the
<a href="../../#toolbar">design pattern for toolbar</a>
that demonstrates how a toolbar can group buttons, links, and checkboxes into a single tab stop.
It also illustrates the roving tabindex method for managing focus in a composite component.
that demonstrates how a toolbar can group a set of buttons into a single tab stop.
It also illustrates the roving tabindex method for managing focus within a component.
</p>
<section>
<h2 id="ex_label">Example</h2>
Expand Down Expand Up @@ -71,67 +70,146 @@ <h2 id="ex_label">Example</h2>
<h2>Accessibility Features</h2>
<ol>
<li>
The focus is managed using <a href="../../#kbd_roving_tabindex">roving tabindex</a>.
Because the control that most recently had focus has <code>tabindex=&quot;0&quot;</code>,
focus returns to the control that last had focus when tabbing into the toolbar.
When tabbing into the toolbar, focus returns to the control that last had focus.
Focus movement inside the toolbar is managed using <a href="../../#kbd_roving_tabindex">roving tabindex</a>.
</li>
<li>Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.</li>
<li>The menubutton can be opened with either <kbd>Enter</kbd> or <kbd>Down Arrow</kbd> since <kbd>Down Arrow</kbd> is not needed to navigate a horizontal toolbar.</li>
<li>
Since there is only a single disabled control, to ensure screen reader users are aware of its presence, it is focusable.
For additional guidance, see <a href="../../#kbd_disabled_controls">Focusability of disabled controls.</a>
</li>
<li>Since <kbd>Down Arrow</kbd> is not used to navigate a horizontal toolbar, the menubutton can be opened with <kbd>Down Arrow</kbd> as well as <kbd>Enter</kbd>.</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<ul>
<li>
<kbd>Tab</kbd>: Moves focus into and out of the toolbar.
When focus moves into the toolbar, the first enabled control receives focus.
If the toolbar has previously contained focus, the control that last had focus receives focus.
</li>
<li>
<kbd>Left Arrow</kbd>: Moves focus to the previous control,
wrapping from the first control to the last.
</li>
<li>
<kbd>Right Arrow</kbd>: Moves focus to the next control,
wrapping from the last control to the first.
</li>
<li><kbd>Home</kbd>: Moves focus to the first control.</li>
<li><kbd>End</kbd>: Moves focus to the last control.</li>
</ul>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus into and out of the toolbar.</li>
<li>The first control is focused if the toolbar is receiving focus for the first time after page load.</li>
<li>Otherwise, the most recently focused control receives focus.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Left Arrow</kbd></th>
<td>
<ul>
<li>Moves focus to the previous control.</li>
<li>If the first control has focus, focus moves to the last control.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Right Arrow</kbd></th>
<td>
<ul>
<li>Moves focus to the next control.</li>
<li>If the last control has focus, focus moves to the first control.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Home</kbd></th>
<td>Moves focus to the first control.</td>
</tr>
<tr>
<th><kbd>End</kbd></th>
<td>Moves focus to the last control.</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>Attribute</th>
<th>Applied to Element</th>
<th>Usage</th>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>role=&quot;toolbar&quot;</code></th>
<th scope="row"><code>toolbar</code></th>
<td></td>
<td><code>div</code></td>
<td>
Identifies the toolbar container for assistive technologies.
Because focus is managed with a roving tabindex instead of <code>aria-activedescendant</code>, the toolbar div is not focusable.
<ul>
<li>Identifies the toolbar container.</li>
<li>The toolbar div is not focusable because focus is managed with a <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
</ul>
</td>
</tr>
<tr>
<th>
<td></td>
<th scope="row">
<code>aria-label=&quot;LABEL_STRING&quot;</code>
</th>
<td><code>div</code> with <code>toolbar</code> role</td>
<td><code>div</code></td>
<td>
Since the toolbar does not have a visible label, provides an accessible label that helps screen reader users understand the purpose of the toolbar.
Invisible labels are used when sighted users can derive purpose from visual context.
<ul>
<li>Provides an accessible label for the toolbar.</li>
<li>An invisible label is appropriate when the visual context adequately communicates purpose.</li>
</ul>
</td>
</tr>
<tr>
<th><code>aria-disabled=&quot;true&quot;</code></th>
<th scope="row"><code>button</code></th>
<td></td>
<td><code>div</code></td>
<td>Identifies the element as a button.</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=<q>-1</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>Makes the element focusable but not part of the page <kbd>Tab</kbd> sequence.</li>
<li>Applied to all elements contained in the toolbar except for one that is included in the page <kbd>Tab</kbd> sequence.</li>
<li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=<q>0</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>Makes the element focusable and includes it in the page <kbd>Tab</kbd> sequence.</li>
<li>Set on only one widget contained by the toolbar.</li>
<li>On page load is set on the first widget element contained by the toolbar.</li>
<li>Moves with focus inside the toolbar so the most recently focused element is included in the page <kbd>Tab</kbd> sequence.</li>
<li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-disabled=&quot;true&quot;</code></th>
<td><code>button</code></td>
<td>Informs assistive technologies of the disabled state.</td>
</tr>
Expand All @@ -142,14 +220,11 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/toolbar.css" type="tex/css">toolbar.css</a>
</li>
<li>
Javascript:
<a href="js/toolbar.js" type="text/javascript">toolbar.js</a>
</li>
<li>CSS: <a href="css/toolbar.css" type="tex/css">toolbar.css</a></li>
<li>Javascript: <a href="js/toolbar.js" type="text/javascript">toolbar.js</a></li>
<li>CSS: <a href="css/menuButton.css" type="stylesheet">menuButton.css</a></li>
<li>Javascript: <a href="js/menuButton.js" type="text/javascript">menuButton.js</a></li>
<li>Javascript: <a href="js/main.js" type="text/javascript">main.js</a></li>
</ul>
</section>

Expand Down

0 comments on commit 25ef3ce

Please sign in to comment.