[terra-modal manager] Implemented focus lock to confine focus within …

…the modal popup. (#2014) Co-authored-by: AH106586Harika <[email protected]> Co-authored-by: MadanKumarGovindaswamy <[email protected]>
cerner · Feb 15, 2024 · 2b3357e · 2b3357e
1 parent 5d99ec2
commit 2b3357e
Show file tree

Hide file tree

Showing 23 changed files with 2,518 additions and 280 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/terra-abstract-modal/CHANGELOG.md b/packages/terra-abstract-modal/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added FocusOn to confine focus within the modal popup.
+
 ## 3.45.0 - (December 18, 2023)
 
 * Changed

diff --git a/packages/terra-abstract-modal/package.json b/packages/terra-abstract-modal/package.json
@@ -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",
     "react-portal": "^4.1.2",
     "terra-theme-context": "^1.9.0",
     "terra-visually-hidden-text": "^2.0.0",

diff --git a/packages/terra-abstract-modal/src/AbstractModal.jsx b/packages/terra-abstract-modal/src/AbstractModal.jsx
@@ -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 = {
@@ -90,6 +94,7 @@ const defaultProps = {
   rootSelector: '#root',
   zIndex: '6000',
   isCalledFromNotificationDialog: false,
+  shouldTrapFocus: false,
 };
 
 const AbstractModal = (props) => {
@@ -109,6 +114,7 @@ const AbstractModal = (props) => {
     onRequestClose,
     zIndex,
     isCalledFromNotificationDialog,
+    shouldTrapFocus,
     ...customProps
   } = props;
 
@@ -174,6 +180,7 @@ const AbstractModal = (props) => {
         ref={modalElementRef}
         onKeyDown={handleKeydown}
         isCalledFromNotificationDialog={isCalledFromNotificationDialog}
+        shouldTrapFocus={shouldTrapFocus}
       >
         {children}
       </ModalContent>