1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<div class="intro">
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveThis example illustrates how to create an accessible toolbar using the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveFocus Manager Node Plugin and Node's support for the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<div class="example">
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <style scoped>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: solid 1px #999;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #ccc;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: .25em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove overflow: auto;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar-button {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-width: 1px 0;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-style: solid;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-color: #808080;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #dfdfdf;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: .25em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove font-size: 85%; /* 11px */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .first-child {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin-left: .5em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar-button span {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-width: 0 1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-style: solid;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-color: #808080;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: 0 -1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *position: relative; /* Necessary to get negative margins working in IE */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *left: -1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar-button span span {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: solid 1px #b6b6b6;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *position: static;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar-button input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: none;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove padding: 4px 4px 4px 24px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *overflow: visible; /* Remove superfluous padding for IE */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background: transparent url({{componentAssets}}/icons.png) no-repeat;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #add-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -102px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -100px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #edit-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -78px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -76px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #print-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -54px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -52px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #open-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -30px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -28px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #delete-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -126px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -124px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove #save-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -6px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -4px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove /* Augment the browser's default styling of the focus state by changing the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background color of the button when it is focused. */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove .yui3-toolbar-button input.focus {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #B3D4FF;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove {{>node-focusmanager-1-source}}
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<h2>Setting Up the HTML</h2>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveStart with a set of <code><input></code> elements. For the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovepurpose of this example, the <code>type</code> attribute of each
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovebutton will be set to a value of "button" since they won't be responsible for
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovesubmitting a form. Each <code><input></code> is wrapped by two
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<code><span></code>s that serve as decorator elements used to style
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveeach button with rounded corners.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<div id="toolbar-1" class="yui3-toolbar">
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<h2>Setting Up the CSS</h2>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveNext, each button in the toolbar is styled with rounded corners using a
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovecombination of the CSS <code>border</code> property along with the use of
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovenegative margins. An icon is added to each button using a background image.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveFollowing the advice of the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<a href="http://developer.yahoo.com/performance/rules.html">Exceptional Performance team</a>,
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovethis example uses the technique of
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<a href="http://www.alistapart.com/articles/sprites">CSS Sprites</a>,
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovecombining all of the icons for each button into a single image to reduce
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveHTTP requests.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: solid 1px #999;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #ccc;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: .25em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove overflow: auto;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar-button {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-width: 1px 0;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-style: solid;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-color: #808080;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #dfdfdf;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: .25em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove font-size: 85%; /* 11px */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.first-child {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin-left: .5em;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar-button span {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-width: 0 1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-style: solid;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border-color: #808080;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove margin: 0 -1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *position: relative; /* Necessary to get negative margins working in IE */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *left: -1px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar-button span span {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove display: inline-block;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: solid 1px #b6b6b6;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *position: static;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar-button input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove border: none;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove padding: 4px 4px 4px 24px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *overflow: visible; /* Remove superfluous padding for IE */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background: transparent url({{componentAssets}}/icons.png) no-repeat;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#add-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -102px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -100px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#edit-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -78px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -76px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#print-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -54px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -52px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#open-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -30px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -28px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#delete-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -126px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -124px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove#save-btn input {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-position: 4px -6px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove *background-position: 4px -4px;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<h2>Initializing the Focus Manager</h2>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveWith the toolbar markup and CSS in place, retrieve the Node instance
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groverepresenting the toolbar (<code><div id="toolbar-1"></code>)
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveand call the <a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovepassing in a reference to the Focus Manager Node Plugin as the first argument,
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveand a collection of configuration attributes as the second argument.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveThe Focus Manager's
f7da8d036724b1c753c75badbf8758f6ef48c0a0Derek Gathright<a href="{{apiDocs}}/classes/plugin.NodeFocusManager.html#attr_descendants"><code>descendants</code></a>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveattribute is set to a value of "input", so that only one button in the toolbar
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveis in the browser's default tab flow. This allows users navigating via the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovekeyboard to use the tab key to quickly move into and out of the toolbar. Once
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovethe toolbar has focus, the user can move focus among each button using the left
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveand right arrows keys, as defined by the value of the
f7da8d036724b1c753c75badbf8758f6ef48c0a0Derek Gathright<a href="{{apiDocs}}/classes/plugin.NodeFocusManager.html#attr_keys"><code>keys</code></a>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveattribute. Lastly, the
f7da8d036724b1c753c75badbf8758f6ef48c0a0Derek Gathright<a href="{{apiDocs}}/classes/plugin.NodeFocusManager.html#attr_focusClass"><code>focusClass</code></a>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveattribute is used to apply a class of <code>focus</code> to each
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<code><input></code> when it is focused, making it easy to style the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grovefocused state in all browsers.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveYUI().use("node-focusmanager", function (Y) {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Retrieve the Node instance representing the toolbar
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // (<div id="toolbar">) and call the "plug" method
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // passing in a reference to the Focus Manager Node Plugin.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove var toolbar = Y.one("#toolbar-1");
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove descendants: "input",
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove keys: { next: "down:39", // Right arrow
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove previous: "down:37" }, // Left arrow
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove focusClass: "focus",
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove circular: true
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Set the ARIA "role" attribute of the Node instance representing the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // toolbar to "toolbar" to improve the semantics of the markup for
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // users of screen readers.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove toolbar.set("role", "toolbar");
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Listen for the click event on each button via the use of the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // "delegate" method
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove toolbar.delegate("click", function (event) {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove alert("You clicked " + this.one("input").get("value"));
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove }, ".yui3-toolbar-button");
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<h2>Styling Focus</h2>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan GroveTo augment the browser's default styling of the focused state define a CSS
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Groveselector that adds a background color to the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove/* Augment the browser's default styling of the focus state by changing the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background color of the button when it is focused. */
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove.yui3-toolbar-button input.focus {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove background-color: #B3D4FF;
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<h2>Complete Example Source</h2>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove{{>node-focusmanager-1-source}}