;
36 |
37 | parent:any;
38 |
39 | domElement:any;
40 |
41 | blurTimer:any;
42 |
43 | change:EventEmitter;
44 |
45 | role: string;
46 |
47 | _value: string;
48 |
49 | styleWidth: string;
50 | styleTop: string;
51 | styleLeft: string;
52 |
53 | constructor(el: ElementRef,
54 | @Optional() @Parent() parentMenuitem: AriaMenuitem) {
55 |
56 | // remember our DOM element
57 | this.domElement = el.domElement;
58 |
59 | this.change = new EventEmitter();
60 | this.parent = parentMenuitem;
61 | if (this.parent) {
62 | this.parent.registerChild(this);
63 | }
64 | this.children = [];
65 |
66 | this.role = 'menu';
67 | }
68 | /*
69 | * Our API
70 | */
71 | registerChild(child) {
72 | this.children.push(child);
73 | return (this.parent && this.children.length === 1);
74 | }
75 | takeFocus(width, left, top, height) {
76 | var that = this;
77 | this.value = '';
78 | this.open = true;
79 | this.styleWidth = width + 'px';
80 | this.styleLeft = left + 'px';
81 | this.styleTop = top + height + 'px';
82 | this.children.forEach(function (child) {
83 | child.removeFocus();
84 | });
85 | setTimeout(function () {
86 | // required because the class changes are async
87 | // see https://github.com/angular/angular/issues/2090
88 | that.children[0].takeFocus();
89 | }, 0);
90 | }
91 | removeFocus() {
92 | this.open = false;
93 | }
94 | setSelected(child) {
95 | this.children.forEach(function (ch) {
96 | if (ch !== child) {
97 | ch.selected = false;
98 | }
99 | });
100 | if (this.parent !== null) {
101 | this.parent.selectAndClose();
102 | }
103 | }
104 | close(dontFocus) {
105 | this.parent.close(dontFocus);
106 | }
107 | /*
108 | * Helper functions
109 | */
110 | _focusNext(e) {
111 | var index;
112 | var children = this.children.filter(function(child) {
113 | return child.visible;
114 | });
115 | children.forEach(function (child, ind) {
116 | if (child.isMyDomOrLabel(e.target)) {
117 | index = ind;
118 | }
119 | });
120 | children[index].removeFocus();
121 | if (index < children.length - 1) {
122 | index += 1;
123 | } else {
124 | index = 0;
125 | }
126 | children[index].takeFocus();
127 | }
128 | _focusPrev(e) {
129 | var index;
130 | var children = this.children.filter(function(child) {
131 | return child.visible;
132 | });
133 | children.forEach(function (child, ind) {
134 | if (child.isMyDomOrLabel(e.target)) {
135 | index = ind;
136 | }
137 | });
138 | children[index].removeFocus();
139 | if (index > 0) {
140 | index -= 1;
141 | } else {
142 | index = children.length - 1;
143 | }
144 | children[index].takeFocus();
145 | }
146 | /*
147 | * event handlers
148 | */
149 | handleClick(e) {
150 | var children = this.children.filter(function (child) {
151 | return child.visible;
152 | });
153 | children.forEach(function (child) {
154 | if (child.isMyDomOrLabel(e.target)) {
155 | child.selected = true;
156 | child.takeFocus();
157 | } else {
158 | child.selected = false;
159 | child.removeFocus();
160 | }
161 | });
162 | e.stopPropagation(); // stop clicks from going outside
163 | e.preventDefault();
164 | }
165 | handleKeyDown(e) {
166 | var which = e.which || e.keyCode;
167 | var handled = false;
168 | var keysWeHandle = [KEY_RIGHT,KEY_LEFT,KEY_ESC,KEY_UP,KEY_DOWN,KEY_ENTER];
169 |
170 | if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) {
171 | return;
172 | }
173 | if (keysWeHandle.indexOf(which) !== -1) {
174 | switch(which) {
175 | case KEY_UP:
176 | this._focusPrev(e);
177 | handled = true;
178 | break;
179 | case KEY_RIGHT:
180 | // TODO: handle sub-sub-menu
181 | handled = true;
182 | break;
183 | case KEY_LEFT:
184 | case KEY_ESC:
185 | this.close();
186 | handled = true;
187 | break;
188 | case KEY_DOWN:
189 | this._focusNext(e);
190 | handled = true;
191 | break;
192 | case KEY_ENTER:
193 | this.handleClick(e);
194 | handled = true;
195 | break;
196 | }
197 | if (handled) {
198 | e.preventDefault();
199 | e.stopPropagation();
200 | }
201 | }
202 | }
203 | blur() {
204 | var that = this;
205 | // TODO: commented out until this bug gets fixed https://github.com/angular/angular/issues/1050
206 | if (!this.blurTimer) {
207 | this.blurTimer = setTimeout(function () {
208 | that.close(true);
209 | this.blurTimer = undefined;
210 | }, 500);
211 | }
212 | }
213 | focus() {
214 | if (this.blurTimer) {
215 | clearTimeout(this.blurTimer);
216 | this.blurTimer = undefined;
217 | }
218 | }
219 | /*
220 | * Property getters and setters
221 | */
222 | /*
223 | * value property
224 | */
225 | set value(value) {
226 | this._value = value;
227 | if (value !== '') {
228 | if (this.parent === null) {
229 | // If the menu is standalone
230 | this.change.next(null);
231 | } else {
232 | // cascade the value
233 | this.parent.value = value;
234 | }
235 | }
236 | }
237 | get value() {
238 | return this._value;
239 | }
240 | /*
241 | * visible property
242 | */
243 | get visible() {
244 | return !(!this.domElement.offsetWidth || !this.domElement.offsetHeight)
245 | }
246 | }
247 |
248 |
--------------------------------------------------------------------------------
/native/aria-menu.html:
--------------------------------------------------------------------------------
1 |
11 |
28 |
224 |
--------------------------------------------------------------------------------
/polymer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Examples of Accessible Polymer ARIA Menus
9 |
10 |
87 |
88 |
89 | Examples of Accessible Polymer ARIA Menus
90 |
91 | This page contains examples of an accessible Polymer ARIA menu component. The first one is a popup menu activated by the "popup" button. The popup example also shows how to custom-style a web component within an emulated and native web components environment. The links between the examples allow for easy testing of focus management.
92 |
93 |
94 |
95 |
96 |
97 |
110 |
120 |
121 |
122 | This next example shows a two-level menu with a menu bar. It is using the default styling of the component and is using the full screen width.
123 |
124 |
162 |
163 |
164 | This final example shows the same two-level menu. It is using custom styling of and is showing responsive sizing of the component (note the sub-menu does not respond to screen size changes dynamically, but only on page load).
165 |
166 |
167 |
205 |
206 |
207 |
208 |
--------------------------------------------------------------------------------
/polymer/aria-menuitem.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
6 |
8 |
9 |
10 |
307 |
--------------------------------------------------------------------------------
/native/aria-menuitem.html:
--------------------------------------------------------------------------------
1 |
47 |
383 |
--------------------------------------------------------------------------------