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

package/package.json

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

@@ -21,7 +21,6 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    autoComplete="country-name"
     {...rest}
   />
 );

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -26,6 +26,8 @@ const story = page({
 const CountryFormWrapper = ({ fields, actions }) => (
   <Box minHeight="300px">
     <CountryDropdown
+      aria-label="Country"
+      labelTextWhenNoError="Country"
       errorMessages={errorMessages}
       options={options}
       field={fields.country}

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

@@ -288,16 +288,12 @@ const Dropdown = ({
         as="input"
         aria-multiline="false"
         aria-autocomplete="list"
-        aria-controls={`${ariaLabelledby}_listbox`}
         aria-activedescendant="focused_option"
         aria-owns={`${ariaLabelledby}_listbox`}
+        aria-controls={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        aria-expanded={isOpen}
-        aria-live="assertive"
-        role="combobox"
-        disabled={disabled}
         autoComplete={autocompleteValue}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
@@ -319,6 +315,7 @@ const Dropdown = ({
         minHeight="48px"
         minWidth="100%"
         name={autocompleteValue}
+        aria-expanded={isOpen}
         onChange={e => {
           // support autofill and copy/paste
           if (e.target.value !== inputValue) {
@@ -329,6 +326,7 @@ const Dropdown = ({
         padding="12px"
         placeholder={getSelection()}
         themeValues={themeValues}
+        role="combobox"
         title={hasTitles ? getSelection() : null}
         type="text"
         tabIndex={0}
@@ -367,7 +365,7 @@ const Dropdown = ({
                     }
                     key={choice.value}
                     ref={optionRefs.current[i]}
-                    tabIndex={0}
+                    tabIndex={-1}
                     onClick={e => handleItemSelection(e, choice, i)}
                     onKeyDown={e => {
                       if (e.keyCode === 13) {
@@ -393,14 +391,14 @@ const Dropdown = ({
                           : MINESHAFT_GREY
                       }
                       extraStyles={`padding-left: 16px; 
-                      cursor: ${
-                        disabledValues.includes(choice.value)
-                          ? "default"
-                          : "pointer"
-                      }; 
-                      white-space: nowrap; 
-                      overflow: hidden; 
-                      text-overflow: ellipsis;`}
+                        cursor: ${
+                          disabledValues.includes(choice.value)
+                            ? "default"
+                            : "pointer"
+                        }; 
+                        white-space: nowrap; 
+                        overflow: hidden; 
+                        text-overflow: ellipsis;`}
                     >
                       {choice.text}
                     </Text>

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

@@ -198,10 +198,7 @@ const FormInput = ({
         {formatter ? (
           <FormattedInputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={createIdFromString(
-              labelTextWhenNoError,
-              "error message"
-            )}
+            aria-describedby={createIdFromString(labelTextWhenNoError)}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -218,16 +215,13 @@ 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)}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -244,7 +238,7 @@ const FormInput = ({
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autoComplete={autocomplete}
+            autocomplete={autocomplete}
             {...props}
           />
         )}

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

@@ -22,8 +22,7 @@ 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
-  ...rest
+  smoothScroll = true // whether the browser should animate scroll to selected item on first open
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -42,7 +41,7 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef} disabled={disabled} {...rest}>
+    <SelectContainer ref={dropdownRef} disabled={disabled}>
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -62,11 +61,8 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        aria-labelledBy={createIdFromString(labelTextWhenNoError)}
-        aria-describedBy={createIdFromString(
-          labelTextWhenNoError,
-          "error message"
-        )}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(labelTextWhenNoError)}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -81,12 +77,12 @@ const FormSelect = ({
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
-        aria-disabled={disabled}
+        disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
         required={options.required}
       />
-      <Stack direction="row" justify="space-between" aria-live="assertive">
+      <Stack direction="row" justify="space-between" role="alert">
         <Text
           color={ERROR_COLOR}
           variant="pXS"
@@ -97,7 +93,6 @@ const FormSelect = ({
               text-transform: uppercase;
             }`}
           id={createIdFromString(labelTextWhenNoError, "error message")}
-          aria-live="assertive"
         >
           {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
             ? errorMessages[field.errors[0]]

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,18 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
+          aria-label="Country"
         />
         <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 +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"
-          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,7 +105,6 @@ 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"}
           required={true}
         />
@@ -117,12 +117,14 @@ 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"
+          required={true}
         />
         {showWalletCheckbox && (
           <Checkbox
             name="address checkbox"
-            title="Save address to wallet"
+            title="Save address to Wallet"
             checked={walletCheckboxMarked}
             onChange={saveToWallet}
           />