@thecb/components 12.0.0 → 12.0.1

package/package.json

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

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

@@ -101,6 +101,7 @@ const Checkbox = forwardRef(
       themeValues,
       hidden = false,
       error = false,
+      isRequired = false,
       checkboxMargin = "0 16px 0 0",
       extraStyles,
       textExtraStyles,
@@ -130,6 +131,13 @@ const Checkbox = forwardRef(
         ref={ref}
         padding="0"
         tabIndex="0"
+        role="checkbox"
+        aria-checked={checked}
+        aria-required={isRequired || undefined}
+        aria-invalid={error}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledById}
+        aria-describedby={error ? `${name}-error-message` : undefined}
         onFocus={() => setFocused(true)}
         onBlur={() => setFocused(false)}
         onKeyDown={e => handleClick(e, onChange)}
@@ -150,20 +158,17 @@ const Checkbox = forwardRef(
               id={`checkbox-${name}`}
               disabled={disabled}
               name={name}
-              aria-label={ariaLabel}
-              aria-labelledby={ariaLabelledById}
               checked={checked}
               onChange={onChange}
               tabIndex="-1"
-              aria-invalid={error}
-              aria-describedby={error ? `${name}-error-message` : ""}
+              required={isRequired}
+              aria-hidden="true"
             />
             <StyledCheckbox
-              role="checkbox"
+              aria-hidden="true"
               error={error}
               disabled={disabled}
               checked={checked}
-              aria-checked={checked}
               focused={focused}
               defaultStyles={themeValues.defaultStyles}
               checkedStyles={themeValues.checkedStyles}

package/src/components/atoms/form-layouts/FormInput.js

@@ -224,6 +224,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
+            aria-required={isRequired}
             onChange={value => setValue(value)}
             onBlur={e => handleOnBlur(e.target.value)}
             type={type}
@@ -265,6 +266,7 @@ const FormInput = ({
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
             }
+            aria-required={isRequired}
             onChange={e => setValue(e.target.value)}
             onBlur={e => handleOnBlur(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -65,6 +65,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         autocompleteValue="given-name"
         dataQa="First name"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Last name"
@@ -75,6 +76,7 @@ const RegistrationForm = ({
         onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         autocompleteValue="family-name"
         dataQa="Last name"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Email address"
@@ -87,6 +89,7 @@ const RegistrationForm = ({
         isEmail
         autocompleteValue="email"
         dataQa="Email address"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Password"
@@ -98,6 +101,7 @@ const RegistrationForm = ({
         type="password"
         autocompleteValue="new-password"
         dataQa="Password"
+        isRequired
       />
       <FormInput
         labelTextWhenNoError="Confirm password"
@@ -109,6 +113,7 @@ const RegistrationForm = ({
         type="password"
         autocompleteValue="new-password"
         dataQa="Confirm password"
+        isRequired
       />
       <Box padding={isMobile ? "0" : "0.5rem 0 0"}>
         <PasswordRequirements password={fields.password} isMobile={isMobile} />

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

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