USWDS-Site - Bug: TouchPoints Modal Focus Not Trapped when using USWDS

[amycole501]

Describe the bug

On sites using USWDS, the TouchPoints modal window for surveys doesn't keep a keyboard user's focus inside the modal. Instead, the cursor tabs out of the modal and into the webpage while the modal remains on the top layer of the screen.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html A modal dialog box A Web application brings up a dialog box. At the bottom of the dialog are two buttons, Cancel and OK. When the dialog has been opened, focus is trapped within the dialog; tabbing from the last control in the dialog takes focus to the first control in the dialog. The dialog is dismissed by activating the Cancel button or the OK button.

Steps to reproduce the bug

1. Go to a site such as www.vote.gov
2. Tab into the survey (bottom right of the screen)
3. When the modal opens keep tabbing to see that the focus moves outside the modal. NOTE that I don't think that TP uses the USWDS modal. It may be recommended to update the current modal component and work with GSA TP team members to replace the TP modal with USWDS's latest version.

Expected Behavior

Keyboard focus should remain inside the modal and not move outside of it unless the user closes the modal window.

Screenshots

No response

System setup

No response

Additional context

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct.
• [X] I checked the current issues for duplicate bug reports.

[amyleadem]

Confirmed that the Touchpoints survey modal does not trap focus. After tabbing through the modal content, the focus moves out of the modal and into the browser toolbar and page content.

This issue appears on both our site and vote.gov. I suspect this is an issue with Touchpoints source code. We should reach out to their team to flag this or submit an issue in their repo to see if this is happening on non-USWDS sites.