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

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -95,7 +95,8 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null
+  dataQa = null,
+  checkboxAriaLabel = ""
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -105,6 +106,10 @@ const Checkbox = ({
     }
   };
 
+  const checkboxProps = {
+    ...(checkboxAriaLabel ? { "aria-label": checkboxAriaLabel } : {})
+  };
+
   return (
     <Box
       padding="0"
@@ -116,12 +121,13 @@ const Checkbox = ({
       background={themeValues.backgroundColor}
       extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
     >
-      <CheckboxLabelContainer data-qa={dataQa} id={`${name}_label_container`}>
+      <CheckboxLabelContainer data-qa={dataQa}>
         <CheckboxContainer data-qa="Checkbox">
           <HiddenCheckbox
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
+            aria-label={checkboxAriaLabel || `${title} checkbox`}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
@@ -130,8 +136,11 @@ const Checkbox = ({
           />
           <StyledCheckbox
             role="checkbox"
+            name={name}
             error={error}
+            aria-invalid={error}
             disabled={disabled}
+            aria-disabled={disabled}
             checked={checked}
             aria-checked={checked}
             focused={focused}
@@ -141,9 +150,7 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
-            aria-labelledby={
-              title ? `${name}_title_id` : `${name}_label_container`
-            }
+            {...checkboxProps}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"
@@ -160,7 +167,6 @@ const Checkbox = ({
             variant="p"
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}
-            id={`${name}_title_id`}
             extraStyles={
               textExtraStyles
                 ? `${textExtraStyles} ${disabled &&

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -19,6 +19,11 @@ export const checkbox = () => (
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
+    checkboxAriaLabel={text(
+      "checkboxAriaLabel",
+      "Checkbox Label Prop",
+      groupId
+    )}
   />
 );
 

package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -27,11 +27,11 @@ const Terms = () => (
 export const termsAndConditions = () => (
   <TermsAndConditions
     onCheck={noop}
-    title="Agree to the terms and conditions"
     isChecked={boolean("isChecked", false, groupId)}
     terms={<Terms />}
     error={boolean("error", false, groupId)}
     initialFocusSelector={text("initialFocusSelector", "#focus-me", groupId)}
+    checkboxAriaLabel="I agree to the Terms and Conditions"
   />
 );
 

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -12,9 +12,7 @@ const TermsAndConditionsControlV1 = ({
   error = false,
   linkVariant,
   initialFocusSelector = "",
-  id = "terms-and-conditions",
-  screenReaderCheckboxLabel = "",
-  ariaLabelledBy = ""
+  checkboxAriaLabel = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -26,23 +24,11 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
-          aria-labelledby={
-            ariaLabelledBy ||
-            (screenReaderCheckboxLabel
-              ? `${id}_sr_only_label`
-              : `${id}_html_label`)
-          }
+          aria-label={checkboxAriaLabel}
         />
         <Box padding="0 0 0 58px">
-          {screenReaderCheckboxLabel && (
-            <span className="sr-only-text" id={`${id}_sr_only_label`}>
-              {screenReaderCheckboxLabel}
-            </span>
-          )}
           <Stack>
-            <Box padding="0" id={`${id}_html_label`}>
-              {html}
-            </Box>
+            <Box padding="0">{html}</Box>
             {terms && (
               <TermsAndConditionsModal
                 link="Learn More"

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import Checkbox from "../../atoms/checkbox";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 import Text from "../../atoms/text";
@@ -28,8 +28,7 @@ const TermsAndConditionsControlV2 = ({
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
   initialFocusSelector = "",
-  screenReaderCheckboxLabel = "",
-  ariaLabelledBy = ""
+  checkboxAriaLabel = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -50,34 +49,18 @@ const TermsAndConditionsControlV2 = ({
       borderRadius={displayInline ? "0" : "4px"}
     >
       <Stack childGap="0">
-        {html && (
-          <Box padding="0" id={`${id}_html_label`}>
-            {html}
-          </Box>
-        )}
+        {html && <Box padding="0">{html}</Box>}
         <Cluster justify="flex-start" align="center" nowrap>
           {showCheckbox && (
-            <Fragment>
-              <Checkbox
-                name={id}
-                error={hasError}
-                checked={isChecked}
-                onChange={onCheck}
-                checkboxMargin={checkboxMargin}
-                extraStyles={`align-self: flex-start;`}
-                aria-labelledby={
-                  ariaLabelledBy ||
-                  (screenReaderCheckboxLabel
-                    ? `${id}_sr_only_label`
-                    : `${id}_html_label`)
-                }
-              />
-              {screenReaderCheckboxLabel && (
-                <span className="sr-only-text" id={`${id}_sr_only_label`}>
-                  {screenReaderCheckboxLabel}
-                </span>
-              )}
-            </Fragment>
+            <Checkbox
+              name={id}
+              error={hasError}
+              checked={isChecked}
+              onChange={onCheck}
+              checkboxMargin={checkboxMargin}
+              extraStyles={`align-self: flex-start;`}
+              aria-label={checkboxAriaLabel}
+            />
           )}
           <Stack childGap="0.25rem" fullHeight>
             <Cluster