b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<meta http-equiv="content-type" content="text/html; charset=utf-8">
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove/*margin and padding on body element
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove can introduce errors in determining
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove element position and are not recommended;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove we turn them off as a foundation for YUI
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove CSS treatments. */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css" />
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<script type="text/javascript" src="/build/yui/yui-min.js"></script>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--begin custom header content for this example-->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: solid 1px #999;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #ccc;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: .25em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove overflow: auto;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-width: 1px 0;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-style: solid;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-color: #808080;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #dfdfdf;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: .25em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove font-size: 85%; /* 11px */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .first-child {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin-left: .5em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button span {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-width: 0 1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-style: solid;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-color: #808080;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: 0 -1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *position: relative; /* Necessary to get negative margins working in IE */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *left: -1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button span span {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: solid 1px #b6b6b6;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *position: static;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: none;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove padding: 4px 4px 4px 24px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *overflow: visible; /* Remove superfluous padding for IE */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background: transparent url(assets/icons.png) no-repeat;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #add-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -102px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -100px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #edit-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -78px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -76px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #print-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -54px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -52px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #open-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -30px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -28px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #delete-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -126px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -124px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #save-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -6px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -4px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove /* Augment the browser's default styling of the focus state by changing the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background color of the button when it is focused. */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button input.focus {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #B3D4FF;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--end custom header content for this example-->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan GroveThis example illustrates how to create an accessible toolbar using the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan GroveFocus Manager Node Plugin and Node's support for the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove YUI().use("node-focusmanager", function(Y) {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Retrieve the Node instance representing the toolbar
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // (<div id="toolbar">) and call the "plug" method
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // passing in a reference to the Focus Manager Node Plugin.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove var toolbar = Y.Node.get("#toolbar-1");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove descendants: "input",
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove keys: { next: "down:39", // Right arrow
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove previous: "down:37" }, // Left arrow
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove focusClass: "focus",
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove circular: false
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Set the ARIA "role" attribute of the Node instance representing the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // toolbar to "toolbar" to improve the semantics of the markup for
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // users of screen readers.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove toolbar.set("role", "toolbar");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Listen for the click event on each button via the use of the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // "delegate" method
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove toolbar.delegate("click", function (event) {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove alert("You clicked " + this.query("input").get("value"));
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove }, ".yui3-toolbar-button");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--END SOURCE CODE FOR EXAMPLE =============================== -->