Skip to content

Commit

Permalink
Button Examples: Editorial Revisions for Issue #189
Browse files Browse the repository at this point in the history 
Modified examples/button/button.html:
1. Add link to review issue 316.
2. Fix href of links to button design pattern.
3. Revise wording of introduction.
4. Add links to menubutton examples.
5. Add elements from template that provide separators that mark start and end of example for screen reader users.
6. Remove two H2 headings for the buttons and replace with a single H2 for the example section.
7. Editorial revisions to keyboard table.
8. Editorial revisions to states and properties table.
  • Loading branch information
@mcking65
mcking65 committed Mar 14, 2017
1 parent 5dc7b50 commit 4cc308d
Showing 1 changed file with 40 additions and 57 deletions.
97 changes: 40 additions & 57 deletions examples/button/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- 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/examples.js" type="text/javascript"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

Expand Down Expand Up @@ -46,33 +46,34 @@
</svg>
<main>
<h1>Button Examples</h1>
<p>
The following examples of the
<a href="../../#h-button">button design pattern</a>
demonstrate both command and toggle buttons.
</p>


<p>
<strong>NOTE:</strong> This example has recently been updated.
Please provide feedback in
<a href="https://github.com/w3c/aria-practices/issues/316">issue 316.</a>
</p>
<p>
The following command and toggle button examples demonstrate the
<a href="../../#button">button design pattern.</a>
</p>
<p>Similar examples include:</p>
<ul>
<li><a href="../menu-button/menu-button-1/menu-button-1.html">Action Menu Button</a>: Demonstrates using <code>aria-haspopup</code> to create a menu button for a button that opens a menu of actions.</li>
<li><a href="../menu-button/menu-button-2/menu-button-2.html">Navigation Menu Button</a>: Demonstrates using <code>aria-haspopup</code> to create a menu button for a button that opens a menu of items that act as links.</li>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="example">

<h3>Action Button</h3>
<p>Print button uses a <code>div</code> element.</p>
<p>This <q>Print</q> action button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>

<h3>Toggle Button</h3>
<p>Mute button uses a <code>a</code> element.</p>
<div>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute <svg aria-hidden="true"><use xlink:href="#icon-sound"></use></svg></a>
</div>

<p>This <q>Mute</q> toggle button uses a <code>a</code> element.</p>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute <svg aria-hidden="true"><use xlink:href="#icon-sound"></use></svg></a>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>


<section>
<h2 id="kbd_label">Keyboard Support</h2>

<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
Expand All @@ -82,16 +83,19 @@ <h2 id="kbd_label">Keyboard Support</h2>
</thead>
<tbody>
<tr>
<th><kbd>Space or enter</kbd></th>
<td>Activate or toggle state of button</td>
<th><kbd>Enter</kbd></th>
<td>Activates the button.</td>
</tr>
<tr>
<th><kbd>Space</kbd></th>
<td>Activates the button.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">ARIA Roles, Properties and States</h2>

<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
Expand All @@ -110,11 +114,8 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
</td>
<td>
<ul>
<li><code>role=&quot;button&quot;</code> identifies the element as a <code>button</code> widget.</li>
<li>
Accessible name for the button is defined by the text content of the
element.
</li>
<li>Identifies the element as a <code>button</code> widget.</li>
<li> Accessible name for the button is defined by the text content of the element.</li>
</ul>
</td>
</tr>
Expand All @@ -128,13 +129,8 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
</td>
<td>
<ul>
<li>
Makes the element keyboard focusable and part of tab order of the
page.
</li>
<li>
The <code>a</code> element needs to define <code>tabindex=0</code> to become part of the tab order on the page, when it is missing or has an empty <code>href</code> attribute.
</li>
<li>Includes the element in the tab sequence.</li>
<li>Needed on the <code>a</code> element because it does not have a <code>href</code> attribute.</li>
</ul>
</td>
</tr>
Expand All @@ -144,7 +140,8 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
<td><code>a</code></td>
<td>
<ul>
<li>Identify <code>a</code> element with the toggle button behavior as toggled off</li>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is not pressed.</li>
</ul>
</td>
</tr>
Expand All @@ -153,18 +150,16 @@ <h2 id="rps_label">ARIA Roles, Properties and States</h2>
<th scope="row"><code>aria-pressed=&quot;true&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identify <code>a</code> element with the toggle button behavior as toggled on</li>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is pressed.</li>
</ul>
</td>
</tr>
</tbody>
</table>

</section>

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

<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. -->
Expand All @@ -181,30 +176,18 @@ <h2>Javascript and CSS Source Code</h2>
</section>

<section>
<h2>HTML Source Code</h2>

<h3 id="sc1_label">Action Button</h3>
<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="source1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>

<h3 id="sc2_label">Toggle Button</h3>
<div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
<pre><code id="source2"></code></pre>
<div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>



<script>
sourceCode.add('source1', 'action');
sourceCode.add('source2', 'toggle');
sourceCode.add('source1', 'example');
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="../../#h-button">Button Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
<a href="../../#button">Button Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>

0 comments on commit 4cc308d

Please sign in to comment.