← 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/node-focusmanager-1.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/node-focusmanager-1.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Accessible Toolbar</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>Example: Accessible Toolbar</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
 
This example illustrates how to create an accessible toolbar using the
25
 
Focus Manager Node Plugin and Node's support for the
26
 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
27
 
</p>
28
 
</div>
29
 
 
30
 
<div class="example">
31
 
    <style scoped>
32
 
    .yui3-toolbar {
33
 
        border: solid 1px #999;
34
 
        background-color: #ccc;
35
 
        margin: .25em;
36
 
        overflow: auto;
37
 
    }
38
 
 
39
 
    .yui3-toolbar-button {
40
 
        display: inline-block;
41
 
        border-width: 1px 0;
42
 
        border-style: solid;
43
 
        border-color: #808080;
44
 
        background-color: #dfdfdf;
45
 
        margin: .25em;
46
 
        font-size: 85%;  /* 11px */
47
 
    }
48
 
 
49
 
    .first-child {
50
 
        margin-left: .5em;
51
 
    }
52
 
 
53
 
    .yui3-toolbar-button span {
54
 
        display: inline-block;
55
 
        border-width: 0 1px;
56
 
        border-style: solid;
57
 
        border-color: #808080;
58
 
        margin: 0 -1px;
59
 
        *position: relative;    /* Necessary to get negative margins working in IE */
60
 
        *left: -1px;
61
 
    }
62
 
 
63
 
    .yui3-toolbar-button span span {
64
 
        display: inline-block;
65
 
        border: solid 1px #b6b6b6;
66
 
        margin: 0;
67
 
        *position: static;
68
 
    }
69
 
 
70
 
    .yui3-toolbar-button input {
71
 
        border: none;
72
 
        margin: 0;
73
 
        padding: 4px 4px 4px 24px;
74
 
        *overflow: visible; /* Remove superfluous padding for IE */
75
 
        background: transparent url(../assets/node-focusmanager/icons.png) no-repeat;
76
 
    }
77
 
 
78
 
    #add-btn input {
79
 
        background-position: 4px -102px;
80
 
        *background-position: 4px -100px;
81
 
    }
82
 
 
83
 
    #edit-btn input {
84
 
        background-position: 4px -78px;
85
 
        *background-position: 4px -76px;
86
 
    }
87
 
 
88
 
    #print-btn input {
89
 
        background-position: 4px -54px;
90
 
        *background-position: 4px -52px;
91
 
    }
92
 
 
93
 
    #open-btn input {
94
 
        background-position: 4px -30px;
95
 
        *background-position: 4px -28px;
96
 
    }
97
 
 
98
 
    #delete-btn input {
99
 
        background-position: 4px -126px;
100
 
        *background-position: 4px -124px;
101
 
    }
102
 
 
103
 
    #save-btn input {
104
 
        background-position: 4px -6px;
105
 
        *background-position: 4px -4px;
106
 
    }
107
 
 
108
 
 
109
 
    /*  Augment the browser's default styling of the focus state by changing the
110
 
        background color of the button when it is focused.  */
111
 
 
112
 
    .yui3-toolbar-button input.focus {
113
 
        background-color: #B3D4FF;
114
 
    }
115
 
    </style>
116
 
 
117
 
    <div id="toolbar-1" class="yui3-toolbar">
118
 
    <span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
119
 
    <span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
120
 
    <span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
121
 
    <span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
122
 
    <span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
123
 
    <span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
124
 
</div>
125
 
 
126
 
<script>
127
 
 
128
 
    YUI().use("node-focusmanager", function (Y) {
129
 
 
130
 
        //  Retrieve the Node instance representing the toolbar
131
 
        //  (<div id="toolbar">) and call the "plug" method
132
 
        //  passing in a reference to the Focus Manager Node Plugin.
133
 
 
134
 
        var toolbar = Y.one("#toolbar-1");
135
 
 
136
 
        toolbar.plug(Y.Plugin.NodeFocusManager, {
137
 
 
138
 
                descendants: "input",
139
 
                keys: { next: "down:39", // Right arrow
140
 
                        previous: "down:37" },  //  Left arrow
141
 
                focusClass: "focus",
142
 
                circular: true
143
 
 
144
 
             });
145
 
 
146
 
 
147
 
        //  Set the ARIA "role" attribute of the Node instance representing the
148
 
        //  toolbar to "toolbar" to improve the semantics of the markup for
149
 
        //  users of screen readers.
150
 
 
151
 
        toolbar.set("role", "toolbar");
152
 
 
153
 
 
154
 
        //  Listen for the click event on each button via the use of the
155
 
        //  "delegate" method
156
 
 
157
 
        toolbar.delegate("click", function (event) {
158
 
 
159
 
            alert("You clicked " + this.one("input").get("value"));
160
 
 
161
 
        }, ".yui3-toolbar-button");
162
 
 
163
 
    });
164
 
 
165
 
</script>
166
 
 
167
 
</div>
168
 
 
169
 
<h2 id="setting-up-the-html">Setting Up the HTML</h2>
170
 
 
171
 
<p>
172
 
Start with a set of <code>&#60;input&#62;</code> elements.  For the
173
 
purpose of this example, the <code>type</code> attribute of each
174
 
button will be set to a value of "button" since they won't be responsible for
175
 
submitting a form.  Each <code>&#60;input&#62;</code> is wrapped by two
176
 
<code>&#60;span&#62;</code>s that serve as decorator elements used to style
177
 
each button with rounded corners.
178
 
</p>
179
 
 
180
 
<pre class="code prettyprint">&lt;div id=&quot;toolbar-1&quot; class=&quot;yui3-toolbar&quot;&gt;
181
 
    &lt;span id=&quot;add-btn&quot; class=&quot;yui3-toolbar-button first-child&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-add&quot; value=&quot;Add&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
182
 
    &lt;span id=&quot;edit-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-edit&quot; value=&quot;Edit&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
183
 
    &lt;span id=&quot;print-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-print&quot; value=&quot;Print&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
184
 
    &lt;span id=&quot;delete-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-delete&quot; value=&quot;Delete&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
185
 
    &lt;span id=&quot;open-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-open&quot; value=&quot;Open&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
186
 
    &lt;span id=&quot;save-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-save&quot; value=&quot;Save&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
187
 
&lt;&#x2F;div&gt;</pre>
188
 
 
189
 
 
190
 
<h2 id="setting-up-the-css">Setting Up the CSS</h2>
191
 
 
192
 
<p>
193
 
Next, each button in the toolbar is styled with rounded corners using a
194
 
combination of the CSS <code>border</code> property along with the use of
195
 
negative margins.  An icon is added to each button using a background image.
196
 
Following the advice of the
197
 
<a href="http://developer.yahoo.com/performance/rules.html">Exceptional Performance team</a>,
198
 
this example uses the technique of
199
 
<a href="http://www.alistapart.com/articles/sprites">CSS Sprites</a>,
200
 
combining all of the icons for each button into a single image to reduce
201
 
HTTP requests.
202
 
</p>
203
 
 
204
 
<pre class="code prettyprint">.yui3-toolbar {
205
 
    border: solid 1px #999;
206
 
    background-color: #ccc;
207
 
    margin: .25em;
208
 
    overflow: auto;
209
 
}
210
 
 
211
 
.yui3-toolbar-button {
212
 
    display: inline-block;
213
 
    border-width: 1px 0;
214
 
    border-style: solid;
215
 
    border-color: #808080;
216
 
    background-color: #dfdfdf;
217
 
    margin: .25em;
218
 
    font-size: 85%;  &#x2F;* 11px *&#x2F;
219
 
}
220
 
 
221
 
.first-child {
222
 
    margin-left: .5em;
223
 
}
224
 
 
225
 
.yui3-toolbar-button span {
226
 
    display: inline-block;
227
 
    border-width: 0 1px;
228
 
    border-style: solid;
229
 
    border-color: #808080;
230
 
    margin: 0 -1px;
231
 
    *position: relative;    &#x2F;* Necessary to get negative margins working in IE *&#x2F;
232
 
    *left: -1px;
233
 
}
234
 
 
235
 
.yui3-toolbar-button span span {
236
 
    display: inline-block;
237
 
    border: solid 1px #b6b6b6;
238
 
    margin: 0;
239
 
    *position: static;
240
 
}
241
 
 
242
 
.yui3-toolbar-button input {
243
 
    border: none;
244
 
    margin: 0;
245
 
    padding: 4px 4px 4px 24px;
246
 
    *overflow: visible; &#x2F;* Remove superfluous padding for IE *&#x2F;
247
 
    background: transparent url(..&#x2F;assets&#x2F;node-focusmanager&#x2F;icons.png) no-repeat;
248
 
}
249
 
 
250
 
#add-btn input {
251
 
    background-position: 4px -102px;
252
 
    *background-position: 4px -100px;
253
 
}
254
 
 
255
 
#edit-btn input {
256
 
    background-position: 4px -78px;
257
 
    *background-position: 4px -76px;
258
 
}
259
 
 
260
 
#print-btn input {
261
 
    background-position: 4px -54px;
262
 
    *background-position: 4px -52px;
263
 
}
264
 
 
265
 
#open-btn input {
266
 
    background-position: 4px -30px;
267
 
    *background-position: 4px -28px;
268
 
}
269
 
 
270
 
#delete-btn input {
271
 
    background-position: 4px -126px;
272
 
    *background-position: 4px -124px;
273
 
}
274
 
 
275
 
#save-btn input {
276
 
    background-position: 4px -6px;
277
 
    *background-position: 4px -4px;
278
 
}</pre>
279
 
 
280
 
 
281
 
<h2 id="initializing-the-focus-manager">Initializing the Focus Manager</h2>
282
 
 
283
 
<p>
284
 
With the toolbar markup and CSS in place, retrieve the Node instance
285
 
representing the toolbar (<code>&#60;div id="toolbar-1"&#62;</code>)
286
 
and call the <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_plug"><code>plug</code></a>
287
 
passing in a reference to the Focus Manager Node Plugin as the first argument,
288
 
and a collection of configuration attributes as the second argument.
289
 
</p>
290
 
 
291
 
<p>
292
 
The Focus Manager's
293
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
294
 
attribute is set to a value of "input", so that only one button in the toolbar
295
 
is in the browser's default tab flow.  This allows users navigating via the
296
 
keyboard to use the tab key to quickly move into and out of the toolbar.  Once
297
 
the toolbar has focus, the user can move focus among each button using the left
298
 
and right arrows keys, as defined by the value of the
299
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
300
 
attribute.  Lastly, the
301
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
302
 
attribute is used to apply a class of <code>focus</code> to each
303
 
<code>&#60;input&#62;</code> when it is focused, making it easy to style the
304
 
focused state in all browsers.
305
 
</p>
306
 
 
307
 
<pre class="code prettyprint">YUI().use(&quot;node-focusmanager&quot;, function (Y) {
308
 
 
309
 
    &#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
310
 
    &#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
311
 
    &#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
312
 
 
313
 
    var toolbar = Y.one(&quot;#toolbar-1&quot;);
314
 
 
315
 
    toolbar.plug(Y.Plugin.NodeFocusManager, {
316
 
 
317
 
            descendants: &quot;input&quot;,
318
 
            keys: { next: &quot;down:39&quot;, &#x2F;&#x2F; Right arrow
319
 
                    previous: &quot;down:37&quot; },  &#x2F;&#x2F;  Left arrow
320
 
            focusClass: &quot;focus&quot;,
321
 
            circular: true
322
 
 
323
 
         });
324
 
 
325
 
 
326
 
    &#x2F;&#x2F;  Set the ARIA &quot;role&quot; attribute of the Node instance representing the
327
 
    &#x2F;&#x2F;  toolbar to &quot;toolbar&quot; to improve the semantics of the markup for
328
 
    &#x2F;&#x2F;  users of screen readers.
329
 
 
330
 
    toolbar.set(&quot;role&quot;, &quot;toolbar&quot;);
331
 
 
332
 
 
333
 
    &#x2F;&#x2F;  Listen for the click event on each button via the use of the
334
 
    &#x2F;&#x2F;  &quot;delegate&quot; method
335
 
 
336
 
    toolbar.delegate(&quot;click&quot;, function (event) {
337
 
 
338
 
        alert(&quot;You clicked &quot; + this.one(&quot;input&quot;).get(&quot;value&quot;));
339
 
 
340
 
    }, &quot;.yui3-toolbar-button&quot;);
341
 
 
342
 
});</pre>
343
 
 
344
 
 
345
 
<h2 id="styling-focus">Styling Focus</h2>
346
 
 
347
 
<p>
348
 
To augment the browser's default styling of the focused state define a CSS
349
 
selector that adds a background color to the
350
 
</p>
351
 
 
352
 
<pre class="code prettyprint">&#x2F;*  Augment the browser&#x27;s default styling of the focus state by changing the
353
 
    background color of the button when it is focused.  *&#x2F;
354
 
 
355
 
.yui3-toolbar-button input.focus {
356
 
    background-color: #B3D4FF;
357
 
}</pre>
358
 
 
359
 
 
360
 
<h2 id="complete-example-source">Complete Example Source</h2>
361
 
 
362
 
<pre class="code prettyprint">&lt;div id=&quot;toolbar-1&quot; class=&quot;yui3-toolbar&quot;&gt;
363
 
    &lt;span id=&quot;add-btn&quot; class=&quot;yui3-toolbar-button first-child&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-add&quot; value=&quot;Add&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
364
 
    &lt;span id=&quot;edit-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-edit&quot; value=&quot;Edit&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
365
 
    &lt;span id=&quot;print-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-print&quot; value=&quot;Print&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
366
 
    &lt;span id=&quot;delete-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-delete&quot; value=&quot;Delete&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
367
 
    &lt;span id=&quot;open-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-open&quot; value=&quot;Open&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
368
 
    &lt;span id=&quot;save-btn&quot; class=&quot;yui3-toolbar-button&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;input type=&quot;button&quot; name=&quot;btn-save&quot; value=&quot;Save&quot;&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;
369
 
&lt;&#x2F;div&gt;
370
 
 
371
 
&lt;script&gt;
372
 
 
373
 
    YUI().use(&quot;node-focusmanager&quot;, function (Y) {
374
 
 
375
 
        &#x2F;&#x2F;  Retrieve the Node instance representing the toolbar
376
 
        &#x2F;&#x2F;  (&lt;div id=&quot;toolbar&quot;&gt;) and call the &quot;plug&quot; method
377
 
        &#x2F;&#x2F;  passing in a reference to the Focus Manager Node Plugin.
378
 
 
379
 
        var toolbar = Y.one(&quot;#toolbar-1&quot;);
380
 
 
381
 
        toolbar.plug(Y.Plugin.NodeFocusManager, {
382
 
 
383
 
                descendants: &quot;input&quot;,
384
 
                keys: { next: &quot;down:39&quot;, &#x2F;&#x2F; Right arrow
385
 
                        previous: &quot;down:37&quot; },  &#x2F;&#x2F;  Left arrow
386
 
                focusClass: &quot;focus&quot;,
387
 
                circular: true
388
 
 
389
 
             });
390
 
 
391
 
 
392
 
        &#x2F;&#x2F;  Set the ARIA &quot;role&quot; attribute of the Node instance representing the
393
 
        &#x2F;&#x2F;  toolbar to &quot;toolbar&quot; to improve the semantics of the markup for
394
 
        &#x2F;&#x2F;  users of screen readers.
395
 
 
396
 
        toolbar.set(&quot;role&quot;, &quot;toolbar&quot;);
397
 
 
398
 
 
399
 
        &#x2F;&#x2F;  Listen for the click event on each button via the use of the
400
 
        &#x2F;&#x2F;  &quot;delegate&quot; method
401
 
 
402
 
        toolbar.delegate(&quot;click&quot;, function (event) {
403
 
 
404
 
            alert(&quot;You clicked &quot; + this.one(&quot;input&quot;).get(&quot;value&quot;));
405
 
 
406
 
        }, &quot;.yui3-toolbar-button&quot;);
407
 
 
408
 
    });
409
 
 
410
 
&lt;&#x2F;script&gt;</pre>
411
 
 
412
 
</div>
413
 
        </div>
414
 
 
415
 
        <div id="sidebar" class="yui3-u">
416
 
            
417
 
                <div id="toc" class="sidebox">
418
 
                    <div class="hd">
419
 
                        <h2 class="no-toc">Table of Contents</h2>
420
 
                    </div>
421
 
 
422
 
                    <div class="bd">
423
 
                        <ul class="toc">
424
 
<li>
425
 
<a href="#setting-up-the-html">Setting Up the HTML</a>
426
 
</li>
427
 
<li>
428
 
<a href="#setting-up-the-css">Setting Up the CSS</a>
429
 
</li>
430
 
<li>
431
 
<a href="#initializing-the-focus-manager">Initializing the Focus Manager</a>
432
 
</li>
433
 
<li>
434
 
<a href="#styling-focus">Styling Focus</a>
435
 
</li>
436
 
<li>
437
 
<a href="#complete-example-source">Complete Example Source</a>
438
 
</li>
439
 
</ul>
440
 
                    </div>
441
 
                </div>
442
 
            
443
 
 
444
 
            
445
 
                <div class="sidebox">
446
 
                    <div class="hd">
447
 
                        <h2 class="no-toc">Examples</h2>
448
 
                    </div>
449
 
 
450
 
                    <div class="bd">
451
 
                        <ul class="examples">
452
 
                            
453
 
                                
454
 
                                    <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.">
455
 
                                        <a href="node-focusmanager-1.html">Accessible Toolbar</a>
456
 
                                    </li>
457
 
                                
458
 
                            
459
 
                                
460
 
                                    <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.">
461
 
                                        <a href="node-focusmanager-3.html">Accessible Menu Button</a>
462
 
                                    </li>
463
 
                                
464
 
                            
465
 
                        </ul>
466
 
                    </div>
467
 
                </div>
468
 
            
469
 
 
470
 
            
471
 
        </div>
472
 
    </div>
473
 
</div>
474
 
 
475
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
476
 
<script>prettyPrint();</script>
477
 
 
478
 
</body>
479
 
</html>