Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-modal manager] Implemented focus lock to confine focus within the modal popup. #2014

Merged
merged 37 commits into from
Feb 15, 2024
Merged

[terra-modal manager] Implemented focus lock to confine focus within the modal popup. #2014

Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
ade3c5d
added focus-lock
Feb 1, 2024
3c54842
updated changelog
Feb 1, 2024
9ff7e38
package-lock
Feb 1, 2024
8922d64
lint fix
Feb 1, 2024
a3cfc6e
changelog update
Feb 1, 2024
00ef1c2
package update
Feb 1, 2024
09b6e73
updated changelog
Feb 1, 2024
f6228db
wdio update
Feb 1, 2024
6c8bca8
wdio snap update
Feb 2, 2024
e36b13e
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 2, 2024
afc75c2
wdio update
Feb 2, 2024
9150cac
Revert "wdio update"
MadanKumarGovindaswamy Feb 2, 2024
f618581
date-input snap update
Feb 2, 2024
dbc19d1
Merge branch 'AH106586-modal-manager-focus-lock' of https://github.co…
Feb 2, 2024
c52a9ae
added enableFocusLock prop
Feb 5, 2024
066143f
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 5, 2024
c364f6f
snap update
Feb 5, 2024
c65326f
implemented review comments
Feb 7, 2024
8b3fa3f
changelog update
Feb 7, 2024
9654e30
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 8, 2024
d3661cb
added focusOn
Feb 8, 2024
a67d0b9
snap update
Feb 8, 2024
932783e
wdio update
Feb 8, 2024
c20f403
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 9, 2024
6c398d7
wdio update
Feb 9, 2024
f88a9af
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 9, 2024
5846405
testcase update
Feb 9, 2024
7a643d0
closeOnOutsideClick prop added in modalmanager
Feb 12, 2024
4ddf393
snap update
Feb 12, 2024
03dca5c
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 12, 2024
72e1d22
test update
Feb 12, 2024
dddfe43
snap update
Feb 12, 2024
d70efe6
snap update
Feb 12, 2024
12a1afd
Merge branch 'main' of https://github.com/cerner/terra-framework into…
Feb 15, 2024
6bfcecc
removed tabindex
Feb 15, 2024
c6e3fb6
wdio update
Feb 15, 2024
88a512a
spec update
Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 205 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions packages/terra-abstract-modal/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Added
* Added FocusOn to confine focus within the modal popup.

## 3.45.0 - (December 18, 2023)

* Changed
Expand Down
1 change: 1 addition & 0 deletions packages/terra-abstract-modal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"keycode-js": "^3.1.0",
"mutationobserver-shim": "<=0.3.3",
"prop-types": "^15.5.8",
"react-focus-on": "^3.9.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we now introducing a new third-party library? If so, how was this vetted? Why do the other two lock libraries not work?

Copy link
Contributor Author

@AH106586Harika AH106586Harika Feb 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @cm9361
We found issues with react-focusTrap in certain scenarios, like form-single select inside the modal popup, As a solution, we attempted to use react-focusLock. However, we found that the closeOnOutsideClick functionality wasn't working properly. We then explored focusOn, which provided support for all the required functionalities.

"react-portal": "^4.1.2",
"terra-theme-context": "^1.9.0",
"terra-visually-hidden-text": "^2.0.0",
Expand Down
7 changes: 7 additions & 0 deletions packages/terra-abstract-modal/src/AbstractModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ const propTypes = {
* If set to true, the AbstractModal is rendered inside a NotificationDialog.
*/
isCalledFromNotificationDialog: PropTypes.bool,
/**
* If set to true, then the focus lock will get enabled.
*/
shouldTrapFocus: PropTypes.bool,
};

const defaultProps = {
Expand All @@ -90,6 +94,7 @@ const defaultProps = {
rootSelector: '#root',
zIndex: '6000',
isCalledFromNotificationDialog: false,
shouldTrapFocus: false,
};

const AbstractModal = (props) => {
Expand All @@ -109,6 +114,7 @@ const AbstractModal = (props) => {
onRequestClose,
zIndex,
isCalledFromNotificationDialog,
shouldTrapFocus,
...customProps
} = props;

Expand Down Expand Up @@ -174,6 +180,7 @@ const AbstractModal = (props) => {
ref={modalElementRef}
onKeyDown={handleKeydown}
isCalledFromNotificationDialog={isCalledFromNotificationDialog}
shouldTrapFocus={shouldTrapFocus}
>
{children}
</ModalContent>
Expand Down
Loading
Loading