YUI Library Examples: Focus Manager Node Plugin: Accessible Toolbar

+ +

Focus Manager Node Plugin: Accessible Toolbar

+ + + +

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. +

+ + + +

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;
+    margin: .25em;
+    font-size: 85%;  /* 11px */
+}
+
+.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 input {
+    border: none;
+    margin: 0;
+	padding: 4px 4px 4px 24px;	
+    *overflow: visible; /* Remove superfluous padding for IE */
+	background: transparent url(assets/icons.png) 4px -6px no-repeat;
+}
+
+#add-btn input {
+	background-position: 4px -102px;
+}
+
+#edit-btn input {
+	background-position: 4px -78px;
+}			
+
+#print-btn input {
+	background-position: 4px -54px;
+}
+
+#open-btn input {
+	background-position: 4px -30px;
+}
+
+#delete-btn input {
+	background-position: 4px -126px;
+}
+
+#save-btn input {
+	background-position: 4px -6px;
+}
+

+ +

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",	//	The descendant Nodes to manage
+			keys: { next: "down:39", //	Right arrow
+					previous: "down:37" },	//	Left arrow
+			focusClass: "focus",	//	Class to be applied to the currently focused <input>
+			circular: true	//	Go back to the first/last Node when the beginning or end is reached
+
+		 });
+
+
+	//	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" Custom Event.
+
+	Y.on("delegate", function (event) {
+
+		alert("You clicked " + event.currentTarget.query("input").get("value"));
+
+	}, toolbar, "click", ".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 +

+ +