[web][fixed] Added FocusTrap for modals
ClosedPublic
Actions

Authored by • kuba on May 24 2023, 9:55 AM.

Details

Reviewers

michal
inka
ashoat
ginsu

Commits

rCOMM0c8d23999927: [web][fixed] Added FocusTrap for modals

Summary

Diff which was reverted: https://phab.comm.dev/D7837
More info on why it was reverted: https://linear.app/comm/issue/ENG-3928/focustrap-causes-regressions-to-modals-in-landing

Added fallbackFocus option, which sets focus to div when there are no focusable elements inside the FocusTrap.

Old description:
We want to prevent users from focusing outside the modals. Added focus-trap-react library, to do that, and covered the modals that we use.

Test Plan

Checked if in edit mode and in other modals user can't focus outside the modal using the tab.
Checked if the modals without focusable elements (i.g. in the investor's tab on the landing page) also work.

Videos: https://linear.app/comm/issue/ENG-3928#comment-13a62270

Diff Detail

Repository

rCOMM Comm

Branch

kuba/test-trap

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

• kuba created this revision.May 24 2023, 9:55 AM

• kuba edited the summary of this revision. (Show Details)May 24 2023, 9:58 AM

• kuba edited the test plan for this revision. (Show Details)

• kuba added inline comments.

lib/components/modal-overlay.react.js
63 ↗	(On Diff #27004)	It fixes the issue: `Your focus-trap must have at least one container with at least one tabbable node in it at all times` raised in ENG-3928, when user clicked on the investor without buttons. Solution source: https://github.com/focus-trap/focus-trap-react/issues/127#issuecomment-698966009