--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/node-focusmanager/node-focusmanager-toolbar.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,518 @@
+<!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>