+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="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>+ + +
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.
+
.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;
+}
+
+
+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 all browsers.
+
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");
+
+});
+
+
+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. */
+
+.yui3-toolbar-button input.focus {
+ background-color: #B3D4FF;
+}
+
+
+Complete Example Source
+ +<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>
+
+