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
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<meta http-equiv="content-type" content="text/html; charset=utf-8">
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove/*margin and padding on body element
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove can introduce errors in determining
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove element position and are not recommended;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove we turn them off as a foundation for YUI
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove CSS treatments. */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css" />
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<script type="text/javascript" src="/build/yui/yui-min.js"></script>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--begin custom header content for this example-->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: solid 1px #999;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #ccc;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: .25em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove overflow: auto;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-width: 1px 0;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-style: solid;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-color: #808080;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #dfdfdf;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: .25em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove font-size: 85%; /* 11px */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .first-child {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin-left: .5em;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button span {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-width: 0 1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-style: solid;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border-color: #808080;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove margin: 0 -1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *position: relative; /* Necessary to get negative margins working in IE */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *left: -1px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button span span {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove display: inline-block;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: solid 1px #b6b6b6;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *position: static;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove border: none;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove padding: 4px 4px 4px 24px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *overflow: visible; /* Remove superfluous padding for IE */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background: transparent url(assets/icons.png) no-repeat;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #add-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -102px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -100px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #edit-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -78px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -76px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #print-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -54px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -52px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #open-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -30px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -28px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #delete-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -126px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -124px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove #save-btn input {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-position: 4px -6px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove *background-position: 4px -4px;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove /* Augment the browser's default styling of the focus state by changing the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background color of the button when it is focused. */
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove .yui3-toolbar-button input.focus {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove background-color: #B3D4FF;
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--end custom header content for this example-->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan GroveThis example illustrates how to create an accessible toolbar using the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan GroveFocus Manager Node Plugin and Node's support for the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove <span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove YUI().use("node-focusmanager", function(Y) {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Retrieve the Node instance representing the toolbar
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // (<div id="toolbar">) and call the "plug" method
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // passing in a reference to the Focus Manager Node Plugin.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove var toolbar = Y.Node.get("#toolbar-1");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove descendants: "input",
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove keys: { next: "down:39", // Right arrow
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove previous: "down:37" }, // Left arrow
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove focusClass: "focus",
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove circular: false
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Set the ARIA "role" attribute of the Node instance representing the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // toolbar to "toolbar" to improve the semantics of the markup for
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // users of screen readers.
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove toolbar.set("role", "toolbar");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // Listen for the click event on each button via the use of the
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove // "delegate" method
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove toolbar.delegate("click", function (event) {
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove alert("You clicked " + this.query("input").get("value"));
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove }, ".yui3-toolbar-button");
b6b4e00bb6e7964b43a8aa227aaeb52200c9f7a7Ryan Grove<!--END SOURCE CODE FOR EXAMPLE =============================== -->