build: rework flaky focus trap tests (#18304)

Reworks the `EventListenerFocusTrapInertStrategy` to avoid some of the flakes that we've been seeing in master recently. This is something that we've dealt with in the past where the timing of when focus events are dispatched is inconsistent between browsers and is asynchronous in some cases.

Author: crisbeto

src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts

@@ -1,5 +1,6 @@
 import {AfterViewInit, Component, ElementRef, Type, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {patchElementFocus} from '@angular/cdk/testing/private';
 import {
   A11yModule,
   ConfigurableFocusTrapFactory,
@@ -22,7 +23,7 @@ describe('EventListenerFocusTrapInertStrategy', () => {
       componentInstance.outsideFocusableElement.nativeElement.focus();
       flush();
 
-      expect(document.activeElement).toBe(
+      expect(componentInstance.activeElement).toBe(
         componentInstance.firstFocusableElement.nativeElement,
         'Expected first focusable element to be focused');
   }));
@@ -36,7 +37,7 @@ describe('EventListenerFocusTrapInertStrategy', () => {
       componentInstance.secondFocusableElement.nativeElement.focus();
       flush();
 
-      expect(document.activeElement).toBe(
+      expect(componentInstance.activeElement).toBe(
         componentInstance.secondFocusableElement.nativeElement,
         'Expected second focusable element to be focused');
   }));
@@ -63,17 +64,32 @@ function createComponent<T>(componentType: Type<T>, providers: Array<Object> = [
     `
 })
 class SimpleFocusTrap implements AfterViewInit {
-  @ViewChild('focusTrapElement') focusTrapElement!: ElementRef;
-  @ViewChild('outsideFocusable') outsideFocusableElement!: ElementRef;
-  @ViewChild('firstFocusable') firstFocusableElement!: ElementRef;
-  @ViewChild('secondFocusable') secondFocusableElement!: ElementRef;
+  @ViewChild('focusTrapElement') focusTrapElement!: ElementRef<HTMLElement>;
+  @ViewChild('outsideFocusable') outsideFocusableElement!: ElementRef<HTMLElement>;
+  @ViewChild('firstFocusable') firstFocusableElement!: ElementRef<HTMLElement>;
+  @ViewChild('secondFocusable') secondFocusableElement!: ElementRef<HTMLElement>;
 
   focusTrap: ConfigurableFocusTrap;
 
+  // Since our custom stubbing in `patchElementFocus` won't update
+  // the `document.activeElement`, we need to keep track of it here.
+  activeElement: EventTarget | null;
+
   constructor(private _focusTrapFactory: ConfigurableFocusTrapFactory) {
   }
 
   ngAfterViewInit() {
+    // Ensure consistent focus timing across browsers.
+    [
+      this.focusTrapElement,
+      this.outsideFocusableElement,
+      this.firstFocusableElement,
+      this.secondFocusableElement
+    ].forEach(({nativeElement}) => {
+      patchElementFocus(nativeElement);
+      nativeElement.addEventListener('focus', event => this.activeElement = event.target);
+    });
+
     this.focusTrap = this._focusTrapFactory.create(this.focusTrapElement.nativeElement);
     this.focusTrap.focusFirstTabbableElementWhenReady();
   }