@thecb/components 9.1.2-beta.1 → 9.1.2

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"];
@@ -47084,6 +47088,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     variant: backButtonVariant,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: cancelText,
+    "aria-labelledby": "".concat(kebabCaseString(cancelText), "-button"),
     role: "link"
   }) : backButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: "Back",
@@ -47091,6 +47096,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     action: backButtonAction,
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: "Back",
+    "aria-labelledby": "back-button",
     role: "link"
   });
   var forwardButton = !!redirectURL ? /*#__PURE__*/React.createElement(ButtonWithLink, {
@@ -47100,6 +47106,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: redirectText,
     disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(redirectText), "-button"),
     role: forwardButtonAriaRole
   }) : forwardButtonAction && /*#__PURE__*/React.createElement(ButtonWithAction, {
     text: forwardButtonText,
@@ -47109,6 +47116,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     extraStyles: isMobile && "flex-grow: 1",
     dataQa: forwardButtonText,
     disabled: isForwardButtonDisabled,
+    "aria-labelledby": "".concat(kebabCaseString(forwardButtonText), "-button"),
     role: forwardButtonAriaRole
   });
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Box, {
@@ -49317,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
@@ -49347,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, {
@@ -49359,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
@@ -49409,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"
   })));