@thecb/components 8.4.11-beta.9 → 9.0.0-beta.0

package/package.json

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

@@ -94,7 +94,8 @@ const Checkbox = ({
   error = false,
   checkboxMargin = "0 16px 0 0",
   extraStyles,
-  textExtraStyles
+  textExtraStyles,
+  dataQa = "Checkbox Label"
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -115,7 +116,7 @@ const Checkbox = ({
       background={themeValues.backgroundColor}
       extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
     >
-      <CheckboxLabelContainer>
+      <CheckboxLabelContainer data-qa={dataQa}>
         <CheckboxContainer data-qa="Checkbox">
           <HiddenCheckbox
             id={`checkbox-${name}`}
@@ -126,7 +127,7 @@ const Checkbox = ({
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
-            aria-describedby={name}
+            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}

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

@@ -10,18 +10,18 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  ...rest
+  dataQa = "Country Dropdown"
 }) => (
   <FormSelect
     options={options}
     field={field}
     fieldActions={fieldActions}
     labelTextWhenNoError={labelTextWhenNoError}
+    dataQa={dataQa}
     errorMessages={errorMessages}
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
-    {...rest}
   />
 );
 export default CountryDropdown;

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

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

package/src/components/atoms/display-box/DisplayBox.js

@@ -4,7 +4,12 @@ import { fallbackValues } from "./DisplayBox.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { RED } from "../../../constants/colors";
 
-const DisplayBox = ({ children, themeValues, showError }) => (
+const DisplayBox = ({
+  children,
+  themeValues,
+  showError,
+  dataQa = "DisplayBox"
+}) => (
   <Box padding="0.5rem 0 1.5rem 0">
     <Box
       padding="1.5rem"
@@ -13,6 +18,7 @@ const DisplayBox = ({ children, themeValues, showError }) => (
       borderColor={showError && RED}
       borderRadius="4px"
       boxShadow={themeValues.boxShadow}
+      dataQa={dataQa}
     >
       {children}
     </Box>

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

@@ -3,6 +3,7 @@ import { Box, Stack } from "../layouts";
 import Text from "../text";
 import {
   noop,
+  createIdFromString,
   inputDisabledStyle,
   inputPlaceholderTextStyle
 } from "../../../util/general";
@@ -16,8 +17,7 @@ import {
   GREY_CHATEAU,
   STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR,
-  CHARADE_GREY
+  ERROR_COLOR
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -104,8 +104,9 @@ const Dropdown = ({
   autoEraseTypeAhead = true,
   ariaLabelledby,
   ariaDescribedby,
-  autocompleteValue = "", // browser autofill value, like country-name or address-level1 for state
-  smoothScroll = true
+  autocompleteValue = null, // browser autofill value, like country-name
+  smoothScroll = true,
+  ariaInvalid = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -283,18 +284,19 @@ const Dropdown = ({
       }}
       onKeyDown={onKeyDown}
       width="100%"
+      dataQa={`${ariaLabelledby}-dropdown`}
     >
       <Box
         as="input"
         aria-multiline="false"
-        aria-autocomplete="list"
-        // aria-activedescendant="focused_option"
-        // aria-owns={`${ariaLabelledby}_listbox`}
-        // aria-controls={`${ariaLabelledby}_listbox`}
+        autoComplete={autocompleteValue}
+        aria-controls={`${createIdFromString(ariaLabelledby)}_listbox`}
+        aria-activedescendant="focused_option"
+        aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        autoComplete={autocompleteValue}
+        aria-expanded={isOpen}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
         borderSize="1px"
@@ -315,7 +317,6 @@ const Dropdown = ({
         minHeight="48px"
         minWidth="100%"
         name={autocompleteValue}
-        // aria-expanded={isOpen}
         onChange={e => {
           // support autofill and copy/paste
           if (e.target.value !== inputValue) {
@@ -325,6 +326,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
         type="text"
@@ -332,6 +334,9 @@ const Dropdown = ({
         value={inputValue}
         width="100%"
         dataQa={placeholder}
+        required={options.required}
+        aria-required={options.required}
+        aria-invalid={ariaInvalid}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -374,11 +379,12 @@ const Dropdown = ({
                     selected={choice.value === value}
                     aria-selected={choice.value === value}
                     disabled={disabledValues.includes(choice.value)}
+                    aria-disabled={disabledValues.includes(choice.value)}
                     data-qa={choice.text}
                     themeValues={themeValues}
                     title={hasTitles ? choice.text : null}
-                    role="option"
                     onFocus={() => setFocusedRef(optionRefs.current[i])}
+                    role="option"
                   >
                     <Text
                       variant="p"
@@ -390,14 +396,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/dropdown/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface DropdownOption {
+  text: string;
+  value: string;
+}
+
+export interface DropdownProps {
+  placeholder?: string;
+  options?: DropdownOption[];
+  value?: string;
+  isOpen?: boolean;
+  isError?: boolean;
+  onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
+  disabledValues?: string[];
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  themeValues?: object;
+  maxHeight?: string;
+  widthFitOptions?: boolean;
+  disabled?: boolean;
+  hasTitles?: boolean;
+  autoEraseTypeAhead?: true;
+  ariaLabelledby?: string;
+  ariaDescribedby?: string;
+  autocompleteValue?: string;
+  smoothScroll?: boolean;
+  ariaInvalid?: boolean;
+}
+
+export const Dropdown: React.FC<Expand<DropdownProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -112,9 +112,10 @@ const FormInput = ({
   themeValues,
   background,
   customHeight,
-  autocomplete,
+  autocompleteValue = "",
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
+  dataQa = "Form Input",
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -127,7 +128,7 @@ const FormInput = ({
   };
 
   return (
-    <Stack childGap="0.25rem" aria-live="assertive">
+    <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
           <Cluster justify="space-between" align="center">
@@ -178,8 +179,9 @@ const FormInput = ({
                   hoverStyles={themeValues.hoverFocusStyles}
                   extraStyles={`cursor: pointer; &:focus { outline-offset: -2px; }`}
                   onClick={() => setShowPassword(!showPassword)}
-                  aria-label="Show password"
                   tabIndex="0"
+                  aria-label={showPassword ? "Hide Password" : "Show password"}
+                  aria-live="polite"
                   onKeyPress={e =>
                     e.key === "Enter" && setShowPassword(!showPassword)
                   }
@@ -194,11 +196,14 @@ const FormInput = ({
           </Box>
         )}
       </Box>
-      <Box padding="0" aria-live="assertive">
+      <Box padding="0">
         {formatter ? (
           <FormattedInputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -211,17 +216,20 @@ const FormInput = ({
             field={field}
             formatter={formatter}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            data-qa={dataQa}
+            autoComplete={autocompleteValue}
             {...props}
           />
         ) : (
           <InputField
             aria-labelledby={createIdFromString(labelTextWhenNoError)}
-            aria-describedby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             aria-invalid={
               (field.dirty && field.hasErrors) ||
               (field.hasErrors && showErrors)
@@ -233,17 +241,23 @@ const FormInput = ({
             inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autocomplete={autocomplete}
+            data-qa={dataQa}
+            autoComplete={autocompleteValue}
             {...props}
           />
         )}
       </Box>
-      <Stack direction="row" justify="space-between" role="alert">
+      <Stack
+        direction="row"
+        justify="space-between"
+        aria-live="polite"
+        aria-atomic={true}
+        data-qa={`${labelTextWhenNoError} errors`}
+      >
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

package/src/components/atoms/form-layouts/index.d.ts

@@ -18,6 +18,14 @@ export interface FormInputProps {
   labelTextWhenNoError?: string;
   showErrors?: boolean;
   type?: string;
+  formatter?: string | null;
+  decorator?: boolean;
+  themeValues?: object;
+  background?: string;
+  customHeight?: string;
+  autocompleteValue?: string;
+  removeFromValue?: RegExp;
+  dataQa?: string;
 }
 
 export const FormInput: React.FC<Expand<FormInputProps> &

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

@@ -21,8 +21,9 @@ const FormSelect = ({
   disabled,
   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
+  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
+  dataQa = "FormSelect"
 }) => {
   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} data-qa={dataQa}>
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -61,8 +62,11 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedby={createIdFromString(labelTextWhenNoError)}
+        ariaLabelledby={labelTextWhenNoError}
+        ariaDescribedBy={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -73,6 +77,9 @@ const FormSelect = ({
         isError={
           (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
         }
+        ariaInvalid={
+          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+        }
         onSelect={
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
@@ -80,19 +87,23 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
-        required={options.required}
       />
-      <Stack direction="row" justify="space-between" role="alert">
+      <Stack direction="row" justify="space-between">
         <Text
           color={ERROR_COLOR}
           variant="pXS"
           weight={themeValues.fontWeight}
-          extraStyles={`word-break: break-word;
+          extraStyles={`
+            word-break: break-word;
             font-family: Public Sans;
             &::first-letter {
               text-transform: uppercase;
-            }`}
+            }
+          `}
           id={createIdFromString(labelTextWhenNoError, "error message")}
+          aria-live="polite"
+          aria-atomic={true}
+          data-qa={createIdFromString(labelTextWhenNoError, "error message")}
         >
           {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
             ? errorMessages[field.errors[0]]

package/src/components/atoms/form-select/index.d.ts

@@ -16,6 +16,13 @@ export interface FormSelectProps {
   showErrors?: boolean;
   errorMessages?: ErrorMessageDictionary;
   field?: Field;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+  disabledValues?: string[];
+  themeValues?: object;
+  hasTitles?: boolean;
+  autocompleteValue?: string;
+  smoothScroll?: boolean;
+  dataQa?: string;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -10,7 +10,8 @@ const FormStateDropdown = ({
   fieldActions,
   showErrors,
   countryCode,
-  autocomplete
+  autocompleteValue = "administrative-area",
+  dataQa = "StateProvinceDropdown"
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
@@ -23,7 +24,9 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
-      autocompleteValue={autocomplete}
+      aria-invalid={!!errorMessages?.length}
+      autocompleteValue={autocompleteValue}
+      dataQa={dataQa}
     />
   );
 };

package/src/components/atoms/state-province-dropdown/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+import {
+  ErrorMessageDictionary,
+  Field,
+  FieldActions,
+  FormSelectOption
+} from "../../../types/common";
+import Expand from "../../../util/expand";
+
+export interface StateProvinceDropdownProps {
+  labelTextWhenNoError?: string;
+  errorMessages?: ErrorMessageDictionary;
+  field?: Field;
+  fieldActions?: FieldActions;
+  options?: FormSelectOption[];
+  showErrors?: boolean;
+  countryCode?: string;
+  autocompleteValue?: string;
+  dataQa?: string;
+}
+
+export const StateProvinceDropdown: React.FC<Expand<
+  StateProvinceDropdownProps
+> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -16,13 +16,15 @@ const AccountAndRoutingModal = ({
   acceptText,
   content,
   imageType,
-  themeValues
+  themeValues,
+  dataQa = "AccountAndRoutingModal"
 }) => (
   <Modal
     modalOpen={isOpen}
     hideModal={() => toggleOpen(false)}
     showModal={() => toggleOpen(true)}
     modalHeaderText={title}
+    dataQa={dataQa}
     modalBodyText={
       <Box extraStyles="overflow: scroll; max-height: 20rem;">
         <Stack>
@@ -50,6 +52,7 @@ const AccountAndRoutingModal = ({
     }}
   >
     <Text
+      role="button"
       variant="pS"
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}

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

@@ -4,7 +4,6 @@ import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
-import { noop } from "../../../util/general";
 import {
   FormInput,
   FormContainer,
@@ -64,18 +63,17 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-          aria-label="Country"
+          dataQa="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"
-          aria-label="Address Line 1"
+          autocompleteValue="address-line1"
+          dataQa="Address Line 1"
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -83,19 +81,18 @@ const AddressForm = ({
           fieldActions={actions.fields.street2}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="address-line2"
-          aria-label="Address Line 2"
+          autocompleteValue="address-line2"
+          dataQa="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="city"
-          aria-label="City"
+          autocompleteValue="city"
+          dataQa="City"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -105,8 +102,8 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          aria-label={isUS ? "State" : "State or Province"}
-          required={true}
+          autocompleteValue="administrative-area"
+          dataQa="State or Province"
         />
         <FormInput
           isNum={isUS}
@@ -117,14 +114,13 @@ const AddressForm = ({
           fieldActions={actions.fields.zip}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          aria-label="zip code"
-          autocomplete="postal-code"
-          required={true}
+          autocompleteValue="postal-code"
+          dataQa="Zip code"
         />
         {showWalletCheckbox && (
           <Checkbox
             name="address checkbox"
-            title="Save address to Wallet"
+            title="Save address to wallet"
             checked={walletCheckboxMarked}
             onChange={saveToWallet}
           />

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -91,7 +91,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
-            autocomplete="current-password"
+            autocompleteValue="current-password"
           />
           <FormInput
             labelTextWhenNoError="New password"
@@ -101,7 +101,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
-            autocomplete="new-password"
+            autocompleteValue="new-password"
           />
           <FormInput
             labelTextWhenNoError="Confirm password"
@@ -111,7 +111,7 @@ const ChangePasswordForm = ({
             showErrors={showErrors}
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             type="password"
-            autocomplete="new-password"
+            autocompleteValue="new-password"
           />
         </FormInputColumn>
         <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>

package/src/components/molecules/edit-name-form/EditNameForm.js

@@ -30,21 +30,23 @@ const EditNameForm = ({
       <FormInputColumn>
         <FormInput
           labelTextWhenNoError="First Name"
+          dataQa="Edit First Name"
           errorMessages={firstNameErrorMessages}
           field={fields.firstName}
           fieldActions={actions.fields.firstName}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="given-name"
+          autocompleteValue="given-name"
         />
         <FormInput
           labelTextWhenNoError="Last Name"
+          dataQa="Edit Last Name"
           errorMessages={lastNameErrorMessages}
           field={fields.lastName}
           fieldActions={actions.fields.lastName}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autocomplete="family-name"
+          autocompleteValue="family-name"
         />
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.js

@@ -46,7 +46,8 @@ const EmailForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isEmail
-          autoComplete="email"
+          autocompleteValue="email"
+          dataQa="Email address"
         />
         {showWalletCheckbox && (
           <Checkbox