HomePhabricator
Diffusion Comm 0c8d23999927

[web][fixed] Added FocusTrap for modals

Description

[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

Reviewers: michal, inka, ashoat, ginsu

Reviewed By: ashoat

Subscribers: atul, tomek, ashoat

Differential Revision: https://phab.comm.dev/D7960

Details

Provenance
kosmydel <kukubaczek@gmail.com>Authored on May 16 2023, 1:14 AM
Reviewer
ashoat
Differential Revision
D7960: [web][fixed] Added FocusTrap for modals
Parents
rCOMM71c5fc52caae: [web] Disabled edit button if edited message is empty
Branches
Unknown
Tags
Unknown