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

package/package.json

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

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

@@ -127,8 +127,8 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
-            aria-label={checkboxAriaLabel || `${title} checkbox`}
             checked={checked}
+            hidden={true}
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
@@ -150,6 +150,10 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
+            aria-describedby={error ? `${name}-error-message` : ""}
+            aria-labelledby={
+              !checkboxAriaLabel ? `${name}_checkbox_title` : undefined
+            }
             {...checkboxProps}
           >
             <CheckboxIcon
@@ -165,6 +169,7 @@ const Checkbox = ({
         {title && (
           <Text
             variant="p"
+            id={`${name}_checkbox_title`}
             weight={themeValues.textFontWeight}
             color={themeValues.textColor}
             extraStyles={

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

@@ -21,7 +21,7 @@ export const checkbox = () => (
     focused={boolean("focused", false, "props")}
     checkboxAriaLabel={text(
       "checkboxAriaLabel",
-      "Checkbox Label Prop",
+      "CheckboxAriaLabel Prop",
       groupId
     )}
   />

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

@@ -24,7 +24,7 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
-          aria-label={checkboxAriaLabel}
+          checkboxAriaLabel={checkboxAriaLabel}
         />
         <Box padding="0 0 0 58px">
           <Stack>

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

@@ -59,7 +59,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
-              aria-label={checkboxAriaLabel}
+              checkboxAriaLabel={checkboxAriaLabel}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>