YUI 3.x Home -

YUI Library Examples: Focus Manager Node Plugin: Accessible Toolbar

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.

View example in new window.

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. 

  1. <div id="toolbar-1" class="yui-toolbar">
  2.     <span id="add-btn" class="yui-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
  3.     <span id="edit-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
  4.     <span id="print-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
  5.     <span id="delete-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
  6.     <span id="open-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
  7.     <span id="save-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
  8. </div>
<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. 

  1. .yui-toolbar {
  2.     border: solid 1px #999;
  3.     background-color: #ccc;
  4.     margin: .25em;
  5.     overflow: auto;
  6. }
  7.  
  8. .yui-toolbar-button {
  9.     display: inline-block;
  10.     border-width: 1px 0;
  11.     border-style: solid;
  12.     border-color: #808080;
  13.     background-color: #dfdfdf;
  14.     margin: .25em;
  15.     font-size: 85%;  /* 11px */
  16. }
  17.  
  18. .first-child {
  19.     margin-left: .5em;
  20. }
  21.  
  22. .yui-toolbar-button span {
  23.     display: inline-block;
  24.     border-width: 0 1px;
  25.     border-style: solid;
  26.     border-color: #808080;
  27.     margin: 0 -1px;
  28.     *position: relative;    /* Necessary to get negative margins working in IE */
  29.     *left: -1px;
  30. }
  31.  
  32. .yui-toolbar-button span span {
  33.     display: inline-block;
  34.     border: solid 1px #b6b6b6;
  35.     margin: 0;
  36.     *position: static;
  37. }
  38.  
  39. .yui-toolbar-button input {
  40.     border: none;
  41.     margin: 0;
  42.     padding: 4px 4px 4px 24px;	
  43.     *overflow: visible; /* Remove superfluous padding for IE */
  44.     background: transparent url(assets/icons.png) no-repeat;
  45. }
  46.  
  47. #add-btn input {
  48.     background-position: 4px -102px;
  49.     *background-position: 4px -100px;
  50. }
  51.  
  52. #edit-btn input {
  53.     background-position: 4px -78px;
  54.     *background-position: 4px -76px;
  55. }			
  56.  
  57. #print-btn input {
  58.     background-position: 4px -54px;
  59.     *background-position: 4px -52px;
  60. }
  61.  
  62. #open-btn input {
  63.     background-position: 4px -30px;
  64.     *background-position: 4px -28px;
  65. }
  66.  
  67. #delete-btn input {
  68.     background-position: 4px -126px;
  69.     *background-position: 4px -124px;
  70. }
  71.  
  72. #save-btn input {
  73.     background-position: 4px -6px;
  74.     *background-position: 4px -4px;
  75. }
.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. 

  1. YUI({ base:"../../build/", timeout: 10000 }).use("node-focusmanager", function(Y) {
  2.  
  3.     //  Retrieve the Node instance representing the toolbar
  4.     //  (<div id="toolbar">) and call the "plug" method
  5.     //  passing in a reference to the Focus Manager Node Plugin.
  6.  
  7.     var toolbar = Y.Node.get("#toolbar-1");
  8.  
  9.     toolbar.plug(Y.Plugin.NodeFocusManager, {
  10.  
  11.             descendants: "input",
  12.             keys: { next: "down:39", // Right arrow
  13.                     previous: "down:37" },  //  Left arrow
  14.             focusClass: "focus",
  15.             circular: true
  16.  
  17.          });
  18.  
  19.  
  20.     //  Set the ARIA "role" attribute of the Node instance representing the
  21.     //  toolbar to "toolbar" to improve the semantics of the markup for
  22.     //  users of screen readers.
  23.  
  24.     toolbar.set("role", "toolbar");
  25.  
  26.  
  27.     //  Listen for the click event on each button via the use of the
  28.     //  "delegate" method
  29.  
  30.     toolbar.delegate("click", function (event) {
  31.  
  32.         alert("You clicked " + this.query("input").get("value"));
  33.  
  34.     }, ".yui-toolbar-button");
  35.  
  36. });
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 

  1. /*  Augment the browser's default styling of the focus state by changing the
  2.     background color of the button when it is focused.  */
  3.  
  4. .yui-toolbar-button input.focus {
  5.     background-color: #B3D4FF;
  6. }
/*  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;
}

More Focus Manager Node Plugin Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings