@thecb/components 9.2.10-beta.1 → 9.2.10-beta.2

package/package.json

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

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -50,6 +50,7 @@ const AccountAndRoutingModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    initialFocusSelector={"[name='Close']"}
   >
     <Text
       variant="pS"

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

@@ -46,8 +46,7 @@ const Modal = ({
   buttonExtraStyles,
   children,
   dataQa = null,
-  initialFocusSelector = "",
-  modalName = ""
+  initialFocusSelector = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
@@ -75,8 +74,8 @@ const Modal = ({
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
-          aria-name={!!modalName.length ? modalName : modalHeaderText}
           initialFocus={initialFocusSelector}
+          focusDialog={!initialFocusSelector} // Focus the dialogue box itself if no selector for initial focus was provided
         >
           <Box
             padding="0"

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -8,12 +8,7 @@ const TermsAndConditions = ({ version = "v1", ...rest }) => {
       ? TermsAndConditionsControlV1
       : TermsAndConditionsControlV2;
 
-  return (
-    <TermsAndConditionsControl
-      initialFocusSelector="[role='button']:not(.modal-trigger)"
-      {...rest}
-    />
-  );
+  return <TermsAndConditionsControl {...rest} />;
 };
 
 export default TermsAndConditions;

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -9,7 +9,18 @@ const groupId = "props";
 
 const Terms = () => (
   <p>
-    Terms and <a href="#">conditions</a> modal content.
+    Modal Content: Elit voluptate cupidatat in pariatur anim in excepteur non.{" "}
+    <a href="#modal-bottom" id="focus-me">
+      Laboris elit laboris labore pariatur incididunt
+    </a>{" "}
+    proident occaecat laboris sit elit. Dolor irure enim adipisicing irure
+    consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et pariatur
+    nulla nostrud sit esse. Veniam est occaecat cupidatat est nulla dolor minim
+    nostrud anim ea voluptate. modal content. Elit voluptate cupidatat in
+    pariatur anim in excepteur non. Laboris elit laboris labore pariatur
+    incididunt proident occaecat laboris sit elit. Dolor irure enim adipisicing
+    irure consectetur dolor enim eiusmod elit eiusmod ut. Pariatur ut quis et
+    pariatur nulla nostrud sit esse.
   </p>
 );
 
@@ -17,11 +28,10 @@ export const termsAndConditions = () => (
   <TermsAndConditions
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "Terms and Conditions html", groupId)}
     modalName="Terms and Conditions Modal"
     terms={<Terms />}
     error={boolean("error", false, groupId)}
-    initialFocusSelector="[role='button']:not(.modal-trigger)"
+    initialFocusSelector="a#focus-me"
   />
 );