← 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-3.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-3.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Accessible Menu Button</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 Menu Button</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 use the Focus Manager Node Plugin,
25
 
    Event's <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_delegate">delegation support</a> and
26
 
    <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_mouseenter">mouseenter</a> event, along with
27
 
    the <a href="../overlay/index.html">Overlay widget</a> and Node's support for the
28
 
    <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> to
29
 
    create an accessible menu button.
30
 
    </p>
31
 
</div>
32
 
 
33
 
<div class="example">
34
 
    <style scoped>
35
 
        /*  The following two styles are necessary to override style rules in the
36
 
            YUI CSS file. */
37
 
 
38
 
        .example ul {
39
 
            margin: 0;
40
 
        }
41
 
 
42
 
        .example a:hover {
43
 
            text-decoration: none;
44
 
        }
45
 
 
46
 
 
47
 
        /*  Hide the button and list while it is being transformed into a menu button.  */
48
 
        .yui3-js-enabled .yui3-menubutton-loading #menu-1,
49
 
        .yui3-js-enabled .yui3-menubutton-loading #button-1 {
50
 
            display: none;
51
 
        }
52
 
 
53
 
    </style>
54
 
 
55
 
    <div class="yui3-menubutton-loading">
56
 
    <a id="button-1" href="#menu-1"><span><span>Move To</span></span></a>
57
 
    <div id="menu-1">
58
 
        <ul>
59
 
            <li><input type="button" name="button-1" value="Inbox"></li>
60
 
            <li><input type="button" name="button-2" value="Archive"></li>
61
 
            <li><input type="button" name="button-3" value="Trash"></li>
62
 
        </ul>
63
 
    </div>
64
 
</div>
65
 
 
66
 
<script>
67
 
YUI({
68
 
    modules: {
69
 
        "menubuttoncss": {
70
 
            type: "css",
71
 
            fullpath: "../assets/node-focusmanager/menubutton.css"
72
 
        },
73
 
        "menubuttonjs": {
74
 
            type: "js",
75
 
            fullpath: "../assets/node-focusmanager/menubutton.js",
76
 
            requires: ["menubuttoncss", "node-focusmanager", "node-event-simulate", "overlay"]
77
 
        }
78
 
    }
79
 
}).use("menubuttonjs");
80
 
</script>
81
 
 
82
 
</div>
83
 
 
84
 
<h2 id="setting-up-the-html">Setting Up the HTML</h2>
85
 
 
86
 
<p>
87
 
For a menu button, start with an <code>&#60;a&#62;</code> element whose
88
 
<code>href</code> attribute is set to the id of an <code>&#60;div&#62;</code>
89
 
that wraps a list of <code>&#60;input&#62;</code> elements.
90
 
Therefore, without JavaScript and CSS, the menu button is simply an in-page
91
 
link to a set of additional buttons.
92
 
</p>
93
 
 
94
 
<pre class="code prettyprint">&lt;div class=&quot;yui3-menubutton-loading&quot;&gt;
95
 
    &lt;a id=&quot;button-1&quot; href=&quot;#menu-1&quot;&gt;&lt;span&gt;&lt;span&gt;Move To&lt;&#x2F;span&gt;&lt;&#x2F;span&gt;&lt;&#x2F;a&gt;
96
 
    &lt;div id=&quot;menu-1&quot;&gt;
97
 
        &lt;ul&gt;
98
 
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-1&quot; value=&quot;Inbox&quot;&gt;&lt;&#x2F;li&gt;
99
 
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-2&quot; value=&quot;Archive&quot;&gt;&lt;&#x2F;li&gt;
100
 
            &lt;li&gt;&lt;input type=&quot;button&quot; name=&quot;button-3&quot; value=&quot;Trash&quot;&gt;&lt;&#x2F;li&gt;
101
 
        &lt;&#x2F;ul&gt;
102
 
    &lt;&#x2F;div&gt;
103
 
&lt;&#x2F;div&gt;</pre>
104
 
 
105
 
 
106
 
<h2 id="progressive-enhancement">Progressive Enhancement</h2>
107
 
 
108
 
<p>
109
 
To account for the scenario where the user has CSS enabled in their browser but JavaScript
110
 
is disabled, the CSS used to style the menu button will be loaded via JavaScript
111
 
using the YUI instance's <a href="../yui/index.html#loader">built-in Loader</a>.
112
 
</p>
113
 
 
114
 
<pre class="code prettyprint">YUI({
115
 
    modules: {
116
 
        &quot;menubuttoncss&quot;: {
117
 
            type: &quot;css&quot;,
118
 
            fullpath: &quot;..&#x2F;assets&#x2F;node-focusmanager&#x2F;menubutton.css&quot;
119
 
        },
120
 
        &quot;menubuttonjs&quot;: {
121
 
            type: &quot;js&quot;,
122
 
            fullpath: &quot;..&#x2F;assets&#x2F;node-focusmanager&#x2F;menubutton.js&quot;,
123
 
            requires: [&quot;menubuttoncss&quot;, &quot;node-focusmanager&quot;, &quot;node-event-simulate&quot;, &quot;overlay&quot;]
124
 
        }
125
 
    }
126
 
}).use(&quot;menubuttonjs&quot;);</pre>
127
 
 
128
 
 
129
 
<p>
130
 
To prevent the user from seeing a flash unstyled content when JavaScript is enabled,
131
 
a style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily
132
 
hide the markup while the JavaScript and CSS are in the process of loading.  For more on using the
133
 
<code>yui3-js-enabled</code> class name, see the
134
 
<a href="../widget/index.html#progressive">Hiding Progressively Enhanced Markup</a> section of the
135
 
<a href="../widget/index.html">YUI Widget landing page</a>.
136
 
</p>
137
 
 
138
 
<pre class="code prettyprint">&#x2F;*  Hide the button and list while it is being transformed into a menu button.  *&#x2F;
139
 
 
140
 
.yui3-js-enabled .yui3-menubutton-loading #menu-1,
141
 
.yui3-js-enabled .yui3-menubutton-loading #button-1 {
142
 
    display: none;
143
 
}</pre>
144
 
 
145
 
 
146
 
<h2 id="aria-support">ARIA Support</h2>
147
 
 
148
 
<p>
149
 
Through the use of CSS and JavaScript the HTML for the menu button can be
150
 
transformed into something that looks and behaves like a desktop menu button,
151
 
but users of screen readers won't perceive it as an atomic widget, but rather
152
 
simply as a set of HTML elements.  However, through the application
153
 
of the
154
 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, it is
155
 
possible to improve the semantics of the markup such that users of screen
156
 
readers perceive it as a menu button control.
157
 
</p>
158
 
 
159
 
<h2 id="keyboard-functionality">Keyboard Functionality</h2>
160
 
 
161
 
<p>
162
 
The keyboard functionality for the button's menu will be provided by the Focus
163
 
Manager Node Plugin.  The Focus Manager's
164
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
165
 
attribute is set to a value of "input", so that only one menuitem in the
166
 
button's menu  is in the browser's default tab flow.  This allows users
167
 
navigating via the keyboard to use the tab key to quickly move into and out of
168
 
the menu.  Once the menu has focus, the user can move focus among each menuitem
169
 
using the up and down arrows keys, as defined by the value of the
170
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
171
 
attribute.  The
172
 
<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
173
 
attribute is used to apply a class of <code>yui-menuitem-active</code> to
174
 
the parent <code>&#60;li&#62;</code> of each
175
 
<code>&#60;input&#62;</code> when it is focused, making it easy to style the
176
 
menuitem's focused state in all browsers.
177
 
 
178
 
<pre class="code prettyprint">YUI().use(&quot;*&quot;, function (Y) {
179
 
 
180
 
    var menuButton = Y.one(&quot;#button-1&quot;),
181
 
        menu;
182
 
 
183
 
 
184
 
    var initMenu = function () {
185
 
 
186
 
        menu = new Y.Overlay({
187
 
            contentBox: &quot;#menu-1&quot;,
188
 
            visible: false,
189
 
            tabIndex: null
190
 
        });
191
 
 
192
 
        menu.render();
193
 
 
194
 
 
195
 
        Y.one(&quot;#menu-1&quot;).setStyle(&quot;display&quot;, &quot;&quot;);
196
 
 
197
 
        var boundingBox = menu.get(&quot;boundingBox&quot;),
198
 
            contentBox = menu.get(&quot;contentBox&quot;);
199
 
 
200
 
        boundingBox.addClass(&quot;yui3-buttonmenu&quot;);
201
 
        contentBox.addClass(&quot;yui3-buttonmenu-content&quot;);
202
 
 
203
 
 
204
 
        &#x2F;&#x2F; Append a decorator element to the bounding box to render the shadow.
205
 
 
206
 
        boundingBox.append(&#x27;&lt;div class=&quot;yui3-menu-shadow&quot;&gt;&lt;&#x2F;div&gt;&#x27;);
207
 
 
208
 
 
209
 
        &#x2F;&#x2F;  Apply the ARIA roles, states and properties to the menu.
210
 
 
211
 
        boundingBox.setAttrs({
212
 
            role: &quot;menu&quot;,
213
 
            &quot;aria-labelledby&quot;: menuLabelID
214
 
        });
215
 
 
216
 
        boundingBox.all(&quot;input&quot;).set(&quot;role&quot;, &quot;menuitem&quot;);
217
 
 
218
 
 
219
 
        &#x2F;&#x2F;  For NVDA: Add the role of &quot;presentation&quot; to each LI
220
 
        &#x2F;&#x2F;  element to prevent NVDA from announcing the
221
 
        &#x2F;&#x2F;  &quot;listitem&quot; role.
222
 
 
223
 
        boundingBox.all(&quot;div,ul,li&quot;).set(&quot;role&quot;, &quot;presentation&quot;);
224
 
 
225
 
 
226
 
        &#x2F;&#x2F;  Use the FocusManager Node Plugin to manage the focusability
227
 
        &#x2F;&#x2F;  of each menuitem in the menu.
228
 
 
229
 
        contentBox.plug(Y.Plugin.NodeFocusManager, {
230
 
 
231
 
                descendants: &quot;input&quot;,
232
 
                keys: { next: &quot;down:40&quot;, &#x2F;&#x2F; Down arrow
233
 
                        previous: &quot;down:38&quot; },  &#x2F;&#x2F; Up arrow
234
 
                focusClass: {
235
 
                    className: &quot;yui3-menuitem-active&quot;,
236
 
                    fn: function (node) {
237
 
                        return node.get(&quot;parentNode&quot;);
238
 
                    }
239
 
                },
240
 
                circular: true
241
 
 
242
 
            });
243
 
 
244
 
 
245
 
        &#x2F;&#x2F;  Subscribe to the change event for the &quot;focused&quot; attribute
246
 
        &#x2F;&#x2F;  to listen for when the menu initially gains focus, and
247
 
        &#x2F;&#x2F;  when the menu has lost focus completely.
248
 
 
249
 
        contentBox.focusManager.after(&quot;focusedChange&quot;, function (event) {
250
 
 
251
 
            if (!event.newVal) {    &#x2F;&#x2F; The menu has lost focus
252
 
 
253
 
                &#x2F;&#x2F;  Set the &quot;activeDescendant&quot; attribute to 0 when the
254
 
                &#x2F;&#x2F;  menu is hidden so that the user can tab from the
255
 
                &#x2F;&#x2F;  button to the first item in the menu the next time
256
 
                &#x2F;&#x2F;  the menu is made visible.
257
 
 
258
 
                this.set(&quot;activeDescendant&quot;, 0);
259
 
 
260
 
            }
261
 
 
262
 
        });
263
 
 
264
 
 
265
 
        &#x2F;&#x2F;  Hide the button&#x27;s menu if the user presses the escape key
266
 
        &#x2F;&#x2F;  while focused either on the button or its menu.
267
 
 
268
 
        Y.on(&quot;key&quot;, function () {
269
 
 
270
 
            menu.hide();
271
 
            menuButton.focus();
272
 
 
273
 
        }, [menuButton, boundingBox] ,&quot;down:27&quot;);
274
 
 
275
 
 
276
 
        if (Y.UA.ie === 6) {
277
 
 
278
 
            &#x2F;&#x2F;  Set the width and height of the menu&#x27;s bounding box -
279
 
            &#x2F;&#x2F;  this is necessary for IE 6 so that the CSS for the
280
 
            &#x2F;&#x2F;  shadow element can simply set the shadow&#x27;s width and
281
 
            &#x2F;&#x2F;  height to 100% to ensure that dimensions of the shadow
282
 
            &#x2F;&#x2F;  are always sync&#x27;d to the that of its parent menu.
283
 
 
284
 
            menu.on(&quot;visibleChange&quot;, function (event) {
285
 
 
286
 
                if (event.newVal) {
287
 
 
288
 
                    boundingBox.setStyles({ height: &quot;&quot;, width: &quot;&quot; });
289
 
 
290
 
                    boundingBox.setStyles({
291
 
                        height: (boundingBox.get(&quot;offsetHeight&quot;) + &quot;px&quot;),
292
 
                        width: (boundingBox.get(&quot;offsetWidth&quot;) + &quot;px&quot;) });
293
 
 
294
 
                }
295
 
 
296
 
            });
297
 
 
298
 
        }
299
 
 
300
 
 
301
 
        menu.after(&quot;visibleChange&quot;, function (event) {
302
 
 
303
 
            var bVisible = event.newVal;
304
 
 
305
 
            &#x2F;&#x2F;  Focus the first item when the menu is made visible
306
 
            &#x2F;&#x2F;  to allow users to navigate the menu via the keyboard
307
 
 
308
 
            if (bVisible) {
309
 
 
310
 
                &#x2F;&#x2F;  Need to set focus via a timer for Webkit and Opera
311
 
                Y.Lang.later(0, contentBox.focusManager, contentBox.focusManager.focus);
312
 
 
313
 
            }
314
 
 
315
 
            boundingBox.set(&quot;aria-hidden&quot;, (!bVisible));
316
 
 
317
 
        });
318
 
 
319
 
 
320
 
        &#x2F;&#x2F;  Hide the menu when one of menu items is clicked.
321
 
 
322
 
        boundingBox.delegate(&quot;click&quot;, function (event) {
323
 
 
324
 
            alert(&quot;You clicked &quot; + this.one(&quot;input&quot;).get(&quot;value&quot;));
325
 
 
326
 
            contentBox.focusManager.blur();
327
 
            menu.hide();
328
 
 
329
 
        }, &quot;li&quot;);
330
 
 
331
 
 
332
 
        &#x2F;&#x2F;  Focus each menuitem as the user moves the mouse over
333
 
        &#x2F;&#x2F;  the menu.
334
 
 
335
 
        boundingBox.delegate(&quot;mouseenter&quot;, function (event) {
336
 
 
337
 
            var focusManager = contentBox.focusManager;
338
 
 
339
 
            if (focusManager.get(&quot;focused&quot;)) {
340
 
                focusManager.focus(this.one(&quot;input&quot;));
341
 
            }
342
 
 
343
 
        }, &quot;li&quot;);
344
 
 
345
 
 
346
 
        &#x2F;&#x2F;  Hide the menu if the user clicks outside of it or if the
347
 
        &#x2F;&#x2F;  user doesn&#x27;t click on the button
348
 
 
349
 
        boundingBox.get(&quot;ownerDocument&quot;).on(&quot;mousedown&quot;, function (event) {
350
 
 
351
 
            var oTarget = event.target;
352
 
 
353
 
            if (!oTarget.compareTo(menuButton) &amp;&amp;
354
 
                !menuButton.contains(oTarget) &amp;&amp;
355
 
                !oTarget.compareTo(boundingBox) &amp;&amp;
356
 
                !boundingBox.contains(oTarget)) {
357
 
 
358
 
                menu.hide();
359
 
 
360
 
            }
361
 
 
362
 
        });
363
 
 
364
 
    };
365
 
 
366
 
 
367
 
    menuButton.addClass(&quot;yui3-menubutton&quot;);
368
 
 
369
 
 
370
 
    &#x2F;&#x2F;  Hide the list until it is transformed into a menu
371
 
 
372
 
    Y.one(&quot;#menu-1&quot;).setStyle(&quot;display&quot;, &quot;none&quot;);
373
 
 
374
 
 
375
 
    &#x2F;&#x2F;  Remove the &quot;yui3-menubutton-loading&quot; class from the parent container
376
 
    &#x2F;&#x2F;  now that the necessary YUI dependencies are loaded and the
377
 
    &#x2F;&#x2F;  menu button has been skinned.
378
 
 
379
 
    menuButton.ancestor(&quot;.yui3-menubutton-loading&quot;).removeClass(&quot;yui3-menubutton-loading&quot;);
380
 
 
381
 
 
382
 
    &#x2F;&#x2F;  Apply the ARIA roles, states and properties to the anchor.
383
 
 
384
 
    menuButton.setAttrs({
385
 
        role: &quot;button&quot;,
386
 
        &quot;aria-haspopup&quot;: true
387
 
    });
388
 
 
389
 
 
390
 
    &#x2F;&#x2F;  Remove the &quot;href&quot; attribute from the anchor element to
391
 
    &#x2F;&#x2F;  prevent JAWS and NVDA from reading the value of the &quot;href&quot;
392
 
    &#x2F;&#x2F;  attribute when the anchor is focused.
393
 
 
394
 
    if ((Y.UA.gecko || Y.UA.ie) &amp;&amp; navigator.userAgent.indexOf(&quot;Windows&quot;) &gt; -1) {
395
 
 
396
 
        menuButton.removeAttribute(&quot;href&quot;);
397
 
 
398
 
        &#x2F;&#x2F;  Since the anchor&#x27;s &quot;href&quot; attribute has been removed, the
399
 
        &#x2F;&#x2F;  element will not fire the click event in Firefox when the
400
 
        &#x2F;&#x2F;  user presses the enter key.  To fix this, dispatch the
401
 
        &#x2F;&#x2F;  &quot;click&quot; event to the anchor when the user presses the
402
 
        &#x2F;&#x2F;  enter key.
403
 
 
404
 
        Y.on(&quot;key&quot;, function (event) {
405
 
 
406
 
            menuButton.simulate(&quot;click&quot;);
407
 
 
408
 
        }, menuButton, &quot;down:13&quot;);
409
 
 
410
 
    }
411
 
 
412
 
 
413
 
    &#x2F;&#x2F;  Set the &quot;tabIndex&quot; attribute of the anchor element to 0 to
414
 
    &#x2F;&#x2F;  place it in the browser&#x27;s default tab flow.  This is
415
 
    &#x2F;&#x2F;  necessary since 1) anchor elements are not in the default
416
 
    &#x2F;&#x2F;  tab flow in Opera and 2) removing the &quot;href&quot; attribute
417
 
    &#x2F;&#x2F;  prevents the anchor from firing its &quot;click&quot; event
418
 
    &#x2F;&#x2F;  in Firefox.
419
 
 
420
 
    menuButton.set(&quot;tabIndex&quot;, 0);
421
 
 
422
 
    &#x2F;&#x2F;  Since there is some intermediary markup (&lt;span&gt;s) between the anchor element with the role
423
 
    &#x2F;&#x2F;  of &quot;button&quot; applied and the text label for the anchor - we need to use the
424
 
    &#x2F;&#x2F;  &quot;aria-labelledby&quot; attribute to ensure that screen readers announce the text label for the
425
 
    &#x2F;&#x2F;  button.
426
 
 
427
 
    var menuLabel = menuButton.one(&quot;span span&quot;),
428
 
        menuLabelID = Y.stamp(menuLabel);
429
 
 
430
 
    menuLabel.set(&quot;id&quot;, menuLabelID);
431
 
    menuButton.set(&quot;aria-labelledby&quot;, menuLabelID);
432
 
 
433
 
    var showMenu = function (event) {
434
 
 
435
 
        &#x2F;&#x2F;  For performance: Defer the creation of the menu until
436
 
        &#x2F;&#x2F;  the first time the button is clicked.
437
 
 
438
 
        if (!menu) {
439
 
            initMenu();
440
 
        }
441
 
 
442
 
 
443
 
        if (!menu.get(&quot;visible&quot;)) {
444
 
 
445
 
            menu.set(&quot;align&quot;, {
446
 
                node: menuButton,
447
 
                points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
448
 
            });
449
 
 
450
 
            menu.show();
451
 
 
452
 
        }
453
 
 
454
 
        &#x2F;&#x2F;  Prevent the anchor element from being focused
455
 
        &#x2F;&#x2F;  when the users mouses down on it.
456
 
        event.preventDefault();
457
 
 
458
 
    };
459
 
 
460
 
 
461
 
    &#x2F;&#x2F;  Bind both a &quot;mousedown&quot; and &quot;click&quot; event listener to
462
 
    &#x2F;&#x2F;  ensure the button&#x27;s menu can be invoked using both the
463
 
    &#x2F;&#x2F;  mouse and the keyboard.
464
 
 
465
 
    menuButton.on(&quot;mousedown&quot;, showMenu);
466
 
    menuButton.on(&quot;click&quot;, showMenu);
467
 
 
468
 
});</pre>
469
 
 
470
 
</div>
471
 
        </div>
472
 
 
473
 
        <div id="sidebar" class="yui3-u">
474
 
            
475
 
                <div id="toc" class="sidebox">
476
 
                    <div class="hd">
477
 
                        <h2 class="no-toc">Table of Contents</h2>
478
 
                    </div>
479
 
 
480
 
                    <div class="bd">
481
 
                        <ul class="toc">
482
 
<li>
483
 
<a href="#setting-up-the-html">Setting Up the HTML</a>
484
 
</li>
485
 
<li>
486
 
<a href="#progressive-enhancement">Progressive Enhancement</a>
487
 
</li>
488
 
<li>
489
 
<a href="#aria-support">ARIA Support</a>
490
 
</li>
491
 
<li>
492
 
<a href="#keyboard-functionality">Keyboard Functionality</a>
493
 
</li>
494
 
</ul>
495
 
                    </div>
496
 
                </div>
497
 
            
498
 
 
499
 
            
500
 
                <div class="sidebox">
501
 
                    <div class="hd">
502
 
                        <h2 class="no-toc">Examples</h2>
503
 
                    </div>
504
 
 
505
 
                    <div class="bd">
506
 
                        <ul class="examples">
507
 
                            
508
 
                                
509
 
                                    <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.">
510
 
                                        <a href="node-focusmanager-1.html">Accessible Toolbar</a>
511
 
                                    </li>
512
 
                                
513
 
                            
514
 
                                
515
 
                                    <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.">
516
 
                                        <a href="node-focusmanager-3.html">Accessible Menu Button</a>
517
 
                                    </li>
518
 
                                
519
 
                            
520
 
                        </ul>
521
 
                    </div>
522
 
                </div>
523
 
            
524
 
 
525
 
            
526
 
        </div>
527
 
    </div>
528
 
</div>
529
 
 
530
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
531
 
<script>prettyPrint();</script>
532
 
 
533
 
</body>
534
 
</html>