@thecb/components 9.1.2-beta.0 → 9.1.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.1.2-beta.0",
+  "version": "9.1.2-beta.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,
@@ -12,6 +13,7 @@ const PaymentButtonBar = ({
   forwardButtonAction,
   forwardButtonLoading,
   forwardButtonVariant = "primary",
+  forwardButtonAriaRole = "button",
   backButtonVariant = "secondary",
   backButtonAction,
   cancelURL,
@@ -32,6 +34,7 @@ const PaymentButtonBar = ({
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={cancelText}
+        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
     ) : (
@@ -42,6 +45,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
+          aria-labelledby="back-button"
           role="link"
         />
       )
@@ -55,7 +59,8 @@ const PaymentButtonBar = ({
       extraStyles={isMobile && "flex-grow: 1"}
       dataQa={redirectText}
       disabled={isForwardButtonDisabled}
-      role="link"
+      aria-labelledby={`${kebabCaseString(redirectText)}-button`}
+      role={forwardButtonAriaRole}
     />
   ) : (
     forwardButtonAction && (
@@ -67,7 +72,8 @@ const PaymentButtonBar = ({
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={forwardButtonText}
         disabled={isForwardButtonDisabled}
-        role="link"
+        aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
+        role={forwardButtonAriaRole}
       />
     )
   );

package/src/util/general.js

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