Skip to content

Commit

Permalink
Editorial, Template, and Functional Updates to Example of Tabs With A…
Browse files Browse the repository at this point in the history 
…utomatic Activation

modified examples/tabs/tabs-1/tabs.html:
1. Move script elements to head so HTML source will display.
2. Editorial revisions to introduction.
3. Added link to section that provides guidance on selection follows focus.
4. Per example template, Removed region around example and replaced with screen reader sepearator elements.
5. Added `aria-label="Entertainment"` to the tablist.
6. Added `tabindex="0"` to the tabpanel elements
7. Editorial revisions to the keyboard table.
8. Remove delete from keyboard table since it is not supported.
9. In roles, states and properties table:
    * added scope attribute and TH elements per template.
    * Added row for aria-label on tablist
    * Added rows for aria-selected true and false on tab
    * Added row for aria-labelledby on tabpanel
    * Added row for tabindex on tabpanel.

10. Per template, Added screen reader separators around HTML source display and removed role region from the source code display div.
11. Added link to review issue #278.
  • Loading branch information
@mcking65
mcking65 committed Feb 9, 2017
1 parent 32e406c commit 4850426
Showing 1 changed file with 186 additions and 57 deletions.
243 changes: 186 additions & 57 deletions examples/tabs/tabs-1/tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,57 @@
<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../../css/core.css" rel="stylesheet">
<link href="../../css/table.css" rel="stylesheet">
<script src="../../js/examples.js" type="text/javascript"></script>

<!-- js and css for this example. -->
<link href="css/tabs.css" rel="stylesheet">


</head>
<body>
<main>
<h1>Tabs With Automatic Activation</h1>
<p>
Provide feedback on updates to this page in
<a href="https://github.com/w3c/aria-practices/issues/278">issue 278.</a>
</p>
<p>
This example section demonstrates a tabs widget that implements the <a href="../../../#tabpanel">design pattern for tabs</a>.
In this example panels are automatically activated when its tab receives focus.
In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus.
Tabs should only be automatically activated in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM.
For additional guidance, see <a href="../../../#kbd_selection_follows_focus">Deciding When to Make Selection Automatically Follow Focus</a>.
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="../tabs-2/tabs.html">Tabs With Manual Activation</a>: A tabs widget where users activate a tab and display its panel by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.</li>
</ul>

<section>
<h2 id="ex_label">Example</h2>
<div aria-labelledby="ex_label" role="region">
<div id="ex1">
<div class="tabs">
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
<button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
<button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<div class="tabs">
<div role="tablist" aria-label="Entertainment">
<button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
<button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
<button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
</div>

<div role="tabpanel" id="nils-tab" aria-labelledby="nils">
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
<p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>

<div role="tabpanel" id="helios-tab" aria-labelledby="helios" hidden>
<p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
</div>
<div tabindex="0" role="tabpanel" id="helios-tab" aria-labelledby="helios" hidden>
<p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
</div>

<div role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
<p>Fear of complicated buildings:</p>
<p>A complex complex complex.</p>
</div>
<div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
<p>Fear of complicated buildings:</p>
<p>A complex complex complex.</p>
</div>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<section hidden>
Expand All @@ -74,82 +83,207 @@ <h2 id="kbd_label">Keyboard Support</h2>
<tbody>
<tr>
<th><kbd>tab</kbd></th>
<td>Moves focus to the active tab or first focusable in the tab panel.</td>
<td>
<ul>
<li>When the tab list is receiving focus, places focus on the active <code>tab</code> element .</li>
<li>When the tab list contains the focus, moves focus to the <code>tabpanel</code> element.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>left arrow</kbd></th>
<td>Moves focus to the previous tab.</td>
<th><kbd>right arrow</kbd></th>
<td>
<ul>
<li>Moves focus to the next tab.</li>
<li>If focus is on the last tab, moves focus to the first tab.</li>
<li>Activates the newly focused tab.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>right arrow</kbd></th>
<td>Moves focus to the next tab.</td>
<th><kbd>left arrow</kbd></th>
<td>
<ul>
<li>Moves focus to the previous tab.</li>
<li>If focus is on the first tab, moves focus to the last tab.</li>
<li>Activates the newly focused tab.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>home</kbd></th>
<td>Moves focus to the first tab.</td>
<td>Moves focus to the first tab and activates it.</td>
</tr>
<tr>
<th><kbd>end</kbd></th>
<td>Moves focus to the last tab.</td>
</tr>
<tr>
<th><kbd>delete</kbd></th>
<td>If deletion on the selected tab is allowed this will that tab element and its associated tab panel.</td>
<td>Moves focus to the last tab and activates it.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">ARIA Roles, Properties, and States</h2>
<!-- Update this table to describe the roles, properties, and states implemented in this example. -->
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<thead>
<tr>
<th>Role</th>
<th>Property/State</th>
<th>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>
<td>tablist</td>
<th scope="row">
<code>tablist</code>
</th>
<td></td>
<td>
<code>div</code>
</td>
<td>Indicates that the element serves as a container for a set of tabs.</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-label=<q>Entertainment</q></code>
</th>
<td>
<code>div</code>
</td>
<td>Provides a label that describes the purpose of the set of tabs.</td>
</tr>
<tr>
<th scope="row">
<code>tab</code>
</th>
<td></td>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>Indicates the element serves as a tab control.</li>
<li>
When focused, is automatically activated, causing its associated <code>tabpanel</code>
to be displayed.
</li>
<li>
Provides a title for its associated <code>tabpanel</code>.
</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-selected=<q>true</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>Serves as the container for the set of tabs.</li>
<li>Indicates the tab control is activated and its associated panel is displayed.</li>
<li>Set when a tab receives focus.</li>
</ul>
</td>
</tr>
<tr>
<td>tab</td>
<td></td>
<th scope="row">
<code>aria-selected=<q>false</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>
Indicates the tab control is not active and its associated panel is <strong>NOT</strong>
displayed.
</li>
<li>Set for all tab elements in the tab set except the focused tab.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>tabindex=<q>-1</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
<ul>
<li>Contains title for tab panel, activates tab panel when activated.</li>
<li>Removes the element from the page <kbd>Tab</kbd> sequence.</li>
<li>Set when a tab is not selected so that only the selected tab is in the page <kbd>Tab</kbd> sequence.</li>
<li>Since an HTML <code>button</code> element is used for the tab, it is not necessary to set <code>tabindex=<q>0</q></code> on the selected (active) tab element.</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>tabpanel</td>
<td></td>
<th scope="row">
<code>aria-controls=<q>IDREF</q></code>
</th>
<td>
<code>button</code>
</td>
<td>
Refers to the <code>tabpanel</code> element associated with the tab.
</td>
</tr>
<tr>
<th scope="row">
<code>tabpanel</code>
</th>
<td></td>
<td>
<code>div</code>
</td>
<td>
<ul>
<li>Indicates the element serves as a container for tab panel content.</li>
<li>
Is hidden unless its associated <code>tab</code> control is activated.
</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row">
<code>aria-labelledby=<q>IDREF</q></code>
</th>
<td>
<code>div</code>
</td>
<td>
<ul>
<li>Contains the tab’s associated content.</li>
<li>
Refers to the <code>tab</code> element that controls the panel.
</li>
<li>Provides an accessible name for the tab panel.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<td>aria-controls</td>
<td>element with <code>role</code> of <code>tab</code></td>
<th scope="row">
<code>tabindex=<q>0</q></code>
</th>
<td>
<code>div</code>
</td>
<td>
<ul>
<li></li>
<li>Puts the tabpanel in the page <kbd>Tab</kbd> sequence.</li>
<li>Facilitates movement to panel content for assistive technology users.</li>
<li>Especially helpful if there are panels that do not contain a focusable element.</li>
</ul>
</td>
</tr>
Expand All @@ -159,7 +293,6 @@ <h2 id="rps_label">ARIA Roles, Properties, and States</h2>

<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>
<li>CSS: <a href="css/tabs.css" type="tex/css">tabs.css</a></li>
<li>Javascript: <a href="js/tabs.js" type="text/javascript">tabs.js</a></li>
Expand All @@ -168,27 +301,23 @@ <h2>Javascript and CSS Source Code</h2>

<section>
<h2 id="sc1_label">HTML Source Code</h2>
<div id="sc1" aria-labelledby="sc1_label" role="region"></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 div with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
-->
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
<div id="sc1"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>

</main>

<nav>
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
<a href="../../../#tabpanel">Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>


<script src="../js/examples.js" type="text/javascript"></script>

<script src="js/tabs.js" type="text/javascript"></script>

</body>
</html>

0 comments on commit 4850426

Please sign in to comment.