Controls below the angular material dialog overlay still can be focused by keyboard #13054
Comments
josephperrott
added
the
P3
josephperrott
added
the
Accessibility
|
The solution on this one is to change the way we do focus trapping. Instead of catching |
jelbourn
added
P4
|
@jelbourn do you guys have any idea when this bug may be fixed? I'm using it for a project that needs to go live in a couple months and this is an accessibility concern |
|
I cannot seem to reproduce this issue with |
|
I can still reproduce this, just following the steps in the original report. I don't think you need to disable everything on the page; https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html doesn't do that, and is still effective at trapping focus. The trick seems to be catching the |
|
@jelbourn How would we handle the case when there are multiple focus traps on the same page which would be competing for the focus? |
|
We'd probably want to do the most recently focused one. |
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see angular#13054).
Note that much of this demo page is known to not be working with the current focus trap implementation (ex. elements in the focus trap with tabindex > 0 send focus out of the trap, elements in iframes/shadow DOM get skipped when focus wraps, all focus traps can be escaped by clicking on the URL and then pressing tab). The demo page will be helpful for research into FocusTrap improvements (see #13054).
|
Is this considered fixed now? |
|
@annieyw can you confirm if this is fixed or not? I don't quite remember if the most recent focus trap changes from @vanessanschmitt fixed this. |
|
Just tried it on the v11 doc site with Chrome and the issue is still persists |
|
Given #18201 (comment):
It's not unexpected that this isn't fixed since @vanessanschmitt mentioned in #18201 (comment) that an internal CL for this was in progress. Did something end up blocking that? |
Bug, feature request, or proposal:
Bug
What is the expected behavior?
The dialog should be completely modal.
What is the current behavior?
Controls that are below in z-order of the Angular Material dialog overlay still can be focused by keyboard.
What are the steps to reproduce?
Out of curiosity I also checked Bootstrap Modal - it also got similar problem, but for that one Shift-TAB needs to be pressed to reproduce.
As a suggestion - I understand that the dialog overlay is currently based on cdkTrapFocus directive. This one is suffering from the same problem, I presume it's exactly same problem, so it would be nice to fix it on the level of cdkTrapFocus - because the focus trap is quite useful thing.
The text was updated successfully, but these errors were encountered: