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

package/dist/index.cjs.js

@@ -13683,7 +13683,9 @@ var AccountNumberImage = function AccountNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "371",
     height: "164",
-    viewBox: "0 0 371 164"
+    viewBox: "0 0 371 164",
+    role: "img",
+    "aria-label": "A check with the account number highlighted in the bottom center"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13764,7 +13766,9 @@ var RoutingNumberImage = function RoutingNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "371",
     height: "164",
-    viewBox: "0 0 371 164"
+    viewBox: "0 0 371 164",
+    role: "img",
+    "aria-label": "A check with the routing number highlighted in the lower left hand corner"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13847,7 +13851,9 @@ var CheckmarkIcon = function CheckmarkIcon() {
     viewBox: "0 0 98 98",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img",
+    "aria-label": "Successful payment, green checkmark"
   }, /*#__PURE__*/React__default.createElement("g", {
     id: "Cityville-Checkout---Desktop---Logged-In",
     stroke: "none",
@@ -13892,7 +13898,9 @@ var BankIcon = function BankIcon() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Check Payment"
   }, /*#__PURE__*/React__default.createElement("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",
     fill: "#E4F4FD"
@@ -13939,7 +13947,9 @@ var GenericCard = function GenericCard() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Card Payment"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "28",
     height: "18",
@@ -23998,7 +24008,9 @@ var Dropdown = function Dropdown(_ref13) {
     }
 
     setFilteredOptions(options.filter(function (option) {
-      return option.value.toLowerCase().match(inputValue.toLowerCase()) || option.text.toLowerCase().match(inputValue.toLowerCase());
+      var _option$value, _option$value$toLower, _option$text, _option$text$toLowerC;
+
+      return (option === null || option === void 0 ? void 0 : (_option$value = option.value) === null || _option$value === void 0 ? void 0 : (_option$value$toLower = _option$value.toLowerCase()) === null || _option$value$toLower === void 0 ? void 0 : _option$value$toLower.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0 || ((_option$text = option.text) === null || _option$text === void 0 ? void 0 : (_option$text$toLowerC = _option$text.toLowerCase()) === null || _option$text$toLowerC === void 0 ? void 0 : _option$text$toLowerC.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0;
     }));
   }, [inputValue]);
   React.useEffect(function () {
@@ -45751,9 +45763,7 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-      _ref$initialFocus = _ref.initialFocus,
-      initialFocus = _ref$initialFocus === void 0 ? null : _ref$initialFocus;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45763,7 +45773,7 @@ var Modal$1 = function Modal(_ref) {
     ref: modalContainerRef,
     "data-qa": dataQa
   }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
-  , _extends({
+  , {
     focusTrapOptions: {
       fallbackFocus: modalContainerRef === null || modalContainerRef === void 0 ? void 0 : modalContainerRef.current
     },
@@ -45777,14 +45787,11 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: customWidth || "615px"
+      width: customWidth || "615px",
+      overflow: "auto"
     },
-    underlayClickExits: underlayClickExits,
-    "aria-modal": true,
-    "aria-name": modalHeaderText
-  }, initialFocus ? {
-    initialFocus: initialFocus
-  } : {}), /*#__PURE__*/React__default.createElement(Box, {
+    underlayClickExits: underlayClickExits
+  }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
@@ -45830,9 +45837,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45844,9 +45849,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45857,9 +45860,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45868,9 +45869,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -45879,9 +45878,7 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button",
-    role: "button",
-    name: closeButtonText
+    className: "modal-close-button"
   }))))))))), children);
 };
 
@@ -47726,9 +47723,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;",
-    role: "button",
-    className: "modal-trigger"
+    extraStyles: "cursor: pointer;"
   }, link));
 };
 
@@ -47785,10 +47780,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues,
-      _ref$initialFocus = _ref.initialFocus,
-      initialFocus = _ref$initialFocus === void 0 ? null : _ref$initialFocus;
-  return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
+      themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -47814,9 +47807,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  }, initialFocus ? {
-    initialFocus: initialFocus
-  } : {}), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
       return toggleOpen(true);
@@ -47828,9 +47819,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
-    role: "button",
-    className: "modal-trigger"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
   }, link));
 };
 
@@ -47865,8 +47854,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant,
-    initialFocus: "[role=\"button\"]:not(.modal-trigger)"
+    linkVariant: linkVariant
   })))));
 };
 
@@ -47949,8 +47937,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle,
-    initialFocus: ".modal-close-button"
+    title: modalTitle
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true