@thecb/components 9.2.5 → 9.2.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.5",
+  "version": "9.2.6-beta.0",
   "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

@@ -60,6 +60,8 @@ const AccountAndRoutingModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`cursor: pointer;`}
+      role="button"
+      className="modal-trigger"
     >
       {link}
     </Text>

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

@@ -45,10 +45,12 @@ const Modal = ({
   isLoading,
   buttonExtraStyles,
   children,
-  dataQa = null
+  dataQa = null,
+  initialFocus = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
+
   return (
     <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
@@ -67,10 +69,12 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: customWidth || "615px",
-            overflow: "auto"
+            width: customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
+          aria-modal={true}
+          aria-name={modalHeaderText}
+          {...(initialFocus ? { initialFocus: initialFocus } : {})}
         >
           <Box
             padding="0"
@@ -125,6 +129,8 @@ const Modal = ({
                                     dataQa={cancelButtonText}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-cancel-button"
+                                    role="button"
+                                    name={cancelButtonText}
                                   />
                                 </Box>
                                 <Box width="100%" padding="0">
@@ -139,6 +145,8 @@ const Modal = ({
                                     disabled={isContinueActionDisabled}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-continue-button"
+                                    role="button"
+                                    name={continueButtonText}
                                   />
                                 </Box>
                               </Stack>
@@ -157,6 +165,8 @@ const Modal = ({
                                   dataQa={cancelButtonText}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-cancel-button"
+                                  role="button"
+                                  name={cancelButtonText}
                                 />
                                 <ButtonWithAction
                                   variant={
@@ -169,6 +179,8 @@ const Modal = ({
                                   disabled={isContinueActionDisabled}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-continue-button"
+                                  role="button"
+                                  name={continueButtonText}
                                 />
                               </Stack>
                             )}
@@ -182,6 +194,8 @@ const Modal = ({
                               dataQa={closeButtonText}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
+                              role="button"
+                              name={closeButtonText}
                             />
                           </Box>
                         )}

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

@@ -33,6 +33,7 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
+                initialFocus={`[role="button"]:not(.modal-trigger)`}
               />
             )}
           </Stack>

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

@@ -75,6 +75,7 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
+                  initialFocus={`.modal-close-button`}
                 />
               )}
             </Cluster>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -15,7 +15,8 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues
+  themeValues,
+  initialFocus = null
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -42,6 +43,7 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    {...(initialFocus ? { initialFocus: initialFocus } : {})}
   >
     <Text
       variant={linkVariant}
@@ -52,6 +54,8 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      role="button"
+      className="modal-trigger"
     >
       {link}
     </Text>