@thecb/components 9.2.9 → 9.2.10-beta.0

package/dist/index.esm.js

@@ -13675,9 +13675,7 @@ var AccountNumberImage = function AccountNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "371",
     height: "164",
-    viewBox: "0 0 371 164",
-    role: "img",
-    "aria-label": "A check with the account number highlighted in the bottom center"
+    viewBox: "0 0 371 164"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13758,9 +13756,7 @@ var RoutingNumberImage = function RoutingNumberImage() {
     xmlns: "http://www.w3.org/2000/svg",
     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"
+    viewBox: "0 0 371 164"
   }, /*#__PURE__*/React.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -13843,9 +13839,7 @@ 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",
-    role: "img",
-    "aria-label": "Successful payment, green checkmark"
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React.createElement("g", {
     id: "Cityville-Checkout---Desktop---Logged-In",
     stroke: "none",
@@ -13890,9 +13884,7 @@ var BankIcon = function BankIcon() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": "Check Payment"
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.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,9 +13931,7 @@ var GenericCard = function GenericCard() {
     height: "18",
     viewBox: "0 0 28 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": "Card Payment"
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "28",
     height: "18",
@@ -15200,9 +15190,7 @@ var GenericCardLarge = function GenericCardLarge() {
     height: "24",
     viewBox: "0 0 36 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img",
-    "aria-label": "Card Payment"
+    xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "36",
     height: "24",
@@ -45757,7 +45745,11 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+      _ref$modalName = _ref.modalName,
+      modalName = _ref$modalName === void 0 ? "" : _ref$modalName;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45784,7 +45776,10 @@ var Modal$1 = function Modal(_ref) {
       width: customWidth || "615px",
       overflow: "auto"
     },
-    underlayClickExits: underlayClickExits
+    underlayClickExits: underlayClickExits,
+    "aria-modal": true,
+    "aria-name": !!modalName.length ? modalName : modalHeaderText,
+    initialFocus: initialFocusSelector
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45831,7 +45826,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   })), /*#__PURE__*/React.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45843,7 +45840,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45854,7 +45853,9 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button"
+    className: "modal-cancel-button",
+    role: "button",
+    name: cancelButtonText
   }), /*#__PURE__*/React.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45863,7 +45864,9 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button"
+    className: "modal-continue-button",
+    role: "button",
+    name: continueButtonText
   }))) : /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
@@ -45872,7 +45875,9 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button"
+    className: "modal-close-button",
+    role: "button",
+    name: closeButtonText
   }))))))))), children);
 };
 
@@ -47717,7 +47722,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;"
+    extraStyles: "cursor: pointer;",
+    role: "button",
+    className: "modal-trigger"
   }, link));
 };
 
@@ -47774,7 +47781,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
   return /*#__PURE__*/React.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47800,7 +47809,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: initialFocusSelector
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47813,7 +47823,10 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
+    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));
 };
 
@@ -47826,7 +47839,9 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
+      linkVariant = _ref.linkVariant,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47848,7 +47863,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant
+    linkVariant: linkVariant,
+    initialFocusSelector: initialFocusSelector
   })))));
 };
 
@@ -47877,7 +47893,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
+      _ref$initialFocusSele = _ref.initialFocusSelector,
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47931,7 +47949,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle
+    title: modalTitle,
+    initialFocusSelector: initialFocusSelector
   })), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -47950,7 +47969,9 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
-  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
+  return /*#__PURE__*/React.createElement(TermsAndConditionsControl, _extends({
+    initialFocusSelector: "[role='button']:not(.modal-trigger)"
+  }, rest));
 };
 
 var PaymentFormACH = function PaymentFormACH(_ref) {