feat(cdk/a11y): Respond to reviewer feedback

Author: zelliott

src/cdk/a11y/focus-monitor/focus-monitor.spec.ts

@@ -12,12 +12,12 @@ import {Component, NgZone} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {A11yModule} from '../index';
+import {TOUCH_BUFFER_MS} from '../input-modality/input-modality-detector';
 import {
   FocusMonitor,
   FocusMonitorDetectionMode,
   FocusOrigin,
   FOCUS_MONITOR_DEFAULT_OPTIONS,
-  TOUCH_BUFFER_MS,
 } from './focus-monitor';
 
 

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -27,11 +27,7 @@ import {
   isFakeMousedownFromScreenReader,
   isFakeTouchstartFromScreenReader,
 } from '../fake-event-detection';
-
-
-// This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
-// that a value of around 650ms seems appropriate.
-export const TOUCH_BUFFER_MS = 650;
+import {TOUCH_BUFFER_MS} from '../input-modality/input-modality-detector';
 
 
 export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;

src/cdk/a11y/input-modality/input-modality-detector.spec.ts

@@ -1,6 +1,6 @@
 import {A, ALT, B, C, CONTROL, META, SHIFT} from '@angular/cdk/keycodes';
 import {Platform} from '@angular/cdk/platform';
-import {PLATFORM_ID} from '@angular/core';
+import {NgZone, PLATFORM_ID} from '@angular/core';
 
 import {
   createMouseEvent,
@@ -11,14 +11,16 @@ import {
   createTouchEvent,
 } from '@angular/cdk/testing/private';
 import {fakeAsync, inject, tick} from '@angular/core/testing';
-import {InputModality, InputModalityDetector, TIME_AFTER_TOUCH_MS} from './input-modality-detector';
+import {InputModality, InputModalityDetector, TOUCH_BUFFER_MS} from './input-modality-detector';
 
 describe('InputModalityDetector', () => {
   let platform: Platform;
+  let ngZone: NgZone;
   let detector: InputModalityDetector;
 
   beforeEach(inject([PLATFORM_ID], (platformId: Object) => {
     platform = new Platform(platformId);
+    ngZone = new NgZone({});
   }));
 
   afterEach(() => {
@@ -27,7 +29,7 @@ describe('InputModalityDetector', () => {
 
   it('should do nothing on non-browser platforms', () => {
     platform.isBrowser = false;
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
     expect(detector.inputModality).toBe(null);
 
     dispatchKeyboardEvent(document, 'keydown');
@@ -41,25 +43,25 @@ describe('InputModalityDetector', () => {
   });
 
   it('should detect keyboard input modality', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
     dispatchKeyboardEvent(document, 'keydown');
     expect(detector.inputModality).toBe('keyboard');
   });
 
   it('should detect mouse input modality', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
     dispatchMouseEvent(document, 'mousedown');
     expect(detector.inputModality).toBe('mouse');
   });
 
   it('should detect touch input modality', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
     dispatchTouchEvent(document, 'touchstart');
     expect(detector.inputModality).toBe('touch');
   });
 
   it('should detect changes in input modality', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
 
     dispatchKeyboardEvent(document, 'keydown');
     expect(detector.inputModality).toBe('keyboard');
@@ -75,7 +77,7 @@ describe('InputModalityDetector', () => {
   });
 
   it('should emit changes in input modality', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
     const emitted: InputModality[] = [];
     detector.inputModalityChange.subscribe((inputModality: InputModality) => {
       emitted.push(inputModality);
@@ -103,7 +105,7 @@ describe('InputModalityDetector', () => {
   });
 
   it('should ignore fake screen-reader mouse events', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
 
     // Create a fake screen-reader mouse event.
     const event = createMouseEvent('mousedown');
@@ -114,7 +116,7 @@ describe('InputModalityDetector', () => {
   });
 
   it('should ignore fake screen-reader touch events', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
 
     // Create a fake screen-reader touch event.
     const event = createTouchEvent('touchstart');
@@ -125,40 +127,40 @@ describe('InputModalityDetector', () => {
   });
 
   it('should ignore certain modifier keys by default', () => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
 
-    dispatchKeyboardEvent(document, 'keydown', ALT, 'Alt');
-    dispatchKeyboardEvent(document, 'keydown', CONTROL, 'Control');
-    dispatchKeyboardEvent(document, 'keydown', META, 'Meta');
-    dispatchKeyboardEvent(document, 'keydown', SHIFT, 'Shift');
+    dispatchKeyboardEvent(document, 'keydown', ALT);
+    dispatchKeyboardEvent(document, 'keydown', CONTROL);
+    dispatchKeyboardEvent(document, 'keydown', META);
+    dispatchKeyboardEvent(document, 'keydown', SHIFT);
 
     expect(detector.inputModality).toBe(null);
   });
 
   it('should not ignore modifier keys if specified', () => {
-    detector = new InputModalityDetector(platform, document, {ignoreKeys: []});
-    dispatchKeyboardEvent(document, 'keydown', CONTROL, 'Control');
+    detector = new InputModalityDetector(platform, ngZone, document, {ignoreKeys: []});
+    dispatchKeyboardEvent(document, 'keydown', CONTROL);
     expect(detector.inputModality).toBe('keyboard');
   });
 
   it('should ignore additional keys if specified', () => {
-    detector = new InputModalityDetector(platform, document, {ignoreKeys: ['A', 'B', 'C']});
+    detector = new InputModalityDetector(platform, ngZone, document, {ignoreKeys: [A, B, C]});
 
-    dispatchKeyboardEvent(document, 'keydown', A, 'A');
-    dispatchKeyboardEvent(document, 'keydown', B, 'B');
-    dispatchKeyboardEvent(document, 'keydown', C, 'C');
+    dispatchKeyboardEvent(document, 'keydown', A);
+    dispatchKeyboardEvent(document, 'keydown', B);
+    dispatchKeyboardEvent(document, 'keydown', C);
 
     expect(detector.inputModality).toBe(null);
   });
 
   it('should ignore mouse events that occur too closely after a touch event', fakeAsync(() => {
-    detector = new InputModalityDetector(platform, document);
+    detector = new InputModalityDetector(platform, ngZone, document);
 
     dispatchTouchEvent(document, 'touchstart');
     dispatchMouseEvent(document, 'mousedown');
     expect(detector.inputModality).toBe('touch');
 
-    tick(TIME_AFTER_TOUCH_MS);
+    tick(TOUCH_BUFFER_MS);
     dispatchMouseEvent(document, 'mousedown');
     expect(detector.inputModality).toBe('mouse');
   }));

src/cdk/a11y/input-modality/input-modality-detector.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, InjectionToken, OnDestroy, Optional} from '@angular/core';
+import {ALT, CONTROL, META, SHIFT} from '@angular/cdk/keycodes';
+import {Inject, Injectable, InjectionToken, OnDestroy, Optional, NgZone} from '@angular/core';
 import {normalizePassiveListenerOptions, Platform} from '@angular/cdk/platform';
 import {DOCUMENT} from '@angular/common';
 import {Observable, ReplaySubject} from 'rxjs';
@@ -24,7 +25,7 @@ export type InputModality = 'keyboard' | 'mouse' | 'touch' | null;
 /** Options to configure the behavior of the InputModalityDetector. */
 export interface InputModalityDetectorOptions {
   /** Keys to ignore when detecting keyboard input modality. */
-  ignoreKeys?: string[];
+  ignoreKeys?: number[];
 }
 
 /**
@@ -47,20 +48,23 @@ export const INPUT_MODALITY_DETECTOR_OPTIONS =
  *    these keys so as to not update the input modality.
  */
 export const INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS: InputModalityDetectorOptions = {
-  ignoreKeys: ['Alt', 'Control', 'Meta', 'Shift'],
+  ignoreKeys: [ALT, CONTROL, META, SHIFT],
 };
 
 /**
  * The amount of time needed to pass after a touchstart event in order for a subsequent mousedown
  * event to be attributed as mouse and not touch.
+ *
+ * This is the value used by AngularJS Material. Through trial and error (on iPhone 6S) they found
+ * that a value of around 650ms seems appropriate.
  */
-export const TIME_AFTER_TOUCH_MS = 650;
+export const TOUCH_BUFFER_MS = 650;
 
 /**
  * Event listener options that enable capturing and also mark the listener as passive if the browser
  * supports it.
  */
-const opts = normalizePassiveListenerOptions({
+const modalityEventListenerOptions = normalizePassiveListenerOptions({
   passive: true,
   capture: true,
 });
@@ -85,7 +89,7 @@ export class InputModalityDetector implements OnDestroy {
   /** Emits when the input modality changes. */
   readonly inputModalityChange: Observable<InputModality>;
 
-  /** Returns the last detected / current input modality. */
+  /** Returns the most recently detected input modality. */
   get inputModality(): InputModality {
     return this._inputModality;
   }
@@ -112,7 +116,7 @@ export class InputModalityDetector implements OnDestroy {
   private _onKeydown = (event: KeyboardEvent) => {
     // If this is one of the keys we should ignore, then ignore it and don't update the input
     // modality to keyboard.
-    if (this._options?.ignoreKeys?.some(key => key === event.key)) { return; }
+    if (this._options?.ignoreKeys?.some(keyCode => keyCode === event.keyCode)) { return; }
 
     this._updateInputModality('keyboard');
   }
@@ -127,7 +131,7 @@ export class InputModalityDetector implements OnDestroy {
     // Touches trigger both touch and mouse events, so we need to distinguish between mouse events
     // that were triggered via mouse vs touch. To do so, check if the mouse event occurs closely
     // after the previous touch event.
-    if (Date.now() - this._lastTouchMs < TIME_AFTER_TOUCH_MS) { return; }
+    if (Date.now() - this._lastTouchMs < TOUCH_BUFFER_MS) { return; }
 
     this._updateInputModality('mouse');
   }
@@ -147,33 +151,38 @@ export class InputModalityDetector implements OnDestroy {
   }
 
   constructor(
-    platform: Platform,
+    private readonly _platform: Platform,
+    ngZone: NgZone,
     @Inject(DOCUMENT) document: Document,
     @Optional()
     @Inject(INPUT_MODALITY_DETECTOR_OPTIONS)
     options?: InputModalityDetectorOptions,
   ) {
     // If we're not in a browser, this service should do nothing, as there's no relevant input
     // modality to detect.
-    if (!platform.isBrowser) { return; }
+    if (!_platform.isBrowser) { return; }
 
     this._options = {
       ...INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS,
       ...options,
     };
 
-    this.inputModalityChange =  this._change.pipe(distinctUntilChanged());
+    this.inputModalityChange = this._change.pipe(distinctUntilChanged());
 
     // Add the event listeners used to detect the user's input modality.
-    document.addEventListener('keydown', this._onKeydown, opts);
-    document.addEventListener('mousedown', this._onMousedown, opts);
-    document.addEventListener('touchstart', this._onTouchstart, opts);
+    ngZone.runOutsideAngular(() => {
+      document.addEventListener('keydown', this._onKeydown, modalityEventListenerOptions);
+      document.addEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);
+      document.addEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);
+    });
   }
 
   ngOnDestroy() {
-    document.removeEventListener('keydown', this._onKeydown, opts);
-    document.removeEventListener('mousedown', this._onMousedown, opts);
-    document.removeEventListener('touchstart', this._onTouchstart, opts);
+    if (!this._platform.isBrowser) { return; }
+
+    document.removeEventListener('keydown', this._onKeydown, modalityEventListenerOptions);
+    document.removeEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);
+    document.removeEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);
   }
 
   /**

src/cdk/a11y/public-api.ts

@@ -16,7 +16,13 @@ export * from './focus-trap/event-listener-inert-strategy';
 export * from './focus-trap/focus-trap';
 export * from './focus-trap/focus-trap-inert-strategy';
 export * from './interactivity-checker/interactivity-checker';
-export * from './input-modality/input-modality-detector';
+export {
+  InputModality,
+  InputModalityDetector,
+  InputModalityDetectorOptions,
+  INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS,
+  INPUT_MODALITY_DETECTOR_OPTIONS,
+} from './input-modality/input-modality-detector';
 export * from './live-announcer/live-announcer';
 export * from './live-announcer/live-announcer-tokens';
 export * from './focus-monitor/focus-monitor';

tools/public_api_guard/cdk/a11y.d.ts

@@ -195,14 +195,14 @@ export declare type InputModality = 'keyboard' | 'mouse' | 'touch' | null;
 export declare class InputModalityDetector implements OnDestroy {
     get inputModality(): InputModality;
     readonly inputModalityChange: Observable<InputModality>;
-    constructor(platform: Platform, document: Document, options?: InputModalityDetectorOptions);
+    constructor(_platform: Platform, ngZone: NgZone, document: Document, options?: InputModalityDetectorOptions);
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDef<InputModalityDetector, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDef<InputModalityDetector, [null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDef<InputModalityDetector>;
 }
 
 export interface InputModalityDetectorOptions {
-    ignoreKeys?: string[];
+    ignoreKeys?: number[];
 }
 
 export declare class InteractivityChecker {
@@ -284,7 +284,3 @@ export interface RegisteredMessage {
     messageElement: Element;
     referenceCount: number;
 }
-
-export declare const TIME_AFTER_TOUCH_MS = 650;
-
-export declare const TOUCH_BUFFER_MS = 650;