OLD | NEW |
1 /** | 1 /** |
2 * `Polymer.IronMenuBehavior` implements accessible menu behavior. | 2 * `Polymer.IronMenuBehavior` implements accessible menu behavior. |
3 * | 3 * |
4 * @demo demo/index.html | 4 * @demo demo/index.html |
5 * @polymerBehavior Polymer.IronMenuBehavior | 5 * @polymerBehavior Polymer.IronMenuBehavior |
6 */ | 6 */ |
7 Polymer.IronMenuBehaviorImpl = { | 7 Polymer.IronMenuBehaviorImpl = { |
8 | 8 |
9 properties: { | 9 properties: { |
10 | 10 |
(...skipping 205 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
216 * Handler that is called when the menu receives focus. | 216 * Handler that is called when the menu receives focus. |
217 * | 217 * |
218 * @param {FocusEvent} event A focus event. | 218 * @param {FocusEvent} event A focus event. |
219 */ | 219 */ |
220 _onFocus: function(event) { | 220 _onFocus: function(event) { |
221 if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) { | 221 if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) { |
222 // do not focus the menu itself | 222 // do not focus the menu itself |
223 return; | 223 return; |
224 } | 224 } |
225 | 225 |
| 226 // Do not focus the selected tab if the deepest target is part of the |
| 227 // menu element's local DOM and is focusable. |
| 228 var rootTarget = /** @type {?HTMLElement} */( |
| 229 Polymer.dom(event).rootTarget); |
| 230 if (rootTarget !== this && typeof rootTarget.tabIndex !== "undefined" && !
this.isLightDescendant(rootTarget)) { |
| 231 return; |
| 232 } |
| 233 |
226 this.blur(); | 234 this.blur(); |
227 | 235 |
228 // clear the cached focus item | 236 // clear the cached focus item |
229 this._defaultFocusAsync = this.async(function() { | 237 this._defaultFocusAsync = this.async(function() { |
230 // focus the selected item when the menu receives focus, or the first it
em | 238 // focus the selected item when the menu receives focus, or the first it
em |
231 // if no item is selected | 239 // if no item is selected |
232 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem
s[0]) : this.selectedItem; | 240 var selectedItem = this.multi ? (this.selectedItems && this.selectedItem
s[0]) : this.selectedItem; |
233 | 241 |
234 this._setFocusedItem(null); | 242 this._setFocusedItem(null); |
235 | 243 |
236 if (selectedItem) { | 244 if (selectedItem) { |
237 this._setFocusedItem(selectedItem); | 245 this._setFocusedItem(selectedItem); |
238 } else { | 246 } else { |
239 this._setFocusedItem(this.items[0]); | 247 this._setFocusedItem(this.items[0]); |
240 } | 248 } |
241 // async 1ms to wait for `select` to get called from `_itemActivate` | 249 // async 1ms to wait for `select` to get called from `_itemActivate` |
242 }, 1); | 250 }, 1); |
243 }, | 251 }, |
244 | 252 |
245 /** | 253 /** |
246 * Handler that is called when the up key is pressed. | 254 * Handler that is called when the up key is pressed. |
247 * | 255 * |
248 * @param {CustomEvent} event A key combination event. | 256 * @param {CustomEvent} event A key combination event. |
249 */ | 257 */ |
250 _onUpKey: function(event) { | 258 _onUpKey: function(event) { |
251 // up and down arrows moves the focus | 259 // up and down arrows moves the focus |
252 this._focusPrevious(); | 260 this._focusPrevious(); |
| 261 event.detail.keyboardEvent.preventDefault(); |
253 }, | 262 }, |
254 | 263 |
255 /** | 264 /** |
256 * Handler that is called when the down key is pressed. | 265 * Handler that is called when the down key is pressed. |
257 * | 266 * |
258 * @param {CustomEvent} event A key combination event. | 267 * @param {CustomEvent} event A key combination event. |
259 */ | 268 */ |
260 _onDownKey: function(event) { | 269 _onDownKey: function(event) { |
261 this._focusNext(); | 270 this._focusNext(); |
| 271 event.detail.keyboardEvent.preventDefault(); |
262 }, | 272 }, |
263 | 273 |
264 /** | 274 /** |
265 * Handler that is called when the esc key is pressed. | 275 * Handler that is called when the esc key is pressed. |
266 * | 276 * |
267 * @param {CustomEvent} event A key combination event. | 277 * @param {CustomEvent} event A key combination event. |
268 */ | 278 */ |
269 _onEscKey: function(event) { | 279 _onEscKey: function(event) { |
270 // esc blurs the control | 280 // esc blurs the control |
271 this.focusedItem.blur(); | 281 this.focusedItem.blur(); |
(...skipping 20 matching lines...) Expand all Loading... |
292 }; | 302 }; |
293 | 303 |
294 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; | 304 Polymer.IronMenuBehaviorImpl._shiftTabPressed = false; |
295 | 305 |
296 /** @polymerBehavior Polymer.IronMenuBehavior */ | 306 /** @polymerBehavior Polymer.IronMenuBehavior */ |
297 Polymer.IronMenuBehavior = [ | 307 Polymer.IronMenuBehavior = [ |
298 Polymer.IronMultiSelectableBehavior, | 308 Polymer.IronMultiSelectableBehavior, |
299 Polymer.IronA11yKeysBehavior, | 309 Polymer.IronA11yKeysBehavior, |
300 Polymer.IronMenuBehaviorImpl | 310 Polymer.IronMenuBehaviorImpl |
301 ]; | 311 ]; |
OLD | NEW |