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

package/dist/index.cjs.js

@@ -18819,7 +18819,8 @@ var Alert = function Alert(_ref) {
     borderSize: noBorder ? "0px" : "1px",
     boxShadow: enableBoxShadow ? (_generateShadows = generateShadows()) === null || _generateShadows === void 0 ? void 0 : (_generateShadows$inse = _generateShadows.inset) === null || _generateShadows$inse === void 0 ? void 0 : _generateShadows$inse.base : "",
     extraStyles: extraStyles,
-    role: "alert"
+    role: "alert",
+    "aria-atomic": true
   }, maxContentWidth ? /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: maxContentWidth
   }, content) : content);
@@ -22149,9 +22150,7 @@ var Checkbox = function Checkbox(_ref4) {
     "aria-label": name,
     checked: checked,
     onChange: onChange,
-    tabIndex: "-1",
-    "aria-invalid": error,
-    "aria-describedBy": error ? "".concat(name, "-error-message") : ""
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     error: error,
     disabled: disabled,
@@ -23985,7 +23984,7 @@ var Dropdown = function Dropdown(_ref8) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
-    "aria-autocomplete": "list",
+    autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
     "aria-activedescendant": "focused_option",
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
@@ -23993,10 +23992,6 @@ var Dropdown = function Dropdown(_ref8) {
     "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",
@@ -24016,13 +24011,16 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
+    role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
     tabIndex: 0,
     value: inputValue,
     width: "100%",
-    dataQa: placeholder
+    dataQa: placeholder,
+    "data-qa": placeholder,
+    required: options.required
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24046,7 +24044,7 @@ var Dropdown = function Dropdown(_ref8) {
       id: focusedRef === optionRefs.current[i] ? "focused_option" : choice.value,
       key: choice.value,
       ref: optionRefs.current[i],
-      tabIndex: 0,
+      tabIndex: -1,
       onClick: function onClick(e) {
         return handleItemSelection(e, choice, i);
       },
@@ -24058,17 +24056,18 @@ var Dropdown = function Dropdown(_ref8) {
       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: function onFocus() {
         return setFocusedRef(optionRefs.current[i]);
-      }
+      },
+      role: "option"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
-      extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
+      extraStyles: "padding-left: 16px; \n                        cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                        white-space: nowrap; \n                        overflow: hidden; \n                        text-overflow: ellipsis;")
     }, choice.text));
   }))) : /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
@@ -24158,8 +24157,6 @@ var fallbackValues$g = {
   hoverFocusStyles: hoverFocusStyles
 };
 
-var _excluded$o = ["fieldActions", "labelTextWhenNoError", "errorMessages", "options", "field", "showErrors", "onChange", "dropdownMaxHeight", "disabledValues", "disabled", "themeValues", "hasTitles", "autocompleteValue", "smoothScroll"];
-
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
       labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -24176,8 +24173,7 @@ var FormSelect = function FormSelect(_ref) {
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
       autocompleteValue = _ref.autocompleteValue,
       _ref$smoothScroll = _ref.smoothScroll,
-      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24198,10 +24194,11 @@ var FormSelect = function FormSelect(_ref) {
       document.removeEventListener("mousedown", handleClickAway);
     };
   });
-  return /*#__PURE__*/React__default.createElement(SelectContainer, _extends({
+  return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef,
-    disabled: disabled
-  }, rest), /*#__PURE__*/React__default.createElement(Box, {
+    disabled: disabled,
+    className: "form-select-component"
+  }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -24215,8 +24212,8 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    "aria-labelledBy": createIdFromString(labelTextWhenNoError),
-    "aria-describedBy": createIdFromString(labelTextWhenNoError, "error message"),
+    ariaLabelledby: createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24225,6 +24222,7 @@ var FormSelect = function FormSelect(_ref) {
     disabledValues: disabledValues,
     isOpen: open,
     isError: field.hasErrors && field.dirty || field.hasErrors && showErrors,
+    "aria-invalid": field.hasErrors && field.dirty || field.hasErrors && showErrors,
     onSelect: onChange ? function (value) {
       return onChange(value);
     } : function (value) {
@@ -24233,21 +24231,24 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
+    disabled: disabled,
     "aria-disabled": disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    required: options.required
+    required: options.required,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-dropdown")
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    justify: "space-between",
-    "aria-live": "assertive"
+    justify: "space-between"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }",
+    extraStyles: "\n            word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }\n          ",
     id: createIdFromString(labelTextWhenNoError, "error message"),
-    "aria-live": "assertive"
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "data-qa": createIdFromString(labelTextWhenNoError, "error message")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -24996,28 +24997,24 @@ var options = [{
   value: "ZW"
 }];
 
-var _excluded$p = ["labelTextWhenNoError", "errorMessages", "field", "fieldActions", "showErrors", "onChange"];
-
 var CountryDropdown = function CountryDropdown(_ref) {
   var labelTextWhenNoError = _ref.labelTextWhenNoError,
       errorMessages = _ref.errorMessages,
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
-
-  return /*#__PURE__*/React__default.createElement(FormSelect$1, _extends({
+      onChange = _ref.onChange;
+  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
+    dataQa: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name",
-    autoComplete: "country-name"
-  }, rest));
+    autocompleteValue: "country-name"
+  });
 };
 
 var DetailText = styled__default.p.withConfig({
@@ -25083,7 +25080,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 /*
   New responsive text component for Detail elements
   (Block level text elements which are smaller than "Title" elements)
@@ -25133,7 +25130,7 @@ var Detail = function Detail(_ref) {
       as = _ref$as === void 0 ? "p" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
@@ -25857,7 +25854,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$r = ["showErrors", "themeValues"],
+var _excluded$p = ["showErrors", "themeValues"],
     _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -25891,7 +25888,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
       themeValues = _ref8.themeValues,
-      props = _objectWithoutProperties(_ref8, _excluded$r);
+      props = _objectWithoutProperties(_ref8, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
@@ -25990,7 +25987,7 @@ var FormInput = function FormInput(_ref15) {
     color: themeValues.labelColor,
     variant: "pS",
     fontWeight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
+    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }\n                ",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
@@ -26001,8 +25998,9 @@ var FormInput = function FormInput(_ref15) {
     onClick: function onClick() {
       return setShowPassword(!showPassword);
     },
-    "aria-label": "Show password",
     tabIndex: "0",
+    "aria-label": showPassword ? "Hide Password" : "Show password",
+    "aria-live": "polite",
     onKeyPress: function onKeyPress(e) {
       return e.key === "Enter" && setShowPassword(!showPassword);
     }
@@ -26024,7 +26022,7 @@ var FormInput = function FormInput(_ref15) {
     field: field,
     formatter: formatter,
     showErrors: showErrors,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
@@ -26042,16 +26040,18 @@ var FormInput = function FormInput(_ref15) {
     inputMode: isNum ? "numeric" : isEmail ? "email" : "text",
     field: field,
     showErrors: showErrors,
-    "data-qa": labelTextWhenNoError,
+    "data-qa": "".concat(createIdFromString(labelTextWhenNoError), "-input"),
     themeValues: themeValues,
     background: background,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
-    autoComplete: autocomplete
+    autocomplete: autocomplete
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    role: "alert"
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "data-qa": createIdFromString("FormInput errors")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -26067,7 +26067,7 @@ var FormInput = function FormInput(_ref15) {
 
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -26077,7 +26077,7 @@ var FormInputRow = function FormInputRow(_ref) {
       largeChild = _ref.largeChild,
       largeChildSize = _ref.largeChildSize,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
@@ -26089,14 +26089,14 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$t = ["childGap", "bottomItem", "children"];
+var _excluded$r = ["childGap", "bottomItem", "children"];
 
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
       childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
       bottomItem = _ref.bottomItem,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
@@ -26104,12 +26104,12 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var _excluded$u = ["themeValues", "children"];
+var _excluded$s = ["themeValues", "children"];
 
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -26374,7 +26374,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$t = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
@@ -26394,7 +26394,7 @@ var Heading = function Heading(_ref) {
       as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
@@ -26685,7 +26685,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$w = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$u = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
@@ -26701,7 +26701,7 @@ var NavFooter = function NavFooter(_ref) {
       footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
       isMobile = _ref.isMobile,
       footerWidth = _ref.footerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
@@ -26733,7 +26733,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$x = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$v = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -26743,7 +26743,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -37943,13 +37943,18 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
+    "aria-live": "polite",
+    "aria-atomic": true,
     options: options,
     field: field,
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: autocomplete
+    "aria-invalid": !!(errorMessages !== null && errorMessages !== void 0 && errorMessages.length),
+    autocompleteValue: autocomplete,
+    "data-qa": labelTextWhenNoError,
+    dataQa: labelTextWhenNoError
   });
 };
 
@@ -38518,7 +38523,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38528,7 +38533,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$y);
+      props = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -40351,7 +40356,7 @@ var AddressForm = function AddressForm(_ref) {
     }, []);
   }
 
-  var street1ErrorMessages = _defineProperty({}, required.error, "Street is required");
+  var street1ErrorMessages = _defineProperty({}, required.error, "Street address is required");
 
   var cityErrorMessages = _defineProperty({}, required.error, "City is required");
 
@@ -40383,8 +40388,7 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    "aria-label": "country",
-    "aria-role": "listbox"
+    "data-qa": "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
@@ -40396,7 +40400,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "address-line1",
-    "aria-label": "address line 1"
+    "aria-label": "Address Line 1",
+    "data-qa": createIdFromString("Address Line 1")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40406,7 +40411,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "address-line2",
-    "aria-label": "address line 2"
+    "aria-label": "Address Line 2",
+    "data-qa": createIdFromString("Address Line 2")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     required: true,
@@ -40418,7 +40424,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "city",
-    "aria-label": "city"
+    "aria-label": "City",
+    "data-qa": "City"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -40429,9 +40436,10 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autoComplete: "administrative-area",
-    "aria-label": isUS ? "state" : "state or province",
-    required: true
+    "aria-label": isUS ? "State" : "State or Province",
+    required: true,
+    autocomplete: "administrative-area",
+    "data-qa": createIdFromString("State or Province")
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40443,13 +40451,16 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    "aria-label": "zip code",
-    autocomplete: "postal-code"
+    "aria-label": "Zip code",
+    autocomplete: "postal-code",
+    required: true,
+    "data-qa": createIdFromString("Zip code")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
-    title: "Save address to Wallet",
+    title: "Save address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save address to wallet")
   })));
 };
 
@@ -41373,12 +41384,14 @@ var EmailForm = function EmailForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isEmail: true,
-    autoComplete: "email"
+    autoComplete: "email",
+    "data-qa": createIdFromString("Email address")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save email address to wallet")
   })));
 };
 
@@ -48163,7 +48176,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$z = ["amount"],
+var _excluded$x = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -48373,7 +48386,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$z);
+        rest = _objectWithoutProperties(_ref5, _excluded$x);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -48537,6 +48550,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    role: "button",
     variant: "pS",
     onClick: function onClick() {
       return toggleOpen(true);
@@ -48667,6 +48681,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
   return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
     title: "Terms and Conditions",
+    dataQa: "Terms and Conditions",
     error: error,
     checked: isChecked,
     onChange: onCheck
@@ -48800,19 +48815,22 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
     title: modalTitle
-  })), showCheckbox && hasError && /*#__PURE__*/React__default.createElement(Text$1, {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    "aria-live": "polite",
+    "aria-atomic": true
+  }, showCheckbox && hasError && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pXS",
     color: ERROR_COLOR,
     id: "".concat(id, "-error-message")
-  }, errorMessage)))));
+  }, errorMessage))))));
 };
 
-var _excluded$A = ["version"];
+var _excluded$y = ["version"];
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
       version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$A);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
@@ -48877,6 +48895,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     "aria-label": "ACH Payment"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on checking account",
+    "data-qa": createIdFromString("Name on checking account"),
     errorMessages: nameErrors,
     field: fields.name,
     fieldActions: actions.fields.name,
@@ -48887,6 +48906,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     autocomplete: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
+    "data-qa": createIdFromString("Routing number"),
     errorMessages: routingNumberErrors,
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
@@ -48899,7 +48919,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
         content: "Your routing number is the 9-digit number in the bottom left corner of your check.",
         imageType: "Routing",
         isOpen: showRouting,
-        toggleOpen: toggleShowRouting
+        toggleOpen: toggleShowRouting,
+        "data-qa": createIdFromString("What is my routing number")
       });
     },
     onKeyDown: function onKeyDown(e) {
@@ -48907,6 +48928,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
+    "data-qa": createIdFromString("Confirm routing number"),
     errorMessages: confirmRoutingNumberErrors,
     field: fields.confirmRoutingNumber,
     fieldActions: actions.fields.confirmRoutingNumber,
@@ -48917,6 +48939,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
+    "data-qa": createIdFromString("Account number"),
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
@@ -48929,7 +48952,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
         content: "Your account number is usually the 10-digit number in the bottom of your check to the right of the routing number.",
         imageType: "Account",
         isOpen: showAccount,
-        toggleOpen: toggleShowAccount
+        toggleOpen: toggleShowAccount,
+        "data-qa": createIdFromString("What is my account number")
       });
     },
     onKeyDown: function onKeyDown(e) {
@@ -48937,6 +48961,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
+    "data-qa": createIdFromString("Confirm account number"),
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48947,6 +48972,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
+    "data-qa": createIdFromString("Account type"),
     options: [{
       text: "Select account type",
       value: ""
@@ -48963,6 +48989,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountType
   }), !hideDefaultPayment && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
+    "data-qa": "default-payment-ach",
     name: "default-payment-ach",
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
@@ -48972,6 +48999,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
+    "data-qa": createIdFromString("Save checking account to wallet"),
     title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -48981,7 +49009,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent
+    terms: termsContent,
+    "data-qa": createIdFromString("Terms and Conditions")
   })))));
 };
 
@@ -49084,9 +49113,11 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
         actions.fields.zipCode.set("");
       }
     },
-    showErrors: showErrors
+    showErrors: showErrors,
+    "data-qa": "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
+    "data-qa": createIdFromString("Name on card"),
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
     fieldActions: actions.fields.nameOnCard,
@@ -49097,6 +49128,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     autocomplete: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
+    "data-qa": createIdFromString("Credit card number"),
     errorMessages: creditCardNumberErrors,
     field: fields.creditCardNumber,
     fieldActions: actions.fields.creditCardNumber,
@@ -49112,6 +49144,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
+    "data-qa": createIdFromString("Expiration date"),
     errorMessages: expirationDateErrors,
     field: fields.expirationDate,
     fieldActions: actions.fields.expirationDate,
@@ -49126,6 +49159,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     autocomplete: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
+    "data-qa": createIdFromString("CVV"),
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
@@ -49143,6 +49177,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
+    "data-qa": createIdFromString("Zip code"),
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
     fieldActions: actions.fields.zipCode,
@@ -49150,12 +49185,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "billing postal-code"
+    autoComplete: "billing postal-code"
   })), (showWalletCheckbox || showTerms) && /*#__PURE__*/React__default.createElement(Cluster, {
     childGap: "4px",
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
+    "data-qa": createIdFromString("Save credit card to wallet"),
     title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49367,13 +49403,15 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    autocomplete: "tel"
+    autocomplete: "tel",
+    isPhone: true,
+    "data-qa": createIdFromString("Phone number")
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet
+    onChange: saveToWallet,
+    "data-qa": createIdFromString("Save phone number to wallet")
   })));
 };