bug(dialog): If starting keyboard navigation from the URL bar - modal is not focused first!

[demiro]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I am using the app normally and open the popup, I am able to circle through the content in modal window well with my TAB key...

The problem is when I focus my URL input box in browser and then try to cycle with TAB there to the page... the APP under the modal gets focused first and not the modal itself! Once I get to the modal, it stays in the modal correctly and cannot cycle out.

the only solutions to this would be to inject the modal before the app-root, or I did put the tabindex of the app-root to -1 and the modal first element to 1 - seems to do the trick

Reproduction

Steps to reproduce:

1. Open modal window
2. Click on browser's URL bar
3. press TAB many times in order to get to the PAGE
4. Observe what get's focused

Expected Behavior

I expect that when the modal is opened, it gets accessed first with key navigation

Actual Behavior

When starting cycling with TAB key from the url bar, the page under the modal gets accessed first

Environment

• Angular: 12.2.11
• CDK/Material: 12.2.9
• Browser(s): Chrome 98
• Operating System (e.g. Windows, macOS, Ubuntu): Windows