@thecb/components 9.3.2 → 9.3.3-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.3.2",
+  "version": "9.3.3-beta.10",
   "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"
@@ -60,6 +61,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,
+  initialFocusSelector = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
+
   return (
     <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
@@ -71,6 +73,9 @@ const Modal = ({
             overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
+          aria-modal={true}
+          initialFocus={initialFocusSelector}
+          focusDialog={!initialFocusSelector} // Focus the dialogue box itself if no selector for initial focus was provided
         >
           <Box
             padding="0"
@@ -125,6 +130,8 @@ const Modal = ({
                                     dataQa={cancelButtonText}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-cancel-button"
+                                    role="button"
+                                    name={cancelButtonText}
                                   />
                                 </Box>
                                 <Box width="100%" padding="0">
@@ -139,6 +146,8 @@ const Modal = ({
                                     disabled={isContinueActionDisabled}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-continue-button"
+                                    role="button"
+                                    name={continueButtonText}
                                   />
                                 </Box>
                               </Stack>
@@ -157,6 +166,8 @@ const Modal = ({
                                   dataQa={cancelButtonText}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-cancel-button"
+                                  role="button"
+                                  name={cancelButtonText}
                                 />
                                 <ButtonWithAction
                                   variant={
@@ -169,6 +180,8 @@ const Modal = ({
                                   disabled={isContinueActionDisabled}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-continue-button"
+                                  role="button"
+                                  name={continueButtonText}
                                 />
                               </Stack>
                             )}
@@ -182,6 +195,8 @@ const Modal = ({
                               dataQa={closeButtonText}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
+                              role="button"
+                              name={closeButtonText}
                             />
                           </Box>
                         )}

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -188,6 +188,7 @@ const PaymentFormACH = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
+                  initialFocusSelector={".modal-close-button"}
                 />
               </Cover>
             )}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -210,6 +210,7 @@ const PaymentFormCard = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
+                  initialFocusSelector={".modal-close-button"}
                 />
               </Cover>
             )}

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

@@ -7,14 +7,31 @@ import { noop } from "../../../util/general";
 
 const groupId = "props";
 
+const Terms = () => (
+  <p>
+    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>
+);
+
 export const termsAndConditions = () => (
   <TermsAndConditions
     version={select("version", ["v1", "v2"], "v1", groupId)}
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "terms and conditions summary", groupId)}
-    terms={text("terms", "terms and conditions modal text", groupId)}
+    terms={<Terms />}
     error={boolean("error", false, groupId)}
+    initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
     description={text("description", "I definitely agree to the", groupId)}
   />
 );

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

@@ -10,7 +10,8 @@ const TermsAndConditionsControlV1 = ({
   html,
   terms,
   error = false,
-  linkVariant
+  linkVariant,
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -33,6 +34,7 @@ const TermsAndConditionsControlV1 = ({
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
                 linkVariant={linkVariant}
+                initialFocusSelector={initialFocusSelector}
               />
             )}
           </Stack>

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

@@ -28,7 +28,8 @@ const TermsAndConditionsControlV2 = ({
   modalVariant = "default",
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
-  modalTitle = "Terms and Conditions"
+  modalTitle = "Terms and Conditions",
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -79,6 +80,7 @@ const TermsAndConditionsControlV2 = ({
                   toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
+                  initialFocusSelector={initialFocusSelector}
                 />
               )}
             </Cluster>

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

@@ -15,7 +15,8 @@ const TermsAndConditionsModal = ({
   terms,
   variant,
   linkVariant = "p",
-  themeValues
+  themeValues,
+  initialFocusSelector = ""
 }) => (
   <Modal
     modalOpen={isOpen}
@@ -42,6 +43,7 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
+    initialFocusSelector={initialFocusSelector}
   >
     <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" // This should always be a "button" since it opens a modal
+      className="modal-trigger"
     >
       {link}
     </Text>

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

@@ -20,17 +20,22 @@ const linkVariants = {
   pXL: "PXL"
 };
 
+const Terms = () => (
+  <p>
+    Terms content with a <a href="#">link</a> that should NOT get initial focus.
+    Instead, the <code>Cancel</code> button below should.
+  </p>
+);
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
     title={text("title", "Title", groupId)}
     isOpen={boolean("isOpen", false, groupId)}
-    // toggleOpen={setShowTerms}
-    // toggleAccepted={toggleTermsAccepted}
     acceptText={text("acceptText", "Accept", groupId)}
-    terms={text("terms", "terms and conditions", groupId)}
+    terms={<Terms />}
     variant={select("variants", variants, "default", groupId)}
     linkVariant={select("linkVariants", linkVariants, groupId)}
+    initialFocusSelector="[name='Cancel']"
   />
 );