@thecb/components 7.0.0-beta.6 → 7.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.0.0-beta.6",
+  "version": "7.0.0-beta.9",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/modal/Modal.js

@@ -47,15 +47,14 @@ const Modal = ({
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const closeBtnRef = useRef(null);
-  const bodyTextContainerRef = useRef(null);
-  debugger;
+  const modalContainerRef = useRef(null);
   return (
-    <Fragment>
+    <div ref={modalContainerRef}>
       {modalOpen && (
         <AriaModal
-          initialFocus={closeBtnRef ?? bodyTextContainerRef ?? '#root'}
-          focusTrapOptions={{ delayInitialFocus: false, fallbackFocus: closeBtnRef ?? bodyTextContainerRef ?? '#root'}} // fallback to resolve unit test errors https://github.com/focus-trap/focus-trap-react/issues/91
+          // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+          initialFocus={modalContainerRef?.current}
+          focusTrapOptions={{ delayInitialFocus: false, fallbackFocus: modalContainerRef?.current }}
           onExit={onExit}
           getApplicationNode={getApplicationNode}
           titleText={modalHeaderText}
@@ -85,7 +84,6 @@ const Modal = ({
             <Box background={modalBodyBg} padding="1.5rem">
               <Stack childGap="1.5rem">
                 <Box
-                  ref={bodyTextContainerRef}
                   borderWidthOverride={noBorder && "0 0 2px 0"}
                   borderColor={!noBorder && SILVER_GREY}
                   padding={!noBorder && "0 0 1.5rem 0"}
@@ -175,7 +173,6 @@ const Modal = ({
                         ) : (
                           <Box padding="0.5rem">
                             <ButtonWithAction
-                              ref={closeBtnRef}
                               action={hideModal}
                               variant="primary"
                               text={closeButtonText}
@@ -195,7 +192,7 @@ const Modal = ({
         </AriaModal>
       )}
       {children}
-    </Fragment>
+    </div>
   );
 };