@thecb/components 9.1.2-beta.1 → 9.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.2-beta.1",
+  "version": "9.1.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -5,6 +5,7 @@ import ButtonWithLink from "../../atoms/button-with-link";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { Box, Cluster } from "../../atoms/layouts";
 import SolidDivider from "../../atoms/solid-divider";
+import { kebabCaseString } from "../../../util/general";
 
 const PaymentButtonBar = ({
   isForwardButtonDisabled = false,
@@ -33,6 +34,7 @@ const PaymentButtonBar = ({
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={cancelText}
+        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
     ) : (
@@ -43,6 +45,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
+          aria-labelledby="back-button"
           role="link"
         />
       )
@@ -56,6 +59,7 @@ const PaymentButtonBar = ({
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
       disabled={isForwardButtonDisabled}
+      aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
     />
   ) : (
@@ -68,6 +72,7 @@ const PaymentButtonBar = ({
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={forwardButtonText}
         disabled={isForwardButtonDisabled}
+        aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}
       />
     )

package/src/components/templates/center-single/CenterSingle.js

@@ -30,12 +30,7 @@ const CenterSingle = ({
     >
       <Cover centerOverride={isMobile && !centeredMobileContent}>
         {header ? header : <Box padding="0" />}
-        <Box
-          padding="0"
-          minWidth="100%"
-          extraStyles={`z-index: 1;`}
-          role="main"
-        >
+        <Box padding="0" minWidth="100%" extraStyles={`z-index: 1;`}>
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
@@ -44,6 +39,7 @@ const CenterSingle = ({
           <Center
             maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
             intrinsic={!isMobile}
+            role="main"
           >
             {centeredMobileContent ? (
               <Cover minHeight="100%" singleChild>

package/src/components/templates/center-stack/CenterStack.js

@@ -15,7 +15,8 @@ const CenterStack = ({
   maxContentWidth = "36.75rem",
   fullWidthMobile = true,
   content,
-  themeValues
+  themeValues,
+  role = "main"
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -29,7 +30,7 @@ const CenterStack = ({
     >
       <Cover>
         {header ? header : <Box padding="0" />}
-        <Box padding="0" minWidth="100%" role="main">
+        <Box padding="0" minWidth="100%">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
@@ -38,6 +39,7 @@ const CenterStack = ({
           <Center
             maxWidth={isMobile && fullWidthMobile ? "100%" : maxContentWidth}
             intrinsic={!isMobile}
+            role={role}
           >
             <Cover minHeight="100%" singleChild>
               <Stack childGap={contentSpacing}>{content}</Stack>

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -38,14 +38,13 @@ const CenterSingle = ({
           minWidth="100%"
           minHeight="100%"
           extraStyles={`z-index: 1;`}
-          role="main"
         >
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (
             <Fragment />
           )}
-          <Center maxWidth={maxWidth} gutters={gutters}>
+          <Center maxWidth={maxWidth} gutters={gutters} role="main">
             {content}
           </Center>
         </Box>

package/src/util/general.js

@@ -159,3 +159,7 @@ export const titleCaseString = string => {
     )
     .join(" ");
 };
+
+export const kebabCaseString = string => {
+  return string?.replaceAll(" ", "-").toLowerCase();
+};