@thecb/components 8.4.10 → 8.4.11-beta.2

package/package.json

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

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/atoms/country-dropdown/CountryDropdown.js

@@ -9,7 +9,8 @@ const CountryDropdown = ({
   field,
   fieldActions,
   showErrors,
-  onChange
+  onChange,
+  ...rest
 }) => (
   <FormSelect
     options={options}
@@ -20,6 +21,8 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
+    autoComplete="country-name"
+    {...rest}
   />
 );
 export default CountryDropdown;

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

@@ -295,7 +295,10 @@ const Dropdown = ({
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
-        autocomplete={autocompleteValue}
+        aria-live="assertive"
+        role="combobox"
+        disabled={disabled}
+        autoComplete={autocompleteValue}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
         borderSize="1px"
@@ -325,7 +328,6 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
-        role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
         type="text"
@@ -365,7 +367,7 @@ const Dropdown = ({
                     }
                     key={choice.value}
                     ref={optionRefs.current[i]}
-                    tabIndex={-1}
+                    tabIndex={0}
                     onClick={e => handleItemSelection(e, choice, i)}
                     onKeyDown={e => {
                       if (e.keyCode === 13) {

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

@@ -249,7 +249,7 @@ const FormInput = ({
           />
         )}
       </Box>
-      <Stack direction="row" justify="space-between" aria-live="polite">
+      <Stack direction="row" justify="space-between" role="alert">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

package/src/components/atoms/form-select/FormSelect.js

@@ -22,7 +22,8 @@ const FormSelect = ({
   themeValues,
   hasTitles = false,
   autocompleteValue, // browser autofill value, like country-name or address-level1 for state
-  smoothScroll = true // whether the browser should animate scroll to selected item on first open
+  smoothScroll = true, // whether the browser should animate scroll to selected item on first open
+  ...rest
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -41,7 +42,7 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef} disabled={disabled}>
+    <SelectContainer ref={dropdownRef} disabled={disabled} {...rest}>
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -61,8 +62,8 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedby={createIdFromString(
+        aria-labelledBy={createIdFromString(labelTextWhenNoError)}
+        aria-describedBy={createIdFromString(
           labelTextWhenNoError,
           "error message"
         )}
@@ -80,28 +81,28 @@ const FormSelect = ({
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
-        disabled={disabled}
+        aria-disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
+        required={options.required}
       />
-      <Stack direction="row" justify="space-between" aria-live="polite">
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
-          <Text
-            color={ERROR_COLOR}
-            variant="pXS"
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
-                font-family: Public Sans;
-                &::first-letter {
-                  text-transform: uppercase;
-                }`}
-            id={createIdFromString(labelTextWhenNoError, "error message")}
-          >
-            {errorMessages[field.errors[0]]}
-          </Text>
-        ) : (
-          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
-        )}
+      <Stack direction="row" justify="space-between" aria-live="assertive">
+        <Text
+          color={ERROR_COLOR}
+          variant="pXS"
+          weight={themeValues.fontWeight}
+          extraStyles={`word-break: break-word;
+            font-family: Public Sans;
+            &::first-letter {
+              text-transform: uppercase;
+            }`}
+          id={createIdFromString(labelTextWhenNoError, "error message")}
+          aria-live="assertive"
+        >
+          {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+            ? errorMessages[field.errors[0]]
+            : ""}
+        </Text>
       </Stack>
     </SelectContainer>
   );

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

@@ -64,15 +64,18 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
+          aria-label="country"
         />
         <FormInput
           labelTextWhenNoError="Address"
           errorMessages={street1ErrorMessages}
+          required={true}
           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)"
@@ -80,16 +83,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"
+          required={true}
           errorMessages={cityErrorMessages}
           field={fields.city}
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="address-level2"
+          autoComplete="locality"
+          aria-label="city"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -99,7 +105,9 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="address-level1"
+          autoComplete="administrative-area"
+          aria-label={isUS ? "state" : "state or province"}
+          required={true}
         />
         <FormInput
           isNum={isUS}
@@ -110,12 +118,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}
           />