Modal Dialog: Focus trap

[rsinghal-dcca]

Describe the bug
Currently modal dialogs don't trap the focus. When tabbing thru the items in Modal Dialog, focus leaves the dialog.
This issue was found during CMS 508 testing.

To Reproduce
Steps to reproduce the behavior:

1. Open Modal Dialog in storybook https://design.cms.gov/components/modal-dialog/?theme=core
   I am using storybook just to demonstrate the bug.
2. Tab thru it using keyboard
3. Notice that focus leaves the dialogs.
   Expected behavior
   While tabbing using keyboard, element focus should stay within the dialog.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version: 132

Additional context
Add any other context about the problem here.

[jack-ryan-nava-pbc]

Hi Ritesh!

Thanks so much for testing and reporting this issue. Our examples are rendered within iFrames, which might be leading to the observed behavior.

If you go our Storybook example do you encounter the same issue?

[rsinghal-dcca]

It does the same thing. After cancel button, focus goes to address bar. Ideally it should go to 'X' button

[rsinghal-dcca]

@jack-ryan-nava-pbc Any updates on this issue?

[jack-ryan-nava-pbc]

Hi @rsinghal-dcca

We're chatting internally about this. My current thoughts:
This is actually ok behavior. The focus trapping prevents users from accessing elements on the page but does not prevent them from using controls on the browser. My logic is that mouse users do not have this restriction. Mouse users might not be able to click anything under the modal, but they can certainly move to the url/address bar if they want.

This is something I'm happy to change my mind on, and is something that we as a team are thinking about.

Do you have information from users about this?

[rsinghal-dcca]

I think it's good accessibility practice to trap the focus. Please see this example of 'Add Delivery Address' modal.

https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

As i noted before, we had a finding from CMS 508 test team for this.