[Modal] Missing outline on focused button

[andrefilimono]

⚡ Reproduction

StackBlitz link to reproduce the issue: https://stackblitz.com/edit/angular-aquila-starter-app-aeqf46?file=src/app/starter-app.ts

Steps to reproduce:

1. Click on "Open"
2. Navigate through the dialog using tab navigation.

📗 Expected Behavior

The button "TEST BUTTON" should have a blue outline when focused.

📕 Actual Behavior

The button hasn't an outline when focused.

It also has the wrong css class "cdk-program-focused" instead of "cdk-keyboard-focused". I think that is the reason why it doesn't have an outline.

When I change showCloseIcon to false, it works as expected.

📦 Environment

• Aquila/NDBX version: 11.4.0
• Angular/CDK version: 11.2.13
• Browser name & version: Chrome 93.0.4577.82
• Operating System & version (desktop or mobile): Desktop, MacOS

[Phil147]

Hi @andrefilimono

thanks for reproduction! What I noticed is when you tab through all elements to land on the "X" closing button again and then do SHIFT+TAB the correct cdk-focused-keyboard class is applied. So I wonder why the CDK focus monitor gets confused here if that is something from our code or a problem in the focus monitor. We will have a look at it, thanks!

[Phil147]

After another look at the issue this also happens without the modal with just

<video controls height="200" width="300">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <button
      nxButton="block"
      type="button"
    >TEST BUTTON</button>

but only on Chrome. On Firefox everything is fine, on Safari it works as well once you activate full tabbing support in the system preferences. From within the video to the button doesn't work, but from any other element later in the DOM backwards it works. So right now that looks like a Chrome and/or a CDK FocusMonitor problem.

[syl987]

Updating to @angular/cdk@13.0.0-rc.1 did not fix the issue.

The problem originates within the method private _getFocusOrigin(focusEventTarget: HTMLElement | null) (https://github.com/angular/components/blob/master/src/cdk/a11y/focus-monitor/focus-monitor.ts line 331) with the variable _windowFocused being false, thus the method returning 'program' instead of the value of _lastFocusOrigin.

Assuming that the variable _windowFocused is being set incorrectly (after returning to the document from within the video element), based on further code review, the error could originate within the subscription to focus events where the variable is set and unset around the call to the browser's setTimeout() method.

I suggest that this is outside of the scope of ng-aquila unless classes like cdk-program-focused shall also display focus visuals.