Focus Manager Node Plugin: Accessible Toolbar
+ ++This example illustrates how to create an accessible toolbar using the +Focus Manager Node Plugin and Node's support for the +WAI-ARIA Roles and States. +
Setting Up the HTML
+
+Start with a set of <input> elements. For the
+purpose of this example, the type attribute of each
+button will be set to a value of "button" since they won't be responsible for
+submitting a form. Each <input> is wrapped by two
+<span>s that serve as decorator elements used to style
+each button with rounded corners.
+
<div id="toolbar-1" class="yui-toolbar"> + <span id="add-btn" class="yui-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span> + <span id="edit-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span> + <span id="print-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span> + <span id="delete-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span> + <span id="open-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span> + <span id="save-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span> +</div>
Setting Up the CSS
+
+Next, each button in the toolbar is styled with rounded corners using a
+combination of the CSS border property along with the use of
+negative margins. An icon is added to each button using a background image.
+Following the advice of the
+Exceptional Performance team,
+this example uses the technique of
+CSS Sprites,
+combining all of the icons for each button into a single image to reduce
+HTTP requests.
+
.yui-toolbar { + border: solid 1px #999; + background-color: #ccc; + margin: .25em; + overflow: auto; +} + +.yui-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; +} + +.yui-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; +} + +.yui-toolbar-button span span { + display: inline-block; + border: solid 1px #b6b6b6; + margin: 0; + *position: static; +} + +.yui-toolbar-button input { + border: none; + margin: 0; + padding: 4px 4px 4px 24px; + *overflow: visible; /* Remove superfluous padding for IE */ + background: transparent url(assets/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; +}
Initializing the Focus Manager
+
+With the toolbar markup and CSS in place, retrieve the Node instance
+representing the toolbar (<div id="toolbar-1">)
+and call the plug
+passing in a reference to the Focus Manager Node Plugin as the first argument,
+and a collection of configuration attributes as the second argument.
+
+The Focus Manager's
+descendants
+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
+keys
+attribute. Lastly, the
+focusClass
+attribute is used to apply a class of focus to each
+<input> when it is focused, making it easy to style the
+focused state in each of the
+A-Grade browsers.
+
YUI({ base:"../../build/", timeout: 10000 }).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.Node.get("#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.query("input").get("value")); + + }, ".yui-toolbar-button"); + +});
Styling Focus
++To augment the browser's default styling of the focused state define a CSS +selector that adds a background color to the +
+
/* Augment the browser's default styling of the focus state by changing the + background color of the button when it is focused. */ + +.yui-toolbar-button input.focus { + background-color: #B3D4FF; +}
