feat(cdk/a11y): Respond to additional PR reviewer feedback

Author: zelliott

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

@@ -10,8 +10,8 @@ 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';
-import {distinctUntilChanged} from 'rxjs/operators';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {distinctUntilChanged, skip} from 'rxjs/operators';
 import {
   isFakeMousedownFromScreenReader,
   isFakeTouchstartFromScreenReader,
@@ -91,14 +91,11 @@ export class InputModalityDetector implements OnDestroy {
 
   /** Returns the most recently detected input modality. */
   get inputModality(): InputModality {
-    return this._inputModality;
+    return this._inputModality.value;
   }
 
-  /** The underlying ReplaySubject that emits input modality changes. */
-  private readonly _change = new ReplaySubject<InputModality>(1);
-
-  /** The current / last detected input modality by this service. */
-  private _inputModality: InputModality = null;
+  /** The underlying BehaviorSubject that emits whenever an input modality is detected. */
+  private readonly _inputModality = new BehaviorSubject<InputModality>(null);
 
   /** Options for this InputModalityDetector. */
   private readonly _options: InputModalityDetectorOptions;
@@ -118,7 +115,7 @@ export class InputModalityDetector implements OnDestroy {
     // modality to keyboard.
     if (this._options?.ignoreKeys?.some(keyCode => keyCode === event.keyCode)) { return; }
 
-    this._updateInputModality('keyboard');
+    this._inputModality.next('keyboard');
   }
 
   /**
@@ -133,7 +130,7 @@ export class InputModalityDetector implements OnDestroy {
     // after the previous touch event.
     if (Date.now() - this._lastTouchMs < TOUCH_BUFFER_MS) { return; }
 
-    this._updateInputModality('mouse');
+    this._inputModality.next('mouse');
   }
 
   /**
@@ -147,27 +144,27 @@ export class InputModalityDetector implements OnDestroy {
     // triggered via mouse vs touch.
     this._lastTouchMs = Date.now();
 
-    this._updateInputModality('touch');
+    this._inputModality.next('touch');
   }
 
   constructor(
-    private readonly _platform: Platform,
-    ngZone: NgZone,
-    @Inject(DOCUMENT) document: Document,
-    @Optional()
-    @Inject(INPUT_MODALITY_DETECTOR_OPTIONS)
-    options?: InputModalityDetectorOptions,
+      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; }
-
     this._options = {
       ...INPUT_MODALITY_DETECTOR_DEFAULT_OPTIONS,
       ...options,
     };
 
-    this.inputModalityChange = this._change.pipe(distinctUntilChanged());
+    // Only emit if the input modality changes, and skip the first emission as it's null.
+    this.inputModalityChange = this._inputModality.pipe(distinctUntilChanged(), skip(1));
+
+    // 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; }
 
     // Add the event listeners used to detect the user's input modality.
     ngZone.runOutsideAngular(() => {
@@ -184,13 +181,4 @@ export class InputModalityDetector implements OnDestroy {
     document.removeEventListener('mousedown', this._onMousedown, modalityEventListenerOptions);
     document.removeEventListener('touchstart', this._onTouchstart, modalityEventListenerOptions);
   }
-
-  /**
-   * Update the input modality detected by the service.
-   * @param inputModality The newly detected input modality.
-   */
-  private _updateInputModality(inputModality: InputModality): void {
-    this._change.next(inputModality);
-    this._inputModality = inputModality;
-  }
 }

src/dev-app/input-modality/input-modality-detector-demo.html

@@ -9,7 +9,7 @@ <h2>Input Modality</h2>
 
     <p>
       Detected input modality:
-      <b>{{_inputModalityDetector.inputModalityChange | async}}</b>
+      <b>{{_modality || '(unknown)'}}</b>
     </p>
 
     <button mat-raised-button>Launch</button>

src/dev-app/input-modality/input-modality-detector-demo.ts

@@ -6,13 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
-import {InputModalityDetector} from '@angular/cdk/a11y';
+import {Component, OnDestroy, NgZone} from '@angular/core';
+import {InputModality, InputModalityDetector} from '@angular/cdk/a11y';
+
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
 @Component({
   selector: 'input-modality-detector-demo',
   templateUrl: 'input-modality-detector-demo.html',
 })
-export class InputModalityDetectorDemo {
-  constructor(readonly _inputModalityDetector: InputModalityDetector) {}
+export class InputModalityDetectorDemo implements OnDestroy {
+  _modality: InputModality = null;
+  _destroyed = new Subject<void>();
+
+  constructor(
+      inputModalityDetector: InputModalityDetector,
+      ngZone: NgZone,
+  ) {
+    inputModalityDetector.inputModalityChange
+        .pipe(takeUntil(this._destroyed))
+        .subscribe(modality => ngZone.run(() => { this._modality = modality; }));
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
 }