(WCAG 2.1) Focus management Issues with "Apply to Another Program" Modal Dialog

[dkatzz]

OBSERVED RESULTS:

• When activating the "Apply to Another Program" button on the application confirmation page, a modal dialog opens. However, the focus does not move to the modal dialog automatically upon opening.
• Additionally, once the modal dialog receives focus, it does not remain inside the dialog box and drops to the background, making it difficult to interact with the dialog content.
• 

EXPECTED RESULTS:

• Upon activating the "Apply to Another Program" button, the modal dialog should receive focus immediately, allowing users to interact with its content without any interruption.
• Focus should remain within the modal dialog until it is explicitly closed by the user..

STEPS TO REPRODUCE:

• Navigate to URL
• Navigate to and activate the ‘Apply’ for the Comprehensive sample program.
• Navigate to and activate “What is your address?”.
• Fillup the form fields and complete the application.
• On the confirmation page navigate to and activate “Apply to Another Program" using the tab key.
• Observe that the focus does not move to the modal dialog.
• Use the mouse to shift the focus to the modal, and subsequently press the TAB key to navigate out of the modal dialog box, which will result in the focus moving outside of the box.

ADDITIONAL INFORMATION:

• w3or modal dialog example

ENVIRONMENT DETAILS:

• Device(s) (brand, OS version, test key or release key): Windows 10 Enterprise (64-bit),MacOS Ventura Version 13.4
• Screen reader name and version: JAWS 2022.2211.7, NVDA 2022.3, VoiceOver
• Browser name and version: Chrome Version 113.0.5672.93

[rockycodes]

html dialogue element could help with this: https://blog.webdevsimplified.com/2023-04/html-dialog/

[rockycodes]

Consider using USWDS modal: https://designsystem.digital.gov/components/modal/

[rockycodes]

When updating the modal, look into also make the modal title a darker color and maybe bold to improve contrast. Now that we are using USWDS alert components, the modal title isn't standing out as much as we would like it to.

[melanie-exygy]

We might consider turning this into a USWDS modal now that we have an easy way to do that: USWDS modal utility function.