@thecb/components 8.4.11-beta.16 → 8.4.11-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.11-beta.16",
+  "version": "8.4.11-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

@@ -43,7 +43,7 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
   width: 1px;
 `;
 
-const StyledCheckbox = styled.input`
+const StyledCheckbox = styled.div`
   display: inline-block;
   width: 24px;
   height: 24px;
@@ -125,9 +125,10 @@ const Checkbox = ({
             checked={checked}
             onChange={onChange}
             tabIndex="-1"
+            aria-invalid={error}
+            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
-            type="checkbox"
             error={error}
             disabled={disabled}
             checked={checked}
@@ -138,8 +139,6 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
-            aria-invalid={error}
-            aria-describedby={error ? `${name}-error-message` : ""}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"

package/src/components/atoms/dropdown/Dropdown.js

@@ -333,7 +333,6 @@ const Dropdown = ({
         width="100%"
         dataQa={placeholder}
         required={options.required}
-        aria-required={options.required}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />

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

@@ -103,7 +103,6 @@ const FormInput = ({
   errorMessages,
   isNum = false,
   isEmail = false,
-  isPhone = false,
   helperModal = false,
   field,
   fieldActions,
@@ -201,9 +200,10 @@ const FormInput = ({
         {formatter ? (
           <FormattedInputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={`${createIdFromString(
-              labelTextWhenNoError
-            )}-error-message`}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -212,17 +212,7 @@ const FormInput = ({
             type={type}
             value={field.rawValue}
             pattern={isNum ? "[0-9]*" : ""}
-            inputMode={() => {
-              if (isNum) {
-                return "numeric";
-              } else if (isEmail) {
-                return "email";
-              } else if (isPhone) {
-                return "tel";
-              } else {
-                return "text";
-              }
-            }}
+            inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             formatter={formatter}
             showErrors={showErrors}