From 9af58ebec0a540cdd0cf2c6ca67100f7c2c960da Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Mon, 7 Nov 2016 16:46:12 -0800 Subject: [PATCH] fix(menu): improve a11y for screenreaders --- src/demo-app/menu/menu-demo.html | 8 ++++---- src/lib/core/a11y/fake-mousedown.ts | 11 +++++++++++ src/lib/core/core.ts | 1 + src/lib/menu/menu-item.ts | 6 +++++- src/lib/menu/menu-trigger.ts | 27 +++++++++++++++------------ src/lib/menu/menu.spec.ts | 2 +- 6 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 src/lib/core/a11y/fake-mousedown.ts diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index 99809e3ceeba..423b31d086ec 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -3,7 +3,7 @@

You clicked on: {{ selected }}

- @@ -17,7 +17,7 @@

Clicking these will navigate:

- @@ -33,7 +33,7 @@ Position x: before

- @@ -50,7 +50,7 @@ Position y: above

- diff --git a/src/lib/core/a11y/fake-mousedown.ts b/src/lib/core/a11y/fake-mousedown.ts new file mode 100644 index 000000000000..c0ef6a5289c8 --- /dev/null +++ b/src/lib/core/a11y/fake-mousedown.ts @@ -0,0 +1,11 @@ + +/** + * Screenreaders will often fire fake mousedown events when a focusable element + * is activated using the keyboard. We can typically distinguish between these faked + * mousedown events and real mousedown events using the "buttons" property. While + * real mousedowns will indicate the mouse button that was pressed (e.g. "1" for + * the left mouse button), faked mousedowns will usually set the property value to 0. + */ +export function isFakeMousedownFromScreenReader(event: MouseEvent): boolean { + return event.buttons === 0; +} diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index 5802e3b40284..d81bd4f168ca 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -54,6 +54,7 @@ export { export {FocusTrap} from './a11y/focus-trap'; export {InteractivityChecker} from './a11y/interactivity-checker'; +export {isFakeMousedownFromScreenReader} from './a11y/fake-mousedown'; export {A11yModule} from './a11y/index'; diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index ca910f516cd5..a3f7b53d16b5 100644 --- a/src/lib/menu/menu-item.ts +++ b/src/lib/menu/menu-item.ts @@ -11,7 +11,7 @@ import {MdFocusable} from '../core/a11y/list-key-manager'; host: { 'role': 'menuitem', '(click)': '_checkDisabled($event)', - 'tabindex': '-1' + '[attr.tabindex]': '_tabindex' }, templateUrl: 'menu-item.html', exportAs: 'mdMenuItem' @@ -41,6 +41,10 @@ export class MdMenuItem implements MdFocusable { return String(!!this.disabled); } + get _tabindex() { + return this.disabled ? '-1' : '0'; + } + _getHostElement(): HTMLElement { return this._elementRef.nativeElement; diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index e6048e2fef38..083ada1e61a1 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -12,8 +12,7 @@ import { import {MdMenuPanel} from './menu-panel'; import {MdMenuMissingError} from './menu-errors'; import { - ENTER, - SPACE, + isFakeMousedownFromScreenReader, Overlay, OverlayState, OverlayRef, @@ -32,8 +31,8 @@ import { Subscription } from 'rxjs/Subscription'; selector: '[md-menu-trigger-for]', host: { 'aria-haspopup': 'true', - '(keydown)': '_handleKeydown($event)', - '(click)': 'toggleMenu()' + '(mousedown)': '_handleMousedown($event)', + '(click)': 'toggleMenu()', }, exportAs: 'mdMenuTrigger' }) @@ -45,7 +44,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { // tracking input type is necessary so it's possible to only auto-focus // the first item of the list when the menu is opened via the keyboard - private _openedFromKeyboard: boolean = false; + private _openedByMouse: boolean = false; @Input('md-menu-trigger-for') menu: MdMenuPanel; @Output() onMenuOpen = new EventEmitter(); @@ -118,7 +117,10 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { private _initMenu(): void { this._setIsMenuOpen(true); - if (this._openedFromKeyboard) { + // Should only set focus if opened via the keyboard, so keyboard users can + // can easily navigate menu items. According to spec, mouse users should not + // see the focus style. + if (!this._openedByMouse) { this.menu.focusFirstItem(); } }; @@ -130,10 +132,12 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { private _resetMenu(): void { this._setIsMenuOpen(false); - if (this._openedFromKeyboard) { + // Focus only needs to be reset to the host element if the menu was opened + // by the keyboard and manually shifted to the first menu item. + if (!this._openedByMouse) { this.focus(); - this._openedFromKeyboard = false; } + this._openedByMouse = false; } // set state rather than toggle to support triggers sharing a menu @@ -191,10 +195,9 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { ); } - // TODO: internal - _handleKeydown(event: KeyboardEvent): void { - if (event.keyCode === ENTER || event.keyCode === SPACE) { - this._openedFromKeyboard = true; + _handleMousedown(event: MouseEvent): void { + if (!isFakeMousedownFromScreenReader(event)) { + this._openedByMouse = true; } } diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 70ce391b6cb8..c6abaa6efa9d 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -181,7 +181,7 @@ class CustomMenuPanel implements MdMenuPanel { positionY: MenuPositionY = 'below'; @ViewChild(TemplateRef) templateRef: TemplateRef; @Output() close = new EventEmitter(); - focusFirstItem: () => void; + focusFirstItem = () => {}; } @Component({