Description
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
I add an iframe element to the content of the mat-dialog and I find the following issues:
- If the mat-dialog contains only an iframe element, focus trap does not constrain the focusable elements to those only inside the modal dialog.
- The focus trap works if I add another element to the iframe (like a button), but I cannot use tab key to navigate to elements inside the iframe.
Reproduction
Steps to reproduce:
I created two separate StackBlitz projects to repro those issues.
-
This project is the entry point which contains a button to open a dialog and the content of the dialog.
https://stackblitz.com/edit/angular-ivy-vqwhly?file=src/app/dialogs/dialog-content/dialog-content.component.html -
This project contains the content loaded in the iframe.
https://stackblitz.com/edit/angular-ivy-34o8qo
For some reason, it cannot be loaded in the iframe of the dialog if you also open this link in your browser at the same time.
To reproduce the first issue:
Open the first link, ensure that the button is commented out.
Open the dialog, use tab key to navigate all focusable elements. Verify that it is possible to move the focus outside of the dialog.
To reproduce the second issue:
Open the first link and use the code editor to add the button back in dialog-content component.
Open the dialog and use tab key to test that focusable elements are restrained to those inside the dialog, but it cannot move the focus automatically inside elements of the iframe. You may use your mouse to click on the iframe and set focus inside, but after you focus out of the iframe using keyboard, you cannot use keyboard to focus on the elements inside the iframe again.
Expected Behavior
If the iframe is the only element inside the dialog-content, focusable elements should be constrained to those inside the modal dialog only. It should also autofocus on the first focusable element according to this doc: ARIA: dialog role
If there are multiple elements inside the dialog-content, using keyboard should be able to navigate to all focusable elements no matter those elements are inside an iframe or not.
Actual Behavior
To reproduce the first issue:
Open the first link, ensure that the button is commented out.
Open the dialog, use tab key to navigate all focusable elements. Verify that it is possible to move the focus outside of the dialog.
To reproduce the second issue:
Open the first link and use the code editor to add the button back in dialog-content component.
Open the dialog and use tab key to test that focusable elements are restrained to those inside the dialog, but it cannot move the focus automatically inside elements of the iframe. You may use your mouse to click on the iframe and set focus inside, but after you focus out of the iframe using keyboard, you cannot use keyboard to focus on the elements inside the iframe again.
Environment
- Angular: 12.2.14
- CDK/Material: 12.2.13
- Browser(s): Microsoft Edge Version 96.0.1054.43 (Official build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows