search

cengage / react-magma

https://react-magma.cengage.com
MIT License
21 stars 12 forks source link

Modal/Drawer: Focus lock breaks with specific content #970

Open chris-cedrone-cengage opened 1 year ago

chris-cedrone-cengage commented 1 year ago

Describe the bug With certain content in Modal, such as NavTabs, our focus lock utility doesn't trap keyboard navigation within the Modal. This is exemplified in our Drawer component which uses Modal and is reproducible when using it as a navigational element.

To Reproduce Steps to reproduce the behavior:

  1. Go to our documentation site.
  2. Navigate to Components > Drawer
  3. Click "Show Drawer" under "Navigation Example"
  4. Tab through the opened Drawer

Expected behavior The focus lock should allow the user to tab through the UI while staying within Drawer.

Additional context It seems that the focusTrapElement variable in Modal.tsx causes the issue. An update made to Modal about a year ago regarding portals also caused animations to break and other oddities. This may have something to do with it in addition.

chris-cedrone-cengage commented 1 year ago

This PR may have something to do with it.