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

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -93,6 +93,7 @@ const Alert = ({
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
       role="alert"
+      aria-atomic={true}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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}
@@ -230,15 +220,16 @@ const FormInput = ({
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            autoComplete={autocomplete}
             {...props}
           />
         ) : (
           <InputField
             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)
@@ -250,7 +241,7 @@ const FormInput = ({
             inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
+            data-qa={createIdFromString(labelTextWhenNoError)}
             themeValues={themeValues}
             background={background}
             $customHeight={customHeight}

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -50,6 +50,7 @@ const AccountAndRoutingModal = ({
     }}
   >
     <Text
+      role="button"
       variant="pS"
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -177,7 +177,7 @@ const PaymentFormCard = ({
               fieldActions={actions.fields.zipCode}
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-              autocomplete="billing postal-code"
+              autoComplete="billing postal-code"
             />
           </Box>
         )}