src/cm/media/js/lib/yui/yui_3.10.3/docs/node-focusmanager/node-focusmanager-toolbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Accessible Toolbar</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<a href="#toc" class="jump">Jump to Table of Contents</a>
<h1>Example: Accessible Toolbar</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>
This example illustrates how to create an accessible toolbar using the
Focus Manager Node Plugin and Node's support for the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p>
</div>
<div class="example">
<style scoped>
.yui3-toolbar {
border: solid 1px #999;
background-color: #ccc;
margin: .25em;
overflow: auto;
}
.yui3-toolbar-button {
display: inline-block;
border-width: 1px 0;
border-style: solid;
border-color: #808080;
background-color: #dfdfdf;
margin: .25em;
font-size: 85%; /* 11px */
}
.first-child {
margin-left: .5em;
}
.yui3-toolbar-button span {
display: inline-block;
border-width: 0 1px;
border-style: solid;
border-color: #808080;
margin: 0 -1px;
*position: relative; /* Necessary to get negative margins working in IE */
*left: -1px;
}
.yui3-toolbar-button span span {
display: inline-block;
border: solid 1px #b6b6b6;
margin: 0;
*position: static;
}
.yui3-toolbar-button input {
border: none;
margin: 0;
padding: 4px 4px 4px 24px;
*overflow: visible; /* Remove superfluous padding for IE */
background: transparent url(../assets/node-focusmanager/icons.png) no-repeat;
}
#add-btn input {
background-position: 4px -102px;
*background-position: 4px -100px;
}
#edit-btn input {
background-position: 4px -78px;
*background-position: 4px -76px;
}
#print-btn input {
background-position: 4px -54px;
*background-position: 4px -52px;
}
#open-btn input {
background-position: 4px -30px;
*background-position: 4px -28px;
}
#delete-btn input {
background-position: 4px -126px;
*background-position: 4px -124px;
}
#save-btn input {
background-position: 4px -6px;
*background-position: 4px -4px;
}
/* Augment the browser's default styling of the focus state by changing the
background color of the button when it is focused. */
.yui3-toolbar-button input.focus {
background-color: #B3D4FF;
}
#out {
border: 1px solid #CCC;
padding: 1em;
margin-top: 10px;
}
</style>
<div id="toolbar-1" class="yui3-toolbar">
<span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
<span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
<span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
<span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
<span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
<span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
</div>
<div id="out">(Accessible Toolbar results here)</div>
<script>
YUI().use("node-focusmanager", function (Y) {
// Retrieve the Node instance representing the toolbar
// (<div id="toolbar">) and call the "plug" method
// passing in a reference to the Focus Manager Node Plugin.
var toolbar = Y.one("#toolbar-1"),
out = Y.one("#out");
toolbar.plug(Y.Plugin.NodeFocusManager, {
descendants: "input",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: "focus",
circular: true
});
// Set the ARIA "role" attribute of the Node instance representing the
// toolbar to "toolbar" to improve the semantics of the markup for
// users of screen readers.
toolbar.set("role", "toolbar");
// Listen for the click event on each button via the use of the
// "delegate" method
toolbar.delegate("click", function (event) {
out.setHTML("You clicked " + this.one("input").get("value"));
}, ".yui3-toolbar-button");
});
</script>
</div>
<h2 id="setting-up-the-html">Setting Up the HTML</h2>
<p>
Start with a set of <code><input></code> elements. For the
purpose of this example, the <code>type</code> attribute of each
button will be set to a value of "button" since they won't be responsible for
submitting a form. Each <code><input></code> is wrapped by two
<code><span></code>s that serve as decorator elements used to style
each button with rounded corners.
</p>
<pre class="code prettyprint"><div id="toolbar-1" class="yui3-toolbar">
<span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
<span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
<span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
<span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
<span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
<span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
</div></pre>
<h2 id="setting-up-the-css">Setting Up the CSS</h2>
<p>
Next, each button in the toolbar is styled with rounded corners using a
combination of the CSS <code>border</code> property along with the use of
negative margins. An icon is added to each button using a background image.
Following the advice of the
<a href="http://developer.yahoo.com/performance/rules.html">Exceptional Performance team</a>,
this example uses the technique of
<a href="http://www.alistapart.com/articles/sprites">CSS Sprites</a>,
combining all of the icons for each button into a single image to reduce
HTTP requests.
</p>
<pre class="code prettyprint">.yui3-toolbar {
border: solid 1px #999;
background-color: #ccc;
margin: .25em;
overflow: auto;
}
.yui3-toolbar-button {
display: inline-block;
border-width: 1px 0;
border-style: solid;
border-color: #808080;
background-color: #dfdfdf;
margin: .25em;
font-size: 85%; /* 11px */
}
.first-child {
margin-left: .5em;
}
.yui3-toolbar-button span {
display: inline-block;
border-width: 0 1px;
border-style: solid;
border-color: #808080;
margin: 0 -1px;
*position: relative; /* Necessary to get negative margins working in IE */
*left: -1px;
}
.yui3-toolbar-button span span {
display: inline-block;
border: solid 1px #b6b6b6;
margin: 0;
*position: static;
}
.yui3-toolbar-button input {
border: none;
margin: 0;
padding: 4px 4px 4px 24px;
*overflow: visible; /* Remove superfluous padding for IE */
background: transparent url(../assets/node-focusmanager/icons.png) no-repeat;
}
#add-btn input {
background-position: 4px -102px;
*background-position: 4px -100px;
}
#edit-btn input {
background-position: 4px -78px;
*background-position: 4px -76px;
}
#print-btn input {
background-position: 4px -54px;
*background-position: 4px -52px;
}
#open-btn input {
background-position: 4px -30px;
*background-position: 4px -28px;
}
#delete-btn input {
background-position: 4px -126px;
*background-position: 4px -124px;
}
#save-btn input {
background-position: 4px -6px;
*background-position: 4px -4px;
}</pre>
<h2 id="initializing-the-focus-manager">Initializing the Focus Manager</h2>
<p>
With the toolbar markup and CSS in place, retrieve the Node instance
representing the toolbar (<code><div id="toolbar-1"></code>)
and call the <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a>
passing in a reference to the Focus Manager Node Plugin as the first argument,
and a collection of configuration attributes as the second argument.
</p>
<p>
The Focus Manager's
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_descendants"><code>descendants</code></a>
attribute is set to a value of "input", so that only one button in the toolbar
is in the browser's default tab flow. This allows users navigating via the
keyboard to use the tab key to quickly move into and out of the toolbar. Once
the toolbar has focus, the user can move focus among each button using the left
and right arrows keys, as defined by the value of the
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_keys"><code>keys</code></a>
attribute. Lastly, the
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_focusClass"><code>focusClass</code></a>
attribute is used to apply a class of <code>focus</code> to each
<code><input></code> when it is focused, making it easy to style the
focused state in all browsers.
</p>
<pre class="code prettyprint">YUI().use("node-focusmanager", function (Y) {
// Retrieve the Node instance representing the toolbar
// (<div id="toolbar">) and call the "plug" method
// passing in a reference to the Focus Manager Node Plugin.
var toolbar = Y.one("#toolbar-1");
toolbar.plug(Y.Plugin.NodeFocusManager, {
descendants: "input",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: "focus",
circular: true
});
// Set the ARIA "role" attribute of the Node instance representing the
// toolbar to "toolbar" to improve the semantics of the markup for
// users of screen readers.
toolbar.set("role", "toolbar");
// Listen for the click event on each button via the use of the
// "delegate" method
toolbar.delegate("click", function (event) {
alert("You clicked " + this.one("input").get("value"));
}, ".yui3-toolbar-button");
});</pre>
<h2 id="styling-focus">Styling Focus</h2>
<p>
To augment the browser's default styling of the focused state define a CSS
selector that adds a background color to the
</p>
<pre class="code prettyprint">/* Augment the browser's default styling of the focus state by changing the
background color of the button when it is focused. */
.yui3-toolbar-button input.focus {
background-color: #B3D4FF;
}</pre>
<h2 id="complete-example-source">Complete Example Source</h2>
<pre class="code prettyprint"><div id="toolbar-1" class="yui3-toolbar">
<span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
<span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
<span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
<span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
<span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
<span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
</div>
<div id="out">(Accessible Toolbar results here)</div>
<script>
YUI().use("node-focusmanager", function (Y) {
// Retrieve the Node instance representing the toolbar
// (<div id="toolbar">) and call the "plug" method
// passing in a reference to the Focus Manager Node Plugin.
var toolbar = Y.one("#toolbar-1"),
out = Y.one("#out");
toolbar.plug(Y.Plugin.NodeFocusManager, {
descendants: "input",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: "focus",
circular: true
});
// Set the ARIA "role" attribute of the Node instance representing the
// toolbar to "toolbar" to improve the semantics of the markup for
// users of screen readers.
toolbar.set("role", "toolbar");
// Listen for the click event on each button via the use of the
// "delegate" method
toolbar.delegate("click", function (event) {
out.setHTML("You clicked " + this.one("input").get("value"));
}, ".yui3-toolbar-button");
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div id="toc" class="sidebox">
<div class="hd">
<h2 class="no-toc">Table of Contents</h2>
</div>
<div class="bd">
<ul class="toc">
<li>
<a href="#setting-up-the-html">Setting Up the HTML</a>
</li>
<li>
<a href="#setting-up-the-css">Setting Up the CSS</a>
</li>
<li>
<a href="#initializing-the-focus-manager">Initializing the Focus Manager</a>
</li>
<li>
<a href="#styling-focus">Styling Focus</a>
</li>
<li>
<a href="#complete-example-source">Complete Example Source</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.">
<a href="node-focusmanager-toolbar.html">Accessible Toolbar</a>
</li>
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
<a href="node-focusmanager-button.html">Accessible Menu Button</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/node-focusmanager',
name: 'node-focusmanager-toolbar',
title: 'Accessible Toolbar',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('node-focusmanager-toolbar');
YUI.Env.Tests.examples.push('node-focusmanager-button');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>