@thecb/components 9.2.7-beta.9 → 9.2.9-beta.0

package/package.json

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -265,11 +265,13 @@ const Dropdown = ({
       clearTimeout(timer);
       setTimer(setTimeout(() => setInputValue(""), 20000));
     }
+
     setFilteredOptions(
       options.filter(
         option =>
-          option.value.toLowerCase().match(inputValue.toLowerCase()) ||
-          option.text.toLowerCase().match(inputValue.toLowerCase())
+          option?.value?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >=
+            0 ||
+          option.text?.toLowerCase()?.indexOf(inputValue?.toLowerCase()) >= 0
       )
     );
   }, [inputValue]);

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

@@ -7,6 +7,8 @@ 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,6 +8,8 @@ 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,6 +9,8 @@ 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,6 +7,8 @@ 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/RoutingNumberImage.js

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

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

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