@thecb/components 9.1.3-beta.0 → 9.1.3

package/dist/index.esm.js

@@ -6356,6 +6356,9 @@ var titleCaseString = function titleCaseString(string) {
     return index === 0 || index === string.length - 1 || word.length > 3 ? titleCaseWord(word.toLowerCase()) : word;
   }).join(" ");
 };
+var kebabCaseString = function kebabCaseString(string) {
+  return string === null || string === void 0 ? void 0 : string.replaceAll(" ", "-").toLowerCase();
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6375,7 +6378,8 @@ var general = /*#__PURE__*/Object.freeze({
   MOBILE_WIDTH: MOBILE_WIDTH,
   throttle: throttle,
   titleCaseWord: titleCaseWord,
-  titleCaseString: titleCaseString
+  titleCaseString: titleCaseString,
+  kebabCaseString: kebabCaseString
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -47058,6 +47062,8 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
       forwardButtonLoading = _ref.forwardButtonLoading,
       _ref$forwardButtonVar = _ref.forwardButtonVariant,
       forwardButtonVariant = _ref$forwardButtonVar === void 0 ? "primary" : _ref$forwardButtonVar,
+      _ref$forwardButtonAri = _ref.forwardButtonAriaRole,
+      forwardButtonAriaRole = _ref$forwardButtonAri === void 0 ? "button" : _ref$forwardButtonAri,
       _ref$backButtonVarian = _ref.backButtonVariant,
       backButtonVariant = _ref$backButtonVarian === void 0 ? "secondary" : _ref$backButtonVarian,
       backButtonAction = _ref.backButtonAction,
@@ -47081,13 +47087,17 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     url: cancelURL,
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: cancelText
+    dataQa: cancelText,
+    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
+    role: "link"
   }) : backButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: "Back",
     variant: backButtonVariant,
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
-    dataQa: "Back"
+    dataQa: "Back",
+    "aria-labelledby": "back-button",
+    role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React.createElement(ButtonWithLink, {
     url: redirectURL,
@@ -47095,7 +47105,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     variant: forwardButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: redirectText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
+    role: forwardButtonAriaRole
   }) : forwardButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: forwardButtonText,
     variant: forwardButtonVariant,
@@ -47103,7 +47115,9 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     isLoading: forwardButtonLoading,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: forwardButtonText,
-    disabled: isForwardButtonDisabled
+    disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
+    role: forwardButtonAriaRole
   });
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Box, {
     padding: "1.25rem 0"
@@ -49311,11 +49325,11 @@ var CenterSingle = function CenterSingle(_ref) {
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    extraStyles: "z-index: 1;",
-    role: "main"
+    extraStyles: "z-index: 1;"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React.createElement(Fragment$1, null), /*#__PURE__*/React.createElement(Center, {
     maxWidth: isMobile && fullWidthMobile ? "100%" : maxContentWidth,
-    intrinsic: !isMobile
+    intrinsic: !isMobile,
+    role: "main"
   }, centeredMobileContent ? /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
     singleChild: true
@@ -49341,7 +49355,9 @@ var CenterStack = function CenterStack(_ref) {
       _ref$fullWidthMobile = _ref.fullWidthMobile,
       fullWidthMobile = _ref$fullWidthMobile === void 0 ? true : _ref$fullWidthMobile,
       content = _ref.content,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? "main" : _ref$role;
   var themeContext = useContext(ThemeContext);
   var isMobile = themeContext.isMobile;
   return /*#__PURE__*/React.createElement(Box, {
@@ -49353,11 +49369,11 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    minWidth: "100%",
-    role: "main"
+    minWidth: "100%"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React.createElement(Fragment$1, null), /*#__PURE__*/React.createElement(Center, {
     maxWidth: isMobile && fullWidthMobile ? "100%" : maxContentWidth,
-    intrinsic: !isMobile
+    intrinsic: !isMobile,
+    role: role
   }, /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
     singleChild: true
@@ -49403,11 +49419,11 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0",
     minWidth: "100%",
     minHeight: "100%",
-    extraStyles: "z-index: 1;",
-    role: "main"
+    extraStyles: "z-index: 1;"
   }, subHeader && !(isMobile && hideMobileSubHeader) ? subHeader : /*#__PURE__*/React.createElement(Fragment$1, null), /*#__PURE__*/React.createElement(Center, {
     maxWidth: maxWidth,
-    gutters: gutters
+    gutters: gutters,
+    role: "main"
   }, content)), footer ? footer : /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   })));