search

uswds / uswds

The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
https://designsystem.digital.gov
Other
6.81k stars 932 forks source link

User can tab to content behind a modal #4681

Open ajanickiv opened 2 years ago

ajanickiv commented 2 years ago

Describe the bug

User can tab to content behind a displayed modal

Steps to reproduce the bug

  1. Go to USWDS Modal Example
  2. Click on Open default modal
  3. Click on URL input
  4. Press the tab key enough times to enter the viewport
  5. The user will be focused on the content under the overlay and the user can use the keyboard to activate links.

Expected behavior

When the user tabs back into the viewport, the focus is restricted to the modal's content.

Screenshots

image

System setup

Additional context

Checked with some other component libraries, namely PrimeNG and Bootstrap, and they handle this case - keeping the user restricted to the modal's content when in the viewport.

mejiaj commented 2 years ago

Hey there @ajanickiv, this is related to #3527. In the PR.

Checking the address bar might make things more difficult to inspect elements in the page. For example, with menu when checking for focusOut on the navigation, it would close when inspecting the markup in devtools.

Just something to keep in mind when we look into this issue.

thisisdano commented 2 years ago

We don't want to close the modal when going to the address bar, but we want to tabbing from the address bar to a modal-active page to tab only into the modal