Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add IDL example for button for ARIA 1.2 #718

Merged
merged 1 commit into from
Jun 20, 2018
Merged

Add IDL example for button for ARIA 1.2 #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions aria-practices.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;