Skip to content

Commit

Permalink
Add ARIA 1.2 IDL example for button (pull #718)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnurthen @mcking65
jnurthen authored and mcking65 committed Jun 20, 2018
1 parent 9abf6c4 commit 738eaa6
Show file tree
Hide file tree
Showing 3 changed files with 260 additions and 0 deletions.
1 change: 1 addition & 0 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ <h3>Button</h3>
<section class="notoc">
<h4>Examples</h4>
<p><a href="examples/button/button.html">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</p>
<p><a href="examples/button/button_idl.html">Button Examples (IDL)</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons. This example uses the <a class="specref" href="#idl-interface">IDL Interface</a>.</p>
</section>

<section class="notoc">
Expand Down
174 changes: 174 additions & 0 deletions examples/button/button_idl.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Examples (IDL Version) | WAI-ARIA Authoring Practices 1.2</title>

<!-- 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" type="text/javascript"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>

<link href="css/button.css" rel="stylesheet">
<script src="js/button_idl.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
<ul>
<li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
<li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
<li><a href="../../#button">Design Pattern</a></li>
</ul>
</nav>
<main>
<h1>Button Examples</h1>
<p>
The following command and toggle button examples demonstrate the
<a href="../../#button">button design pattern.</a>
</p>
<p>This version uses the IDL syntax within the JavaScript. Otherwise it is identical to the <a href="button.html">Button Examples</a>.</p>
<p>Similar examples include:</p>
<ul>
<li><a href="../menu-button/menu-button-links.html">Navigation Menu Button</a>: A button that opens a menu of items that behave as links.</li>
<li><a href="../menu-button/menu-button-actions.html">Action Menu Button Example Using element.focus()</a>: A button that opens a menu of actions or commands where focus in the menu is managed using <code>element.focus()</code>.</li>
<li><a href="../menu-button/menu-button-actions-active-descendant.html">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</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">
<p>This <q>Print</q> action button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>
<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
Mute
<svg aria-hidden="true">
<use xlink:href="images/mute.svg#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>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<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">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>
<th scope="row"><code>button</code></th>
<td></td>
<td>
<code>div</code>, <code>a</code>
</td>
<td>
<ul>
<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>
<tr>
<td></td>
<th scope="row">
<code>tabindex=&quot;0&quot;</code>
</th>
<td>
<code>div</code>, <code>a</code>
</td>
<td>
<ul>
<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>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;false&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is not pressed.</li>
</ul>
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-pressed=&quot;true&quot;</code></th>
<td><code>a</code></td>
<td>
<ul>
<li>Identifies the button as a toggle button.</li>
<li>Indicates the toggle button is pressed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>
CSS:
<a href="css/button.css" type="tex/css">button.css</a>
</li>
<li>
Javascript:
<a href="js/button_idl.js" type="text/javascript">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="source1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('source1', 'example');
sourceCode.make();
</script>
</section>
</main>
<nav>
<a href="../../#button">Button Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>
85 changes: 85 additions & 0 deletions examples/button/js/button_idl.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* File: button.js
*
* Desc: JS code for Button Design Pattersn
*/

var ICON_MUTE_URL = 'images/mute.svg#icon-mute';
var ICON_SOUND_URL = 'images/mute.svg#icon-sound';

function init () {
// Create variables for the various buttons
var actionButton = document.getElementById('action');
var toggleButton = document.getElementById('toggle');

// Add event listeners to the various buttons
actionButton.addEventListener('click', actionButtonEventHandler);
actionButton.addEventListener('keydown', actionButtonEventHandler);

toggleButton.addEventListener('click', toggleButtonEventHandler);
toggleButton.addEventListener('keydown', toggleButtonEventHandler);

}

function actionButtonEventHandler (event) {
var type = event.type;

// Grab the keydown and click events
if (type === 'keydown') {
// If either enter or space is pressed, execute the funtion
if (event.keyCode === 13 || event.keyCode === 32) {
window.print();

event.preventDefault();
}
}
else if (type === 'click') {
window.print();
}
}

function toggleButtonEventHandler (event) {
var type = event.type;

// Grab the keydown and click events
if (type === 'keydown') {
// If either enter or space is pressed, execute the funtion
if (event.keyCode === 13 || event.keyCode === 32) {
toggleButtonState(event);

event.preventDefault();
}
}
else if (type === 'click') {
// Only allow this event if either role is correctly set
// or a correct element is used.
if (event.target.role === 'button' || event.target.tagName === 'button') {
toggleButtonState(event);
}
}
}

function toggleButtonState (event) {
var button = event.target;
var currentState = button.ariaPressed;
var newState = 'true';

var icon = button.getElementsByTagName('use')[0];
var currentIconState = icon.getAttribute('xlink:href');
var newIconState = ICON_MUTE_URL;

// If aria-pressed is set to true, set newState to false
if (currentState === 'true') {
newState = 'false';
newIconState = ICON_SOUND_URL;
}

// Set the new aria-pressed state on the button
button.ariaPressed = newState;
icon.setAttribute('xlink:href', newIconState);
}

window.onload = init;

0 comments on commit 738eaa6

Please sign in to comment.