@thecb/components 9.2.10-beta.0 → 9.2.10-beta.10

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",
@@ -15198,7 +15208,9 @@ var GenericCardLarge = function GenericCardLarge() {
     height: "24",
     viewBox: "0 0 36 24",
     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: "36",
     height: "24",
@@ -22095,7 +22107,7 @@ var HiddenCheckbox = styled__default.input.attrs({
 }).withConfig({
   displayName: "Checkbox__HiddenCheckbox",
   componentId: "sc-36kqbv-3"
-})(["border:0;clip:rect(0 0 0 0);clippath:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
+})(["border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;"]);
 var StyledCheckbox = styled__default.div.withConfig({
   displayName: "Checkbox__StyledCheckbox",
   componentId: "sc-36kqbv-4"
@@ -22163,14 +22175,14 @@ var Checkbox = function Checkbox(_ref4) {
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    id: "".concat(name, "_label_container")
   }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
     id: "checkbox-".concat(name),
     disabled: disabled,
     name: name,
-    "aria-label": name,
     checked: checked,
     onChange: onChange,
     tabIndex: "-1",
@@ -22188,7 +22200,8 @@ var Checkbox = function Checkbox(_ref4) {
     errorStyles: themeValues.errorStyles,
     disabledStyles: themeValues.disabledStyles,
     disabledCheckedStyles: themeValues.disabledCheckedStyles,
-    focusedStyles: themeValues.focusedStyles
+    focusedStyles: themeValues.focusedStyles,
+    "aria-labelledby": title ? "".concat(name, "_title_id") : "".concat(name, "_label_container")
   }, /*#__PURE__*/React__default.createElement(CheckboxIcon, {
     viewBox: "0 0 24 24",
     disabled: disabled,
@@ -22200,6 +22213,7 @@ var Checkbox = function Checkbox(_ref4) {
     variant: "p",
     weight: themeValues.textFontWeight,
     color: themeValues.textColor,
+    id: "".concat(name, "_title_id"),
     extraStyles: textExtraStyles ? "".concat(textExtraStyles, " ").concat(disabled && "color: #6e727e; background-color: #f7f7f7;", " ") : "margin-left: 1rem ".concat(disabled && "color: #6e727e; background-color: #f7f7f7;")
   }, title)));
 };
@@ -45755,9 +45769,7 @@ var Modal$1 = function Modal(_ref) {
       _ref$dataQa = _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;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45786,8 +45798,9 @@ var Modal$1 = function Modal(_ref) {
     },
     underlayClickExits: underlayClickExits,
     "aria-modal": true,
-    "aria-name": !!modalName.length ? modalName : modalHeaderText,
-    initialFocus: initialFocusSelector
+    initialFocus: initialFocusSelector,
+    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
+
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -47717,7 +47730,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    }
+    },
+    initialFocusSelector: "[name='Close']"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47849,7 +47863,13 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       error = _ref$error === void 0 ? false : _ref$error,
       linkVariant = _ref.linkVariant,
       _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "terms-and-conditions" : _ref$id,
+      _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
+      screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
+      _ref$ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47861,11 +47881,16 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     title: "Terms and Conditions",
     error: error,
     checked: isChecked,
-    onChange: onCheck
+    onChange: onCheck,
+    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 58px"
-  }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+  }, screenReaderCheckboxLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "sr-only-text",
+    id: "".concat(id, "_sr_only_label")
+  }, screenReaderCheckboxLabel), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    id: "".concat(id, "_html_label")
   }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
@@ -47903,7 +47928,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$modalTitle = _ref.modalTitle,
       modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
       _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
+      _ref$screenReaderChec = _ref.screenReaderCheckboxLabel,
+      screenReaderCheckboxLabel = _ref$screenReaderChec === void 0 ? "" : _ref$screenReaderChec,
+      _ref$ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaLabelledBy = _ref$ariaLabelledBy === void 0 ? "" : _ref$ariaLabelledBy;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47929,19 +47958,24 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+    padding: "0",
+    id: "".concat(id, "_html_label")
   }, html), /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center",
     nowrap: true
-  }, showCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }, showCheckbox && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: id,
     error: hasError,
     checked: isChecked,
     onChange: onCheck,
     checkboxMargin: checkboxMargin,
-    extraStyles: "align-self: flex-start;"
-  }), /*#__PURE__*/React__default.createElement(Stack, {
+    extraStyles: "align-self: flex-start;",
+    "aria-labelledby": ariaLabelledBy || (screenReaderCheckboxLabel ? "".concat(id, "_sr_only_label") : "".concat(id, "_html_label"))
+  }), screenReaderCheckboxLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "sr-only-text",
+    id: "".concat(id, "_sr_only_label")
+  }, screenReaderCheckboxLabel)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0.25rem",
     fullHeight: true
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -47977,9 +48011,7 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
-  return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, _extends({
-    initialFocusSelector: "[role='button']:not(.modal-trigger)"
-  }, rest));
+  return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
@@ -48161,7 +48193,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };
 
@@ -48357,7 +48390,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    initialFocusSelector: ".modal-close-button"
   })))));
 };