If a dialog contains any focusable elements that are temporarily hidden, it still uses the hidden elements when calculating all of the focusable elements inside of itself. This means that in some cases it cannot properly trap focus and a user can use the Tab key to navigate out of the dialog while it is open.
A good example of this would be if a dialog contains a dropdown menu or a disclosure of some sort that has focusable elements inside. If say, the last focusable element is hidden inside a dropdown menu, the dialog doesn't know that it's the last element which means it doesn't know to move focus back to the first focusable element allowing you to navigate out of the focus trap.
Expected behavior
The dialog should only use visible focusable element when determining how to trap focus.
Relevant context (required)
Link to a test case or any CSS, JS, HTML relevant to the bug.
Add any relevant error messages thrown by the browser.
If applicable, add screenshots to help explain your problem.
The browsers in which you encountered the bug, if applicable.
Describe the bug
If a dialog contains any focusable elements that are temporarily hidden, it still uses the hidden elements when calculating all of the focusable elements inside of itself. This means that in some cases it cannot properly trap focus and a user can use the Tab key to navigate out of the dialog while it is open.
A good example of this would be if a dialog contains a dropdown menu or a disclosure of some sort that has focusable elements inside. If say, the last focusable element is hidden inside a dropdown menu, the dialog doesn't know that it's the last element which means it doesn't know to move focus back to the first focusable element allowing you to navigate out of the focus trap.
Expected behavior
The dialog should only use visible focusable element when determining how to trap focus.
Relevant context (required)
Steps to reproduce
Here is a reduced test case to replicated the bug.