← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/node-focusmanager/index.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/node-focusmanager/index.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>FocusManager Node Plugin</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>FocusManager Node Plugin</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
    <p>
24
 
        When designing widgets that manage a set of descendant controls (i.e. buttons
25
 
        in a toolbar, tabs in a tablist, menuitems in a menu, etc.) it is important to
26
 
        limit the number of descendants in the browser's default tab flow.  The fewer
27
 
        number of descendants in the default tab flow, the easier it is for keyboard
28
 
        users to navigate between widgets by pressing the tab key.  When a widget has
29
 
        focus it should provide a set of shortcut keys (typically the arrow keys)
30
 
        to move focus among its descendants.
31
 
    </p>
32
 
 
33
 
    <p>
34
 
        To this end, the Focus Manager Node Plugin makes it easy to define a Node's
35
 
        focusable descendants, define which descendant should be in the default tab
36
 
        flow, and define the keys that move focus among each descendant.
37
 
        Additionally, as the CSS
38
 
        <a href="http://www.w3.org/TR/CSS21/selector.html#x38"><code>:focus</code></a>
39
 
        pseudo class is not supported on all elements in all browsers,
40
 
        the Focus Manager Node Plugin provides an easy, cross-browser means of
41
 
        styling focus.
42
 
    </p>
43
 
</div>
44
 
 
45
 
<h2 id="getting-started">Getting Started</h2>
46
 
 
47
 
<p>
48
 
To include the source files for FocusManager Node Plugin and its dependencies, first load
49
 
the YUI seed file if you haven't already loaded it.
50
 
</p>
51
 
 
52
 
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
53
 
 
54
 
 
55
 
<p>
56
 
Next, create a new YUI instance for your application and populate it with the
57
 
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
58
 
YUI will automatically load any dependencies required by the modules you
59
 
specify.
60
 
</p>
61
 
 
62
 
<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
63
 
YUI().use(&#x27;node-focusmanager&#x27;, function (Y) {
64
 
    &#x2F;&#x2F; FocusManager Node Plugin is available and ready for use. Add implementation
65
 
    &#x2F;&#x2F; code here.
66
 
});</pre>
67
 
 
68
 
 
69
 
<p>
70
 
For more information on creating YUI instances and on the
71
 
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
72
 
documentation for the <a href="../yui/index.html">YUI Global object</a>.
73
 
</p>
74
 
 
75
 
 
76
 
<h2 id="using-the-focus-manager-node-plugin">Using the Focus Manager Node Plugin</h2>
77
 
 
78
 
<p>
79
 
To use the Focus Manager Node Plugin, start by identifying the parent element
80
 
of the elements whose focus is to be managed.  For example, consider the
81
 
following toolbar HTML:
82
 
</p>
83
 
 
84
 
<pre class="code prettyprint">&lt;div id=&quot;toolbar-1&quot;&gt;
85
 
    &lt;input type=&quot;button&quot; name=&quot;btn-add&quot; value=&quot;Add&quot;&gt;
86
 
    &lt;input type=&quot;button&quot; name=&quot;btn-edit&quot; value=&quot;Edit&quot;&gt;
87
 
    &lt;input type=&quot;button&quot; name=&quot;btn-print&quot; value=&quot;Print&quot;&gt;
88
 
    &lt;input type=&quot;button&quot; name=&quot;btn-delete&quot; value=&quot;Delete&quot;&gt;
89
 
    &lt;input type=&quot;button&quot; name=&quot;btn-open&quot; value=&quot;Open&quot;&gt;
90
 
    &lt;input type=&quot;button&quot; name=&quot;btn-save&quot; value=&quot;Save&quot;&gt;
91
 
&lt;&#x2F;div&gt;</pre>
92
 
 
93
 
 
94
 
<p>
95
 
To manage the focus of each button in the toolbar, start by retrieving a
96
 
<a href="../node">Node</a> instance representing the toolbar's root element
97
 
(<code>&#60;div id="toolbar-1"&#62;</code>).
98
 
Next, call the Node's
99
 
<a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a>
100
 
method, passing in a reference to the Focus Manager Node Plugin
101
 
(<code>Y.Plugin.NodeFocusManager</code>) as the first argument, followed by an
102
 
object literal of configuration attributes as the second.
103
 
</p>
104
 
<p>Use the
105
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
106
 
configuration attribute to specify the child nodes of the root node whose
107
 
focus is to be managed.  The
108
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
109
 
configuration attribute accepts a string representing a CSS selector, making it
110
 
very easy to identify the elements whose focus should be managed.  For the
111
 
toolbar, a value of "input" will be passed as the value of the
112
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
113
 
configuration attribute.
114
 
</p>
115
 
<p>
116
 
Use the
117
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
118
 
configuration attribute to identify which keys move focus between each of the
119
 
specified descendant Nodes.  The
120
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
121
 
configuration attribute accepts an object literal, the format of which is
122
 
<code>{ next: "down:40", previous: "down:38" }</code>.  The value for the
123
 
<code>next</code> and <code>previous</code> sub attributes are used to attach
124
 
<a href="../event/index.html#keylistener"><code>key</code></a> event listeners.  Each
125
 
value represents the type of event
126
 
("down" for <code>mousedown</code>, "up" for <code>mouseup</code>, and
127
 
"press" for <code>keypress</code>) and key codes ("40" for the down arrow key)
128
 
to use to navigate to the next/previous descendant.  For the
129
 
toolbar the
130
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
131
 
configuration attribute will be set to a value of
132
 
<code>{ next: "down:39", previous: "down:37" }</code>, enabling the user to
133
 
move focus among each button using the left and right arrows keys.
134
 
(See
135
 
the <a href="../event/key.html">Using the key Event</a> section of
136
 
the Event documentation for more information on "key" event listeners.)
137
 
</p>
138
 
 
139
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
140
 
 
141
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
142
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
143
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
144
 
 
145
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
146
 
 
147
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
148
 
 
149
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
150
 
 
151
 
    descendants: &quot;input&quot;,
152
 
 
153
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
154
 
    &#x2F;&#x2F;  right arrow keys
155
 
 
156
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; }
157
 
 
158
 
});
159
 
 
160
 
});</pre>
161
 
 
162
 
 
163
 
<p>
164
 
Use the
165
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_circular"><code>circular</code></a>
166
 
configuration attribute to indicate that focus should be directed to the first
167
 
or last descendant when the user has navigated to the first or last descendant.
168
 
</p>
169
 
 
170
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
171
 
 
172
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
173
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
174
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
175
 
 
176
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
177
 
 
178
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
179
 
 
180
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
181
 
 
182
 
    descendants: &quot;input&quot;,
183
 
 
184
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
185
 
    &#x2F;&#x2F;  right arrow keys
186
 
 
187
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; },
188
 
 
189
 
    circular: true
190
 
 
191
 
});
192
 
 
193
 
});</pre>
194
 
 
195
 
 
196
 
<h3 id="activedescendant-attribute">The <code>activeDescendant</code> Attribute</h3>
197
 
 
198
 
<p>
199
 
The <a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
200
 
attribute represents which of the Focus Manager's
201
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a> is either
202
 
currently focused or is focusable (<code>tabIndex</code> attribute is set to 0).
203
 
As the user moves focus among the Focus Manager's defined descendants, the <a href="../api/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
204
 
configuration attribute is updated to remain in sync with the currently
205
 
focused descendant.
206
 
</p>
207
 
<p>
208
 
The
209
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
210
 
configuration attribute can be set two different ways: via markup or via
211
 
script.  To set the
212
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
213
 
configuration attribute via markup, simply set the <code>tabIndex</code>
214
 
attribute to 0 for the element that should be considered the active descendant.
215
 
If the <code>tabIndex</code> attribute isn't set on any of the descendants
216
 
the active descendant will be set to 0, or the index of the first
217
 
enabled descendant. The following example shows how to make the second button
218
 
in the toolbar the active descendant.
219
 
</p>
220
 
 
221
 
<pre class="code prettyprint">&lt;div id=&quot;toolbar-1&quot;&gt;
222
 
    &lt;input type=&quot;button&quot; name=&quot;btn-add&quot; value=&quot;Add&quot;&gt;
223
 
    &lt;input type=&quot;button&quot; tabindex=&quot;0&quot; name=&quot;btn-edit&quot; value=&quot;Edit&quot;&gt;
224
 
    &lt;input type=&quot;button&quot; name=&quot;btn-print&quot; value=&quot;Print&quot;&gt;
225
 
    &lt;input type=&quot;button&quot; name=&quot;btn-delete&quot; value=&quot;Delete&quot;&gt;
226
 
    &lt;input type=&quot;button&quot; name=&quot;btn-open&quot; value=&quot;Open&quot;&gt;
227
 
    &lt;input type=&quot;button&quot; name=&quot;btn-save&quot; value=&quot;Save&quot;&gt;
228
 
&lt;&#x2F;div&gt;</pre>
229
 
 
230
 
 
231
 
<p>
232
 
The
233
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
234
 
configuration attribute can also be set via the object literal of configuration
235
 
attributes passed to the
236
 
<a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a>
237
 
method.
238
 
</p>
239
 
 
240
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
241
 
 
242
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
243
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
244
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
245
 
 
246
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
247
 
 
248
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
249
 
 
250
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
251
 
 
252
 
    descendants: &quot;input&quot;,
253
 
 
254
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
255
 
    &#x2F;&#x2F;  right arrow keys
256
 
 
257
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; },
258
 
 
259
 
    &#x2F;&#x2F;  Make the second button in the toolbar the active descendant
260
 
    activeDescendant: 1
261
 
 
262
 
});
263
 
 
264
 
});</pre>
265
 
 
266
 
 
267
 
<p>The
268
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_activeDescendant"><code>activeDescendant</code></a>
269
 
configuration attribute can also be set at runtime via the
270
 
<a href="http://yuilibrary.com/yui/docs/api/classes/Attribute.html#method_set"><code>set</code></a>
271
 
method.
272
 
</p>
273
 
 
274
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
275
 
 
276
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
277
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
278
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
279
 
 
280
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
281
 
 
282
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
283
 
 
284
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
285
 
 
286
 
    descendants: &quot;input&quot;,
287
 
 
288
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
289
 
    &#x2F;&#x2F;  right arrow keys
290
 
 
291
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; }
292
 
 
293
 
});
294
 
 
295
 
&#x2F;&#x2F;  Make the second button in the toolbar the active descendant
296
 
toolbar.focusManager.set(&quot;activeDescendant&quot;, 1);
297
 
 
298
 
});</pre>
299
 
 
300
 
 
301
 
<h3 id="styling-focus">Styling Focus</h3>
302
 
 
303
 
<p>
304
 
One of the challenges to styling the focus state of HTML elements is that
305
 
support for the CSS
306
 
<a href="http://www.w3.org/TR/CSS21/selector.html#x38"><code>:focus</code></a>
307
 
pseudo class is limited to the <code>a</code> element in Internet Explorer.
308
 
To fix this problem, the Focus Manager Node Plugin provides a
309
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
310
 
configuration attribute that makes it easy to style focus across <em>all</em>
311
 
elements in <em>all</em> browsers</a>.
312
 
</p>
313
 
<p>
314
 
The
315
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
316
 
configuration attribute can be used one of two ways.  The first way is to
317
 
simply pass a string representing the class name to be applied to the currently
318
 
focused descendant Node instance.  For example, to apply a class of "focus" to
319
 
each button in the toolbar, set the the
320
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
321
 
configuration attribute to a value of "focus":
322
 
</p>
323
 
 
324
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
325
 
 
326
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
327
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
328
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
329
 
 
330
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
331
 
 
332
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
333
 
 
334
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
335
 
 
336
 
    descendants: &quot;input&quot;,
337
 
 
338
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
339
 
    &#x2F;&#x2F;  right arrow keys
340
 
 
341
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; },
342
 
 
343
 
    focusClass: &quot;focus&quot;
344
 
 
345
 
});
346
 
 
347
 
});</pre>
348
 
 
349
 
 
350
 
<p>
351
 
Often styling focusable elements such as <code>&#60;input&#62;</code>s
352
 
requires wrapping them in decorator elements, since <code>&#60;input&#62;</code>
353
 
elements cannot have children.  In such cases, it is likely the class name used
354
 
to style focus would be applied to the element decorating the focused
355
 
descendant, rather than the descendant itself.  For this reason, it is also
356
 
possible to pass an object literal as the value of the
357
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
358
 
configuration attribute that defines not only the class name to be used to
359
 
indicate focus, but a function used to retrieve the Node instance to which
360
 
the class name should be applied.  For example, if each button in the toolbar
361
 
where decorated by a <code>&#60;span&#62;</code>, the "focus" class could be
362
 
applied to the parent <code>&#60;span&#62;</code> of the focused
363
 
<code>&#60;input&#62;</code> using the following code:
364
 
</p>
365
 
 
366
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
367
 
 
368
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
369
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
370
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
371
 
 
372
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
373
 
 
374
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
375
 
 
376
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
377
 
 
378
 
    descendants: &quot;input&quot;,
379
 
 
380
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
381
 
    &#x2F;&#x2F;  right arrow keys
382
 
 
383
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; },
384
 
 
385
 
    focusClass: {
386
 
        className: &quot;focus&quot;, &#x2F;&#x2F;  The class name to use
387
 
        fn: function (node) {
388
 
            &#x2F;&#x2F;  The Node instance to which the class should be applied
389
 
            return node.get(&quot;parentNode&quot;);
390
 
        }
391
 
    }
392
 
 
393
 
});
394
 
 
395
 
});</pre>
396
 
 
397
 
 
398
 
<p>
399
 
As demonstrated in the example, the function passed as the value of the
400
 
<code>fn</code> property is passed a reference to the currently focused
401
 
descendant.  That Node reference is then used to return the Node to which the
402
 
class name is to be applied.
403
 
</p>
404
 
 
405
 
<h3 id="managing-focus">Managing Focus</h3>
406
 
 
407
 
<p>
408
 
The Focus Manager Node Plugin manages focus among its defined descendants as an
409
 
atomic operation: the Focus Manager's
410
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focused"><code>focused</code></a>
411
 
configuration attribute is set to
412
 
<code>true</code> the first time any descendant is focused, and is set to
413
 
<code>false</code> the first time no descendant is focused.  The
414
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focused"><code>focused</code></a>
415
 
configuration attribute is read only, and is set either via user interaction
416
 
(the user focuses one of the defined descendant elements using either the
417
 
keyboard or the mouse), or programmatically via the
418
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#method_focus"><code>focus</code></a>
419
 
and
420
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#method_blur"><code>blur</code></a>
421
 
methods, as illustrated in the following example:
422
 
</p>
423
 
 
424
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function(Y) {
425
 
 
426
 
&#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
427
 
&#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
428
 
&#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
429
 
 
430
 
var toolbar = Y.one(&quot;#toolbar-1&quot;);
431
 
 
432
 
toolbar.plug(Y.Plugin.NodeFocusManager, {
433
 
 
434
 
    &#x2F;&#x2F; CSS Selector indicating the descendant Nodes whose focus to manage
435
 
 
436
 
    descendants: &quot;input&quot;,
437
 
 
438
 
    &#x2F;&#x2F;  Move focus the buttons in the toolbar by pressing the left and
439
 
    &#x2F;&#x2F;  right arrow keys
440
 
 
441
 
    keys: { next: &quot;down:39&quot;, previous: &quot;down:37&quot; }
442
 
 
443
 
});
444
 
 
445
 
 
446
 
&#x2F;&#x2F;  Listen for when the &quot;focused&quot; attribute changes
447
 
 
448
 
toolbar.focusManager.after(&quot;focusedChange&quot;, function (event) {
449
 
 
450
 
    if (event.newVal) {
451
 
        Y.log(&quot;The toolbar has focus&quot;);
452
 
    }
453
 
    else {
454
 
        Y.log(&quot;The toolbar has lost focus&quot;);
455
 
    }
456
 
 
457
 
});
458
 
 
459
 
&#x2F;&#x2F;  Focus the current active descendant, setting the &quot;focused&quot; attribute to true
460
 
 
461
 
toolbar.focusManager.focus();
462
 
 
463
 
&#x2F;&#x2F;  Focus the second descendant in the toolbar, making it the active descendant
464
 
&#x2F;&#x2F;  (this won&#x27;t change the &quot;focused&quot; attribute, meaning the &quot;focusedChange&quot;
465
 
&#x2F;&#x2F;  event handler won&#x27;t be called.)
466
 
 
467
 
toolbar.focusManager.focus(1);
468
 
 
469
 
 
470
 
&#x2F;&#x2F;  Blur the current active descendant, setting the &quot;focused&quot; attribute to false
471
 
&#x2F;&#x2F;  and causing the &quot;focusedChange&quot; event handler to be called.
472
 
 
473
 
toolbar.focusManager.blur();
474
 
 
475
 
});</pre>
476
 
 
477
 
 
478
 
<h3 id="best-practices">Best Practices</h3>
479
 
 
480
 
<p>
481
 
While it is possible to use the Focus Manager Node Plugin to manage focus
482
 
among descendants of any type, it is recommended to use it with elements that
483
 
are natively in the the browser's default tab flow. Doing so provides two primary
484
 
benefits:  The first is that your code will work in all popular browsers, since some browsers don't support
485
 
the
486
 
<a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex" title="Forms in HTML documents"><code>tabIndex</code></a>
487
 
attribute on all elements.  Sticking with the elements that natively support <a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex" title="Forms in HTML documents"><code>tabIndex</code></a>
488
 
as defined in the HTML 4.01 specification will ensure better cross-browser
489
 
keyboard support.
490
 
</p>
491
 
 
492
 
<p>The second benefit is that by using the set of natively
493
 
focusable HTML elements, users of screen readers will still perceive the
494
 
Focus Manager's defined descendants as actionable/clickable elements.</p>
495
 
</div>
496
 
        </div>
497
 
 
498
 
        <div id="sidebar" class="yui3-u">
499
 
            
500
 
                <div id="toc" class="sidebox">
501
 
                    <div class="hd">
502
 
                        <h2 class="no-toc">Table of Contents</h2>
503
 
                    </div>
504
 
 
505
 
                    <div class="bd">
506
 
                        <ul class="toc">
507
 
<li>
508
 
<a href="#getting-started">Getting Started</a>
509
 
</li>
510
 
<li>
511
 
<a href="#using-the-focus-manager-node-plugin">Using the Focus Manager Node Plugin</a>
512
 
<ul class="toc">
513
 
<li>
514
 
<a href="#activedescendant-attribute">The <code>activeDescendant</code> Attribute</a>
515
 
</li>
516
 
<li>
517
 
<a href="#styling-focus">Styling Focus</a>
518
 
</li>
519
 
<li>
520
 
<a href="#managing-focus">Managing Focus</a>
521
 
</li>
522
 
<li>
523
 
<a href="#best-practices">Best Practices</a>
524
 
</li>
525
 
</ul>
526
 
</li>
527
 
</ul>
528
 
                    </div>
529
 
                </div>
530
 
            
531
 
 
532
 
            
533
 
                <div class="sidebox">
534
 
                    <div class="hd">
535
 
                        <h2 class="no-toc">Examples</h2>
536
 
                    </div>
537
 
 
538
 
                    <div class="bd">
539
 
                        <ul class="examples">
540
 
                            
541
 
                                
542
 
                                    <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
543
 
                                        <a href="node-focusmanager-1.html">Accessible Toolbar</a>
544
 
                                    </li>
545
 
                                
546
 
                            
547
 
                                
548
 
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
549
 
                                        <a href="node-focusmanager-3.html">Accessible Menu Button</a>
550
 
                                    </li>
551
 
                                
552
 
                            
553
 
                        </ul>
554
 
                    </div>
555
 
                </div>
556
 
            
557
 
 
558
 
            
559
 
        </div>
560
 
    </div>
561
 
</div>
562
 
 
563
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
564
 
<script>prettyPrint();</script>
565
 
 
566
 
</body>
567
 
</html>