@thecb/components 9.2.9 → 9.2.10-beta.0

package/package.json

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

package/src/components/atoms/icons/AccountNumberImage.js

@@ -7,8 +7,6 @@ const AccountNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
-      role="img"
-      aria-label="A check with the account number highlighted in the bottom center"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-364 -546)">

package/src/components/atoms/icons/BankIcon.js

@@ -8,8 +8,6 @@ export const BankIcon = () => {
       viewBox="0 0 28 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Check Payment"
     >
       <path
         d="M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z"

package/src/components/atoms/icons/CheckmarkIcon.js

@@ -9,8 +9,6 @@ const CheckmarkIcon = () => (
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    role="img"
-    aria-label="Successful payment, green checkmark"
   >
     <g
       id="Cityville-Checkout---Desktop---Logged-In"

package/src/components/atoms/icons/GenericCard.js

@@ -7,8 +7,6 @@ const GenericCard = () => (
     viewBox="0 0 28 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-label="Card Payment"
   >
     <rect width="28" height="18" rx="2" fill="#15749D" />
     <path

package/src/components/atoms/icons/GenericCardLarge.js

@@ -8,8 +8,6 @@ const GenericCardLarge = () => {
       viewBox="0 0 36 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Card Payment"
     >
       <rect width="36" height="24" rx="2" fill="#15749D" />
       <path

package/src/components/atoms/icons/RoutingNumberImage.js

@@ -7,8 +7,6 @@ const RoutingNumberImage = () => {
       width="371"
       height="164"
       viewBox="0 0 371 164"
-      role="img"
-      aria-label="A check with the routing number highlighted in the lower left hand corner"
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <g transform="translate(-365 -522)">

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,13 @@ const Modal = ({
   isLoading,
   buttonExtraStyles,
   children,
-  dataQa = null
+  dataQa = null,
+  initialFocusSelector = "",
+  modalName = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const modalContainerRef = useRef(null);
+
   return (
     <div ref={modalContainerRef} data-qa={dataQa}>
       {modalOpen && (
@@ -71,6 +74,9 @@ const Modal = ({
             overflow: "auto"
           }}
           underlayClickExits={underlayClickExits}
+          aria-modal={true}
+          aria-name={!!modalName.length ? modalName : modalHeaderText}
+          initialFocus={initialFocusSelector}
         >
           <Box
             padding="0"
@@ -125,6 +131,8 @@ const Modal = ({
                                     dataQa={cancelButtonText}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-cancel-button"
+                                    role="button"
+                                    name={cancelButtonText}
                                   />
                                 </Box>
                                 <Box width="100%" padding="0">
@@ -139,6 +147,8 @@ const Modal = ({
                                     disabled={isContinueActionDisabled}
                                     extraStyles={buttonExtraStyles}
                                     className="modal-continue-button"
+                                    role="button"
+                                    name={continueButtonText}
                                   />
                                 </Box>
                               </Stack>
@@ -157,6 +167,8 @@ const Modal = ({
                                   dataQa={cancelButtonText}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-cancel-button"
+                                  role="button"
+                                  name={cancelButtonText}
                                 />
                                 <ButtonWithAction
                                   variant={
@@ -169,6 +181,8 @@ const Modal = ({
                                   disabled={isContinueActionDisabled}
                                   extraStyles={buttonExtraStyles}
                                   className="modal-continue-button"
+                                  role="button"
+                                  name={continueButtonText}
                                 />
                               </Stack>
                             )}
@@ -182,6 +196,8 @@ const Modal = ({
                               dataQa={closeButtonText}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
+                              role="button"
+                              name={closeButtonText}
                             />
                           </Box>
                         )}

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

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

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

@@ -7,13 +7,21 @@ import { noop } from "../../../util/general";
 
 const groupId = "props";
 
+const Terms = () => (
+  <p>
+    Terms and <a href="#">conditions</a> modal content.
+  </p>
+);
+
 export const termsAndConditions = () => (
   <TermsAndConditions
     onCheck={noop}
     isChecked={boolean("isChecked", false, groupId)}
-    html={text("html", "terms and conditions summary", groupId)}
-    terms={text("terms", "terms and conditions modal text", 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)"
   />
 );
 

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

@@ -26,7 +26,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;
@@ -75,6 +76,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']"
   />
 );