@thecb/components 8.4.11-beta.2 → 8.4.11-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.11-beta.2",
+  "version": "8.4.11-beta.21",
   "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,8 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       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

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

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

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

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

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

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

@@ -287,7 +287,7 @@ const Dropdown = ({
       <Box
         as="input"
         aria-multiline="false"
-        aria-autocomplete="list"
+        autoComplete={autocompleteValue}
         aria-controls={`${ariaLabelledby}_listbox`}
         aria-activedescendant="focused_option"
         aria-owns={`${ariaLabelledby}_listbox`}
@@ -295,10 +295,6 @@ const Dropdown = ({
         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"
         borderSize="1px"
@@ -328,6 +324,7 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
+        role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
         type="text"
@@ -335,6 +332,7 @@ const Dropdown = ({
         value={inputValue}
         width="100%"
         dataQa={placeholder}
+        required={options.required}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -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) {
@@ -377,11 +375,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"
@@ -393,14 +392,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

@@ -162,10 +162,11 @@ const FormInput = ({
                 variant="pS"
                 fontWeight={themeValues.fontWeight}
                 extraStyles={`word-break: break-word;
-                    font-family: Public Sans;
-                    &::first-letter {
-                      text-transform: uppercase;
-                    }`}
+                  font-family: Public Sans;
+                  &::first-letter {
+                    text-transform: uppercase;
+                  }
+                `}
                 id={createIdFromString(labelTextWhenNoError)}
               >
                 {labelTextWhenNoError}
@@ -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)
                   }
@@ -214,7 +216,7 @@ const FormInput = ({
             field={field}
             formatter={formatter}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
+            dataQa={labelTextWhenNoError}
             themeValues={themeValues}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
@@ -239,17 +241,22 @@ const FormInput = ({
             inputMode={isNum ? "numeric" : isEmail ? "email" : "text"}
             field={field}
             showErrors={showErrors}
-            data-qa={labelTextWhenNoError}
+            dataQa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
             $customHeight={customHeight}
             $extraStyles={extraStyles}
-            autoComplete={autocomplete}
+            autocomplete={autocomplete}
             {...props}
           />
         )}
       </Box>
-      <Stack direction="row" justify="space-between" role="alert">
+      <Stack
+        direction="row"
+        justify="space-between"
+        aria-live="polite"
+        aria-atomic={true}
+      >
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}

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,11 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef} disabled={disabled} {...rest}>
+    <SelectContainer
+      ref={dropdownRef}
+      disabled={disabled}
+      className="form-select-component"
+    >
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -62,8 +65,9 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        aria-labelledBy={createIdFromString(labelTextWhenNoError)}
-        aria-describedBy={createIdFromString(
+        data-qa={labelTextWhenNoError}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        aria-describedby={createIdFromString(
           labelTextWhenNoError,
           "error message"
         )}
@@ -77,27 +81,34 @@ const FormSelect = ({
         isError={
           (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
         }
+        aria-invalid={
+          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+        }
         onSelect={
           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="assertive">
+      <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="assertive"
+          aria-live="polite"
+          data-qa={labelTextWhenNoError}
         >
           {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
             ? errorMessages[field.errors[0]]

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

@@ -17,12 +17,15 @@ const FormStateDropdown = ({
   const options = [placeholder, ...getOptions(countryCode)];
   return (
     <FormSelect
+      aria-live="polite"
+      aria-atomic={true}
       options={options}
       field={field}
       fieldActions={fieldActions}
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
+      aria-invalid={!!errorMessages?.length}
       autocompleteValue={autocomplete}
     />
   );

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/address-form/AddressForm.js

@@ -27,7 +27,7 @@ const AddressForm = ({
   }
 
   const street1ErrorMessages = {
-    [required.error]: "Street is required"
+    [required.error]: "Street address is required"
   };
   const cityErrorMessages = {
     [required.error]: "City is required"
@@ -64,7 +64,6 @@ const AddressForm = ({
             }
           }}
           showErrors={showErrors}
-          aria-label="country"
         />
         <FormInput
           labelTextWhenNoError="Address"
@@ -74,8 +73,8 @@ const AddressForm = ({
           fieldActions={actions.fields.street1}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-line1"
-          aria-label="address line 1"
+          autocomplete="address-line1"
+          aria-label="Address Line 1"
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -83,8 +82,8 @@ const AddressForm = ({
           fieldActions={actions.fields.street2}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="address-line2"
-          aria-label="address line 2"
+          autocomplete="address-line2"
+          aria-label="Address Line 2"
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -94,8 +93,8 @@ const AddressForm = ({
           fieldActions={actions.fields.city}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="locality"
-          aria-label="city"
+          autocomplete="city"
+          aria-label="City"
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -105,9 +104,9 @@ const AddressForm = ({
           fieldActions={actions.fields.stateProvince}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          autoComplete="administrative-area"
-          aria-label={isUS ? "state" : "state or province"}
+          aria-label={isUS ? "State" : "State or Province"}
           required={true}
+          autocomplete="administrative-area"
         />
         <FormInput
           isNum={isUS}
@@ -118,13 +117,14 @@ const AddressForm = ({
           fieldActions={actions.fields.zip}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          aria-label="zip code"
-          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}
           />

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -69,6 +69,7 @@ const PaymentFormACH = ({
       <FormInputColumn>
         <FormInput
           labelTextWhenNoError="Name on checking account"
+          data-qa={"Name on checking account"}
           errorMessages={nameErrors}
           field={fields.name}
           fieldActions={actions.fields.name}
@@ -78,6 +79,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Routing number"
+          data-qa={"Routing number"}
           errorMessages={routingNumberErrors}
           field={fields.routingNumber}
           fieldActions={actions.fields.routingNumber}
@@ -87,8 +89,7 @@ const PaymentFormACH = ({
             <AccountAndRoutingModal
               link="What is this?"
               title="Where is my routing number?"
-              content="Your routing number is the 9-digit number in the bottom left
-                  corner of your check."
+              content="Your routing number is the 9-digit number in the bottom left corner of your check."
               imageType="Routing"
               isOpen={showRouting}
               toggleOpen={toggleShowRouting}
@@ -98,6 +99,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
+          data-qa={"Confirm routing number"}
           errorMessages={confirmRoutingNumberErrors}
           field={fields.confirmRoutingNumber}
           fieldActions={actions.fields.confirmRoutingNumber}
@@ -107,6 +109,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Account number"
+          data-qa={"Account number"}
           errorMessages={accountNumberErrors}
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
@@ -127,6 +130,7 @@ const PaymentFormACH = ({
         />
         <FormInput
           labelTextWhenNoError="Confirm account number"
+          data-qa={"Confirm account number"}
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
@@ -137,6 +141,7 @@ const PaymentFormACH = ({
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
+            data-qa={"Account type"}
             options={[
               { text: "Select account type", value: "" },
               { text: "Checking", value: "CHECKING" },
@@ -151,6 +156,7 @@ const PaymentFormACH = ({
         {!hideDefaultPayment && (
           <Checkbox
             title="Save as Default Payment Method"
+            data-qa={"default-payment-ach"}
             name="default-payment-ach"
             onChange={toggleCheckbox}
             checked={defaultMethod.value}
@@ -162,6 +168,7 @@ const PaymentFormACH = ({
             {showWalletCheckbox && (
               <Checkbox
                 name="bank checkbox"
+                data-qa={"Save checking account to wallet"}
                 title="Save checking account to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}

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

@@ -113,6 +113,7 @@ const PaymentFormCard = ({
         )}
         <FormInput
           labelTextWhenNoError="Name on card"
+          data-qa={"Name on card"}
           errorMessages={nameOnCardErrors}
           field={fields.nameOnCard}
           fieldActions={actions.fields.nameOnCard}
@@ -122,6 +123,7 @@ const PaymentFormCard = ({
         />
         <FormInput
           labelTextWhenNoError="Credit card number"
+          data-qa={"Credit card number"}
           errorMessages={creditCardNumberErrors}
           field={fields.creditCardNumber}
           fieldActions={actions.fields.creditCardNumber}
@@ -137,6 +139,7 @@ const PaymentFormCard = ({
         >
           <FormInput
             labelTextWhenNoError="Expiration date (MM/YY)"
+            data-qa={"Expiration date"}
             errorMessages={expirationDateErrors}
             field={fields.expirationDate}
             fieldActions={actions.fields.expirationDate}
@@ -149,6 +152,7 @@ const PaymentFormCard = ({
           />
           <FormInput
             labelTextWhenNoError="CVV"
+            data-qa={"CVV"}
             errorMessages={cvvErrors}
             field={fields.cvv}
             fieldActions={actions.fields.cvv}
@@ -172,12 +176,13 @@ const PaymentFormCard = ({
               isNum={isUS}
               formatter={isUS ? zipFormat : null}
               labelTextWhenNoError="Zip code"
+              data-qa={"Zip code"}
               errorMessages={zipCodeErrors}
               field={fields.zipCode}
               fieldActions={actions.fields.zipCode}
               showErrors={showErrors}
               onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-              autocomplete="billing postal-code"
+              autoComplete="billing postal-code"
             />
           </Box>
         )}
@@ -186,6 +191,7 @@ const PaymentFormCard = ({
             {showWalletCheckbox && (
               <Checkbox
                 name="credit card checkbox"
+                data-qa={"Save credit card to wallet"}
                 title="Save credit card to wallet."
                 checked={walletCheckboxMarked}
                 onChange={saveToWallet}

package/src/components/molecules/phone-form/PhoneForm.js

@@ -40,8 +40,8 @@ const PhoneForm = ({
           showErrors={showErrors}
           formatter={createFormat(phoneFormats, formatDelimiter)}
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
-          isNum
           autocomplete="tel"
+          isPhone={true}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -19,6 +19,7 @@ const TermsAndConditionsControlV1 = ({
         <Checkbox
           name="terms"
           title="Terms and Conditions"
+          dataQa="Terms and Conditions"
           error={error}
           checked={isChecked}
           onChange={onCheck}

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -78,15 +78,17 @@ const TermsAndConditionsControlV2 = ({
                 />
               )}
             </Cluster>
-            {showCheckbox && hasError && (
-              <Text
-                variant="pXS"
-                color={ERROR_COLOR}
-                id={`${id}-error-message`}
-              >
-                {errorMessage}
-              </Text>
-            )}
+            <div aria-live="polite" aria-atomic={true}>
+              {showCheckbox && hasError && (
+                <Text
+                  variant="pXS"
+                  color={ERROR_COLOR}
+                  id={`${id}-error-message`}
+                >
+                  {errorMessage}
+                </Text>
+              )}
+            </div>
           </Stack>
         </Cluster>
       </Stack>