@thecb/components 9.2.10-beta.15 → 9.2.10-beta.17

package/package.json

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

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

@@ -33,7 +33,7 @@ const CheckboxIcon = styled.svg`
 const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
   border: 0;
   clip: rect(0 0 0 0);
-  clip-path: inset(50%);
+  clippath: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -95,8 +95,7 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null,
-  checkboxAriaLabel = ""
+  dataQa = null
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -123,17 +122,15 @@ const Checkbox = ({
             id={`checkbox-${name}`}
             disabled={disabled}
             name={name}
+            aria-label={name}
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
             aria-describedby={error ? `${name}-error-message` : ""}
-            aria-hidden={true}
           />
           <StyledCheckbox
             role="checkbox"
-            aria-invalid={error}
-            aria-describedby={error ? `${name}-error-message` : ""}
             error={error}
             disabled={disabled}
             checked={checked}
@@ -145,7 +142,6 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
-            aria-label={checkboxAriaLabel}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"

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

@@ -31,7 +31,6 @@ export const termsAndConditions = () => (
     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

@@ -11,8 +11,7 @@ const TermsAndConditionsControlV1 = ({
   terms,
   error = false,
   linkVariant,
-  initialFocusSelector = "",
-  checkboxAriaLabel = ""
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -24,7 +23,6 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
-          checkboxAriaLabel={checkboxAriaLabel}
         />
         <Box padding="0 0 0 58px">
           <Stack>

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

@@ -27,8 +27,7 @@ const TermsAndConditionsControlV2 = ({
   containerBackground = ATHENS_GREY,
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
-  initialFocusSelector = "",
-  checkboxAriaLabel = ""
+  initialFocusSelector = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -59,7 +58,6 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
-              checkboxAriaLabel={checkboxAriaLabel}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>