fix(a11y): focus trap incorrectly moving focus internally if focus was already moved into it (#18541)

The new `ConfigurableFocusTrap` uses a timeout to allow for focus to be moved before it traps focus into itself, however if focus was moved into it before the timeout has fired, focus will be incorrectly moved to the first element in the trap. These changes add an extra check that ensures that focus isn't moved again if it's already inside the trap.

Relates to #18538.

Author: crisbeto

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

@@ -41,6 +41,21 @@ describe('EventListenerFocusTrapInertStrategy', () => {
         componentInstance.secondFocusableElement.nativeElement,
         'Expected second focusable element to be focused');
   }));
+
+  it('should not intercept focus if it moved outside the trap and back in again',
+    fakeAsync(() => {
+      const fixture = createComponent(SimpleFocusTrap, providers);
+      fixture.detectChanges();
+      const {secondFocusableElement, outsideFocusableElement} = fixture.componentInstance;
+
+      outsideFocusableElement.nativeElement.focus();
+      secondFocusableElement.nativeElement.focus();
+      flush();
+
+      expect(fixture.componentInstance.activeElement).toBe(secondFocusableElement.nativeElement,
+          'Expected second focusable element to be focused');
+  }));
+
 });
 
 function createComponent<T>(componentType: Type<T>, providers: Array<Object> = []
@@ -91,6 +106,7 @@ class SimpleFocusTrap implements AfterViewInit {
     });
 
     this.focusTrap = this._focusTrapFactory.create(this.focusTrapElement.nativeElement);
+    spyOnProperty(document, 'activeElement', 'get').and.callFake(() => this.activeElement);
     this.focusTrap.focusFirstTabbableElementWhenReady();
   }
 }

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

@@ -49,15 +49,17 @@ export class EventListenerFocusTrapInertStrategy implements FocusTrapInertStrate
    */
   private _trapFocus(focusTrap: ConfigurableFocusTrap, event: FocusEvent) {
     const target = event.target as HTMLElement;
+    const focusTrapRoot = focusTrap._element;
+
     // Don't refocus if target was in an overlay, because the overlay might be associated
     // with an element inside the FocusTrap, ex. mat-select.
-    if (!focusTrap._element.contains(target) &&
-      closest(target, 'div.cdk-overlay-pane') === null) {
+    if (!focusTrapRoot.contains(target) && closest(target, 'div.cdk-overlay-pane') === null) {
         // Some legacy FocusTrap usages have logic that focuses some element on the page
         // just before FocusTrap is destroyed. For backwards compatibility, wait
         // to be sure FocusTrap is still enabled before refocusing.
         setTimeout(() => {
-          if (focusTrap.enabled) {
+          // Check whether focus wasn't put back into the focus trap while the timeout was pending.
+          if (focusTrap.enabled && !focusTrapRoot.contains(focusTrap._document.activeElement)) {
             focusTrap.focusFirstTabbableElement();
           }
         });