@thecb/components 8.4.11-beta.1 → 8.4.11-beta.3

package/package.json

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

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

@@ -92,6 +92,7 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
+      role="alert"
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

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

@@ -126,7 +126,7 @@ const Checkbox = ({
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
-            aria-describedby={error ? `${name}-error-message` : ""}
+            aria-describedBy={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}

package/src/components/molecules/address-form/AddressForm.js

@@ -51,7 +51,6 @@ const AddressForm = ({
         <CountryDropdown
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
-          aria-label="country"
           field={fields.country}
           onChange={value => {
             actions.fields.country.set(value);
@@ -65,17 +64,19 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
+          aria-label="country"
+          aria-role="listbox"
         />
         <FormInput
           labelTextWhenNoError="Address"
           errorMessages={street1ErrorMessages}
           required={true}
-          aria-label="address line 1"
           field={fields.street1}
           fieldActions={actions.fields.street1}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-line1"
+          autocomplete="address-line1"
+          aria-label="address line 1"
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -83,18 +84,19 @@ const AddressForm = ({
           fieldActions={actions.fields.street2}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-line2"
+          autocomplete="address-line2"
+          aria-label="address line 2"
         />
         <FormInput
           labelTextWhenNoError="City"
-          aria-label="city"
           required={true}
           errorMessages={cityErrorMessages}
           field={fields.city}
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-level2"
+          autocomplete="city"
+          aria-label="city"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -104,8 +106,8 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-level1"
-          aria-label={isUS ? "State" : "State or Province"}
+          autoComplete="administrative-area"
+          aria-label={isUS ? "state" : "state or province"}
           required={true}
         />
         <FormInput
@@ -117,12 +119,13 @@ const AddressForm = ({
           fieldActions={actions.fields.zip}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="postal-code"
+          aria-label="zip code"
+          autocomplete="postal-code"
         />
         {showWalletCheckbox && (
           <Checkbox
             name="address checkbox"
-            title="Save address to wallet"
+            title="Save address to Wallet"
             checked={walletCheckboxMarked}
             onChange={saveToWallet}
           />