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

package/dist/index.cjs.js

@@ -6231,7 +6231,7 @@ return numeral;
 }));
 });
 
-var noop = function noop() {};
+var noop$1 = function noop() {};
 
 var formatMoneyString = function formatMoneyString(s) {
   return numeral(s).format("$0,0.00");
@@ -6367,7 +6367,7 @@ var titleCaseString = function titleCaseString(string) {
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  noop: noop,
+  noop: noop$1,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
   formatPercent: formatPercent,
@@ -10557,7 +10557,7 @@ var isRefObject = function (ref) {
     return typeof ref === "object" && ref.hasOwnProperty("current");
 };
 
-var noop$1 = function (v) { return v; };
+var noop$2 = function (v) { return v; };
 var ComponentDragControls = /** @class */ (function () {
     function ComponentDragControls(_a) {
         var ref = _a.ref, values = _a.values, controls = _a.controls;
@@ -10585,7 +10585,7 @@ var ComponentDragControls = /** @class */ (function () {
          * @internal
          */
         this.props = {
-            transformPagePoint: noop$1,
+            transformPagePoint: noop$2,
         };
         /**
          * References to the MotionValues used for tracking the current dragged point.
@@ -12918,7 +12918,7 @@ var Spinner = function Spinner(_ref) {
 
 var ButtonWithAction = function ButtonWithAction(_ref2) {
   var _ref2$action = _ref2.action,
-      action = _ref2$action === void 0 ? noop : _ref2$action,
+      action = _ref2$action === void 0 ? noop$1 : _ref2$action,
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
       text = _ref2.text,
@@ -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);
@@ -22101,7 +22102,7 @@ var Checkbox = function Checkbox(_ref4) {
       name = _ref4.name,
       checked = _ref4.checked,
       _ref4$onChange = _ref4.onChange,
-      onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
+      onChange = _ref4$onChange === void 0 ? noop$1 : _ref4$onChange,
       _ref4$disabled = _ref4.disabled,
       disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
       themeValues = _ref4.themeValues,
@@ -22112,7 +22113,9 @@ var Checkbox = function Checkbox(_ref4) {
       _ref4$checkboxMargin = _ref4.checkboxMargin,
       checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
       extraStyles = _ref4.extraStyles,
-      textExtraStyles = _ref4.textExtraStyles;
+      textExtraStyles = _ref4.textExtraStyles,
+      _ref4$dataQa = _ref4.dataQa,
+      dataQa = _ref4$dataQa === void 0 ? "Checkbox Label" : _ref4$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -22140,7 +22143,9 @@ var Checkbox = function Checkbox(_ref4) {
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
     extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
-  }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
+  }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, {
+    "data-qa": dataQa
+  }, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
     id: "checkbox-".concat(name),
@@ -22151,7 +22156,7 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": name
+    "aria-describedby": error ? "".concat(name, "-error-message") : ""
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     error: error,
     disabled: disabled,
@@ -22290,7 +22295,7 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     padding: "0.875rem",
     borderRadius: "4px",
     minWidth: "30%",
-    onClick: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
     borderColor: borderColor,
     borderSize: "1px",
     color: color,
@@ -22305,8 +22310,8 @@ var CheckboxListItem = function CheckboxListItem(_ref) {
     name: name,
     "aria-label": name,
     htmlFor: "checkbox-".concat(name, "-").concat(index),
-    onClick: disabled ? noop : onSelect,
-    onKeyDown: disabled ? noop : onSelect,
+    onClick: disabled ? noop$1 : onSelect,
+    onKeyDown: disabled ? noop$1 : onSelect,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: {
@@ -23730,7 +23735,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$disabledValues = _ref8.disabledValues,
       disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
       _ref8$onClick = _ref8.onClick,
-      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
+      _onClick = _ref8$onClick === void 0 ? noop$1 : _ref8$onClick,
       themeValues = _ref8.themeValues,
       maxHeight = _ref8.maxHeight,
       _ref8$widthFitOptions = _ref8.widthFitOptions,
@@ -23743,9 +23748,11 @@ var Dropdown = function Dropdown(_ref8) {
       ariaLabelledby = _ref8.ariaLabelledby,
       ariaDescribedby = _ref8.ariaDescribedby,
       _ref8$autocompleteVal = _ref8.autocompleteValue,
-      autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal,
+      autocompleteValue = _ref8$autocompleteVal === void 0 ? null : _ref8$autocompleteVal,
       _ref8$smoothScroll = _ref8.smoothScroll,
-      smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll;
+      smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
+      _ref8$ariaInvalid = _ref8.ariaInvalid,
+      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -23981,18 +23988,19 @@ var Dropdown = function Dropdown(_ref8) {
       }
     },
     onKeyDown: onKeyDown,
-    width: "100%"
+    width: "100%",
+    dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(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": "".concat(createIdFromString(ariaLabelledby), "_listbox"),
+    "aria-activedescendant": "focused_option",
+    "aria-owns": "".concat(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",
@@ -24002,8 +24010,7 @@ var Dropdown = function Dropdown(_ref8) {
     isOpen: isOpen,
     minHeight: "48px",
     minWidth: "100%",
-    name: autocompleteValue // aria-expanded={isOpen}
-    ,
+    name: autocompleteValue,
     onChange: function onChange(e) {
       // support autofill and copy/paste
       if (e.target.value !== inputValue) {
@@ -24013,13 +24020,17 @@ 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,
+    required: options.required,
+    "aria-required": options.required,
+    "aria-invalid": ariaInvalid
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24055,17 +24066,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)));
 };
@@ -24169,9 +24181,12 @@ var FormSelect = function FormSelect(_ref) {
       themeValues = _ref.themeValues,
       _ref$hasTitles = _ref.hasTitles,
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
-      autocompleteValue = _ref.autocompleteValue,
+      _ref$autocompleteValu = _ref.autocompleteValue,
+      autocompleteValue = _ref$autocompleteValu === void 0 ? "" : _ref$autocompleteValu,
       _ref$smoothScroll = _ref.smoothScroll,
-      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll;
+      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "FormSelect" : _ref$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24194,7 +24209,8 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef,
-    disabled: disabled
+    disabled: disabled,
+    "data-qa": dataQa
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -24209,8 +24225,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, {
-    ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    ariaDescribedby: createIdFromString(labelTextWhenNoError),
+    ariaLabelledby: labelTextWhenNoError,
+    ariaDescribedBy: createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24219,6 +24235,7 @@ var FormSelect = function FormSelect(_ref) {
     disabledValues: disabledValues,
     isOpen: open,
     isError: field.hasErrors && field.dirty || field.hasErrors && showErrors,
+    ariaInvalid: field.hasErrors && field.dirty || field.hasErrors && showErrors,
     onSelect: onChange ? function (value) {
       return onChange(value);
     } : function (value) {
@@ -24229,18 +24246,19 @@ var FormSelect = function FormSelect(_ref) {
     },
     disabled: disabled,
     autocompleteValue: autocompleteValue,
-    smoothScroll: smoothScroll,
-    required: options.required
+    smoothScroll: smoothScroll
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    justify: "space-between",
-    role: "alert"
+    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            }",
-    id: createIdFromString(labelTextWhenNoError, "error message")
+    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": "polite",
+    "aria-atomic": true,
+    "data-qa": createIdFromString(labelTextWhenNoError, "error message")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -24989,8 +25007,6 @@ var options = [{
   value: "ZW"
 }];
 
-var _excluded$o = ["labelTextWhenNoError", "errorMessages", "field", "fieldActions", "showErrors", "onChange"];
-
 var CountryDropdown = function CountryDropdown(_ref) {
   var labelTextWhenNoError = _ref.labelTextWhenNoError,
       errorMessages = _ref.errorMessages,
@@ -24998,18 +25014,19 @@ var CountryDropdown = function CountryDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
-
-  return /*#__PURE__*/React__default.createElement(FormSelect$1, _extends({
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "Country Dropdown" : _ref$dataQa;
+  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
     options: options,
     field: field,
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
+    dataQa: dataQa,
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
     autocompleteValue: "country-name"
-  }, rest));
+  });
 };
 
 var DetailText = styled__default.p.withConfig({
@@ -25075,7 +25092,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$p = ["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)
@@ -25125,7 +25142,7 @@ var Detail = function Detail(_ref) {
       as = _ref$as === void 0 ? "p" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$p);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
@@ -25154,7 +25171,9 @@ var fallbackValues$i = {
 var DisplayBox = function DisplayBox(_ref) {
   var children = _ref.children,
       themeValues = _ref.themeValues,
-      showError = _ref.showError;
+      showError = _ref.showError,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "DisplayBox" : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0 1.5rem 0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -25163,7 +25182,8 @@ var DisplayBox = function DisplayBox(_ref) {
     borderSize: showError && "1px",
     borderColor: showError && RED,
     borderRadius: "4px",
-    boxShadow: themeValues.boxShadow
+    boxShadow: themeValues.boxShadow,
+    dataQa: dataQa
   }, children));
 };
 
@@ -25656,7 +25676,7 @@ var Popover = function Popover(_ref) {
     extraStyles: "position: relative; ".concat(extraStyles)
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: function action() {
-      return noop;
+      return noop$1;
     },
     onFocus: function onFocus() {
       handleTogglePopover(true);
@@ -25849,8 +25869,8 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$q = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
+var _excluded$p = ["showErrors", "themeValues"],
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -25883,7 +25903,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
       themeValues = _ref8.themeValues,
-      props = _objectWithoutProperties(_ref8, _excluded$q);
+      props = _objectWithoutProperties(_ref8, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
@@ -25932,9 +25952,12 @@ var FormInput = function FormInput(_ref15) {
       themeValues = _ref15.themeValues,
       background = _ref15.background,
       customHeight = _ref15.customHeight,
-      autocomplete = _ref15.autocomplete,
+      _ref15$autocompleteVa = _ref15.autocompleteValue,
+      autocompleteValue = _ref15$autocompleteVa === void 0 ? "" : _ref15$autocompleteVa,
       extraStyles = _ref15.extraStyles,
       removeFromValue = _ref15.removeFromValue,
+      _ref15$dataQa = _ref15.dataQa,
+      dataQa = _ref15$dataQa === void 0 ? "Form Input" : _ref15$dataQa,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _useState = React.useState(false),
@@ -25954,8 +25977,7 @@ var FormInput = function FormInput(_ref15) {
   };
 
   return /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0.25rem",
-    "aria-live": "assertive"
+    childGap: "0.25rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, helperModal ? /*#__PURE__*/React__default.createElement(Cluster, {
@@ -25994,19 +26016,19 @@ 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);
     }
   }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0",
-    "aria-live": "assertive"
+    padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(value) {
       return setValue(value);
@@ -26018,14 +26040,14 @@ var FormInput = function FormInput(_ref15) {
     field: field,
     formatter: formatter,
     showErrors: showErrors,
-    "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
-    autocomplete: autocomplete
+    "data-qa": dataQa,
+    autoComplete: autocompleteValue
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return setValue(e.target.value);
@@ -26036,16 +26058,18 @@ var FormInput = function FormInput(_ref15) {
     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))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    role: "alert"
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "data-qa": "".concat(labelTextWhenNoError, " errors")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -26061,7 +26085,7 @@ var FormInput = function FormInput(_ref15) {
 
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$r = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -26071,7 +26095,7 @@ var FormInputRow = function FormInputRow(_ref) {
       largeChild = _ref.largeChild,
       largeChildSize = _ref.largeChildSize,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
@@ -26083,14 +26107,14 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$s = ["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$s);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
@@ -26098,12 +26122,12 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var _excluded$t = ["themeValues", "children"];
+var _excluded$s = ["themeValues", "children"];
 
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -26310,7 +26334,7 @@ var HamburgerButton = function HamburgerButton(_ref4) {
       inactiveColor = _ref4.inactiveColor,
       isActive = _ref4.isActive,
       _ref4$onClick = _ref4.onClick,
-      onClick = _ref4$onClick === void 0 ? noop : _ref4$onClick,
+      onClick = _ref4$onClick === void 0 ? noop$1 : _ref4$onClick,
       controls = _ref4.controls;
   return /*#__PURE__*/React__default.createElement(Hamburger, {
     className: isActive === true ? "active" : "",
@@ -26368,7 +26392,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$u = ["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,
@@ -26388,7 +26412,7 @@ var Heading = function Heading(_ref) {
       as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
@@ -26679,7 +26703,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$v = ["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,
@@ -26695,7 +26719,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$v);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
@@ -26727,7 +26751,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$w = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$v = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -26737,7 +26761,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -27118,7 +27142,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       themeValues = _ref5.themeValues,
       index = _ref5.index,
       _ref5$handleChange = _ref5.handleChange,
-      handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
+      handleChange = _ref5$handleChange === void 0 ? noop$1 : _ref5$handleChange,
       field = _ref5.field,
       config = _ref5.config;
 
@@ -37933,7 +37957,10 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
       countryCode = _ref.countryCode,
-      autocomplete = _ref.autocomplete;
+      _ref$autocompleteValu = _ref.autocompleteValue,
+      autocompleteValue = _ref$autocompleteValu === void 0 ? "administrative-area" : _ref$autocompleteValu,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "StateProvinceDropdown" : _ref$dataQa;
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React__default.createElement(FormSelect$1, {
@@ -37943,7 +37970,9 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    autocompleteValue: autocomplete
+    "aria-invalid": !!(errorMessages !== null && errorMessages !== void 0 && errorMessages.length),
+    autocompleteValue: autocompleteValue,
+    dataQa: dataQa
   });
 };
 
@@ -37999,7 +38028,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
       isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
       _ref6$onToggle = _ref6.onToggle,
-      onToggle = _ref6$onToggle === void 0 ? noop : _ref6$onToggle,
+      onToggle = _ref6$onToggle === void 0 ? noop$1 : _ref6$onToggle,
       _ref6$disabled = _ref6.disabled,
       disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
       _ref6$name = _ref6.name,
@@ -38109,15 +38138,15 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, /*#__PURE__*/React__default.createElement(HiddenToggleSwitchBox, {
     "aria-label": name,
     checked: isOn,
-    onChange: disabled ? noop : onToggle,
+    onChange: disabled ? noop$1 : onToggle,
     disabled: disabled,
     id: "#toggle-".concat(name),
     isMobile: isMobile
   }), /*#__PURE__*/React__default.createElement(VisibleSwitch, {
     name: name,
     htmlFor: "#toggle-".concat(name),
-    onClick: disabled ? noop : onToggle,
-    onKeyDown: disabled ? noop : handleKeyDown,
+    onClick: disabled ? noop$1 : onToggle,
+    onKeyDown: disabled ? noop$1 : handleKeyDown,
     pose: disabled ? "disabled" : isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
@@ -38512,7 +38541,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38522,7 +38551,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$x);
+      props = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -40377,19 +40406,18 @@ var AddressForm = function AddressForm(_ref) {
       }
     },
     showErrors: showErrors,
-    "aria-label": "Country"
+    dataQa: "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
-    required: true,
     field: fields.street1,
     fieldActions: actions.fields.street1,
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-line1",
-    "aria-label": "Address Line 1"
+    autocompleteValue: "address-line1",
+    dataQa: "Address Line 1"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40398,11 +40426,10 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-line2",
-    "aria-label": "Address Line 2"
+    autocompleteValue: "address-line2",
+    dataQa: "Address Line 2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
-    required: true,
     errorMessages: cityErrorMessages,
     field: fields.city,
     fieldActions: actions.fields.city,
@@ -40410,8 +40437,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "city",
-    "aria-label": "City"
+    autocompleteValue: "city",
+    dataQa: "City"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -40422,8 +40449,8 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    "aria-label": isUS ? "State" : "State or Province",
-    required: true
+    autocompleteValue: "administrative-area",
+    dataQa: "State or Province"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40435,12 +40462,11 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    "aria-label": "zip code",
-    autocomplete: "postal-code",
-    required: true
+    autocompleteValue: "postal-code",
+    dataQa: "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
   })));
@@ -40540,7 +40566,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       showErrors = _ref.showErrors,
       isMobile = _ref.isMobile,
       revenueManagement = _ref.revenueManagement,
@@ -40597,7 +40623,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "current-password"
+    autocompleteValue: "current-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "New password",
     errorMessages: newPasswordErrorMessages,
@@ -40608,7 +40634,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmNewPasswordErrorMessages,
@@ -40619,7 +40645,7 @@ var ChangePasswordForm = function ChangePasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "1rem 0 0" : "1.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -40760,8 +40786,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
-    onClick: isMobile && supportsTouch ? noop : toggleSection,
-    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
+    onClick: isMobile && supportsTouch ? noop$1 : toggleSection,
+    onTouchEnd: isMobile && supportsTouch ? toggleSection : noop$1,
     key: "header",
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
@@ -40990,7 +41016,7 @@ var EditNameForm = function EditNameForm(_ref) {
       clearOnDismount = _ref.clearOnDismount,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -41009,6 +41035,7 @@ var EditNameForm = function EditNameForm(_ref) {
     "aria-label": "Edit name"
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "First Name",
+    dataQa: "Edit First Name",
     errorMessages: firstNameErrorMessages,
     field: fields.firstName,
     fieldActions: actions.fields.firstName,
@@ -41016,9 +41043,10 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "given-name"
+    autocompleteValue: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last Name",
+    dataQa: "Edit Last Name",
     errorMessages: lastNameErrorMessages,
     field: fields.lastName,
     fieldActions: actions.fields.lastName,
@@ -41026,7 +41054,7 @@ var EditNameForm = function EditNameForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "family-name"
+    autocompleteValue: "family-name"
   })));
 };
 
@@ -41335,7 +41363,7 @@ var EmailForm = function EmailForm(_ref) {
       showErrors = _ref.showErrors,
       guestCheckout = _ref.guestCheckout,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
@@ -41366,7 +41394,8 @@ var EmailForm = function EmailForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isEmail: true,
-    autoComplete: "email"
+    autocompleteValue: "email",
+    dataQa: "Email address"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
@@ -41434,7 +41463,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
       clearOnDismount = _ref.clearOnDismount,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -41455,7 +41484,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isEmail: true,
-    autocomplete: "email"
+    autocompleteValue: "email"
   });
 };
 
@@ -43113,7 +43142,7 @@ var LoginForm = function LoginForm(_ref) {
       actions = _ref.actions,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit;
 
   if (clearOnDismount) {
     React.useEffect(function () {
@@ -43141,7 +43170,7 @@ var LoginForm = function LoginForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isEmail: true,
-    autocomplete: "email"
+    autocompleteValue: "email"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -43152,7 +43181,7 @@ var LoginForm = function LoginForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "current-password"
+    autocompleteValue: "current-password"
   }));
 };
 
@@ -46637,14 +46666,17 @@ var Modal$1 = function Modal(_ref) {
       customWidth = _ref.customWidth,
       isLoading = _ref.isLoading,
       buttonExtraStyles = _ref.buttonExtraStyles,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "" : _ref$dataQa;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
 
   var modalContainerRef = React.useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
-    ref: modalContainerRef
+    ref: modalContainerRef,
+    "data-qa": dataQa
   }, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
   , {
     focusTrapOptions: {
@@ -48034,7 +48066,7 @@ var Pagination = function Pagination(_ref3) {
         return setCurrentPage({
           pageNumber: item.index
         });
-      } : noop,
+      } : noop$1,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
       extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
@@ -48156,7 +48188,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$y = ["amount"],
+var _excluded$x = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -48347,7 +48379,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _ref4$voidableTransac = _ref4.voidableTransactionDetails,
       voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
       _ref4$partialVoidActi = _ref4.partialVoidAction,
-      partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
+      partialVoidAction = _ref4$partialVoidActi === void 0 ? noop$1 : _ref4$partialVoidActi,
       _ref4$voidableAmountP = _ref4.voidableAmountPaid,
       voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
       _ref4$remainingBalanc = _ref4.remainingBalance,
@@ -48366,7 +48398,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$y);
+        rest = _objectWithoutProperties(_ref5, _excluded$x);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -48503,7 +48535,9 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       acceptText = _ref.acceptText,
       content = _ref.content,
       imageType = _ref.imageType,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "AccountAndRoutingModal" : _ref$dataQa;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -48513,6 +48547,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       return toggleOpen(true);
     },
     modalHeaderText: title,
+    dataQa: dataQa,
     modalBodyText: /*#__PURE__*/React__default.createElement(Box, {
       extraStyles: "overflow: scroll; max-height: 20rem;"
     }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Paragraph$1, {
@@ -48530,6 +48565,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    role: "button",
     variant: "pS",
     onClick: function onClick() {
       return toggleOpen(true);
@@ -48650,16 +48686,21 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant;
+      linkVariant = _ref.linkVariant,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV1" : _ref$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
 
-  return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  return /*#__PURE__*/React__default.createElement(DisplayBox$1, {
+    dataQ: dataQa
+  }, /*#__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
@@ -48738,7 +48779,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
+      _ref$dataQa = _ref.dataQa,
+      dataQa = _ref$dataQa === void 0 ? "TermsAndConditionsControlV2" : _ref$dataQa;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -48760,7 +48803,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     minWidth: displayInline ? "0" : "100%",
     background: displayInline ? "transparent" : containerBackground,
     boxShadow: displayInline ? "none" : standardBoxShadow,
-    borderRadius: displayInline ? "0" : "4px"
+    borderRadius: displayInline ? "0" : "4px",
+    dataQa: dataQa
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, html && /*#__PURE__*/React__default.createElement(Box, {
@@ -48793,19 +48837,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$z = ["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$z);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
@@ -48826,7 +48873,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       actions = _ref.actions,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -48870,6 +48917,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",
+    dataQa: "Name on checking account",
     errorMessages: nameErrors,
     field: fields.name,
     fieldActions: actions.fields.name,
@@ -48877,9 +48925,10 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "name"
+    autocompleteValue: "name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Routing number",
+    dataQa: "Routing number",
     errorMessages: routingNumberErrors,
     field: fields.routingNumber,
     fieldActions: actions.fields.routingNumber,
@@ -48892,7 +48941,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": "What is my routing number"
       });
     },
     onKeyDown: function onKeyDown(e) {
@@ -48900,6 +48950,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm routing number",
+    dataQa: "Confirm routing number",
     errorMessages: confirmRoutingNumberErrors,
     field: fields.confirmRoutingNumber,
     fieldActions: actions.fields.confirmRoutingNumber,
@@ -48910,6 +48961,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Account number",
+    dataQa: "Account number",
     errorMessages: accountNumberErrors,
     field: fields.accountNumber,
     fieldActions: actions.fields.accountNumber,
@@ -48922,7 +48974,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,
+        dataQa: "What is my account number"
       });
     },
     onKeyDown: function onKeyDown(e) {
@@ -48930,6 +48983,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm account number",
+    dataQa: "Confirm account number",
     errorMessages: confirmAccountNumberErrors,
     field: fields.confirmAccountNumber,
     fieldActions: actions.fields.confirmAccountNumber,
@@ -48940,6 +48994,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     isNum: true
   }), allowBankAccountType && /*#__PURE__*/React__default.createElement(FormSelect$1, {
     labelTextWhenNoError: "Account type",
+    dataQa: "Account type",
     options: [{
       text: "Select account type",
       value: ""
@@ -48956,6 +49011,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     field: fields.accountType
   }), !hideDefaultPayment && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     title: "Save as Default Payment Method",
+    dataQa: "default-payment-ach",
     name: "default-payment-ach",
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
@@ -48965,6 +49021,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     align: "center"
   }, showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
+    dataQa: "Save checking account to wallet",
     title: "Save checking account to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49025,7 +49082,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       actions = _ref.actions,
       showErrors = _ref.showErrors,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked,
@@ -49077,9 +49134,11 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
         actions.fields.zipCode.set("");
       }
     },
-    showErrors: showErrors
+    showErrors: showErrors,
+    dataQa: "Country"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Name on card",
+    dataQa: "Name on card",
     errorMessages: nameOnCardErrors,
     field: fields.nameOnCard,
     fieldActions: actions.fields.nameOnCard,
@@ -49087,9 +49146,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-name"
+    autocompleteValue: "cc-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Credit card number",
+    dataQa: "Credit card number",
     errorMessages: creditCardNumberErrors,
     field: fields.creditCardNumber,
     fieldActions: actions.fields.creditCardNumber,
@@ -49099,12 +49159,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
-    autocomplete: "cc-number"
+    autocompleteValue: "cc-number"
   }), /*#__PURE__*/React__default.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
     childGap: isMobile ? "0rem" : "1rem"
   }, /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Expiration date (MM/YY)",
+    dataQa: "Expiration date",
     errorMessages: expirationDateErrors,
     field: fields.expirationDate,
     fieldActions: actions.fields.expirationDate,
@@ -49116,9 +49177,10 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: true,
     removeFromValue: /\// // removes "/" from browser autofill
     ,
-    autocomplete: "cc-exp"
+    autocompleteValue: "cc-exp"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
+    dataQa: "CVV",
     errorMessages: cvvErrors,
     field: fields.cvv,
     fieldActions: actions.fields.cvv,
@@ -49128,7 +49190,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "cc-csc"
+    autocompleteValue: "cc-csc"
   })), !hideZipCode && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0 0.5rem 0 0",
     width: isMobile ? "100%" : "50%"
@@ -49136,6 +49198,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
     labelTextWhenNoError: "Zip code",
+    dataQa: "Zip code",
     errorMessages: zipCodeErrors,
     field: fields.zipCode,
     fieldActions: actions.fields.zipCode,
@@ -49143,12 +49206,13 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "billing postal-code"
+    autocompleteValue: "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",
+    dataQa: "Save credit card to wallet",
     title: "Save credit card to wallet.",
     checked: walletCheckboxMarked,
     onChange: saveToWallet
@@ -49360,8 +49424,8 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    isNum: true,
-    autocomplete: "tel"
+    autocompleteValue: "tel",
+    dataQa: "Phone number"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
@@ -49408,7 +49472,7 @@ var RadioGroup = function RadioGroup(_ref) {
       config = _ref.config,
       extraStyles = _ref.extraStyles,
       _ref$handleChange = _ref.handleChange,
-      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop$1 : _ref$handleChange,
       field = _ref.field,
       fieldActions = _ref.fieldActions;
 
@@ -49570,12 +49634,12 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
-      onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
+      onClick: isMobile && supportsTouch || section.disabled ? noop$1 : function () {
         return toggleOpenSection(section.id);
       },
       onTouchEnd: isMobile && supportsTouch && !section.disabled ? function () {
         return toggleOpenSection(section.id);
-      } : noop,
+      } : noop$1,
       key: "header-".concat(section.id),
       borderSize: "0px",
       borderColor: themeValues.borderColor,
@@ -49598,7 +49662,7 @@ var RadioSection = function RadioSection(_ref) {
       ariaDescribedBy: ariaDescribedBy,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
-      toggleRadio: section.disabled ? noop : function () {
+      toggleRadio: section.disabled ? noop$1 : function () {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1"
@@ -49644,7 +49708,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       showErrors = _ref.showErrors,
       isMobile = _ref.isMobile;
 
@@ -49677,7 +49741,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "given-name"
+    autocompleteValue: "given-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Last name",
     errorMessages: lastNameErrorMessages,
@@ -49687,7 +49751,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "family-name"
+    autocompleteValue: "family-name"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: emailErrorMessages,
@@ -49699,7 +49763,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
     },
     type: "email",
     isEmail: true,
-    autocomplete: "email"
+    autocompleteValue: "email"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: passwordErrorMessages,
@@ -49710,7 +49774,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -49721,7 +49785,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0" : "0.5rem 0 0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
@@ -49810,7 +49874,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
   var _passwordErrorMessage;
 
   var _ref$handleSubmit = _ref.handleSubmit,
-      handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
+      handleSubmit = _ref$handleSubmit === void 0 ? noop$1 : _ref$handleSubmit,
       clearOnDismount = _ref.clearOnDismount,
       fields = _ref.fields,
       actions = _ref.actions,
@@ -49842,7 +49906,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Confirm password",
     errorMessages: confirmPasswordErrorMessages,
@@ -49853,7 +49917,7 @@ var ResetPasswordForm = function ResetPasswordForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     type: "password",
-    autocomplete: "new-password"
+    autocompleteValue: "new-password"
   }), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {