@thecb/components 8.4.11-beta.7 → 8.4.11-beta.9

package/dist/index.cjs.js

@@ -22151,7 +22151,7 @@ var Checkbox = function Checkbox(_ref4) {
     onChange: onChange,
     tabIndex: "-1",
     "aria-invalid": error,
-    "aria-describedby": error ? "".concat(name, "-error-message") : ""
+    "aria-describedby": name
   }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
     error: error,
     disabled: disabled,
@@ -23985,15 +23985,13 @@ var Dropdown = function Dropdown(_ref8) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
-    "aria-autocomplete": "list",
-    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
-    "aria-activedescendant": "focused_option",
-    "aria-owns": "".concat(ariaLabelledby, "_listbox"),
+    "aria-autocomplete": "list" // aria-activedescendant="focused_option"
+    // aria-owns={`${ariaLabelledby}_listbox`}
+    // aria-controls={`${ariaLabelledby}_listbox`}
+    ,
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    "aria-expanded": isOpen,
-    "aria-live": "polite",
     autoComplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
@@ -24004,7 +24002,8 @@ var Dropdown = function Dropdown(_ref8) {
     isOpen: isOpen,
     minHeight: "48px",
     minWidth: "100%",
-    name: autocompleteValue,
+    name: autocompleteValue // aria-expanded={isOpen}
+    ,
     onChange: function onChange(e) {
       // support autofill and copy/paste
       if (e.target.value !== inputValue) {
@@ -24066,7 +24065,7 @@ var Dropdown = function Dropdown(_ref8) {
     }, /*#__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)));
 };
@@ -24211,7 +24210,7 @@ var FormSelect = function FormSelect(_ref) {
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
+    ariaDescribedby: createIdFromString(labelTextWhenNoError),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24234,14 +24233,14 @@ var FormSelect = function FormSelect(_ref) {
     required: options.required
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    justify: "space-between"
+    justify: "space-between",
+    role: "alert"
   }, /*#__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"),
-    "aria-live": "polite"
+    id: createIdFromString(labelTextWhenNoError, "error message")
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -25955,7 +25954,8 @@ var FormInput = function FormInput(_ref15) {
   };
 
   return /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: "0.25rem"
+    childGap: "0.25rem",
+    "aria-live": "assertive"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, helperModal ? /*#__PURE__*/React__default.createElement(Cluster, {
@@ -26002,10 +26002,11 @@ var FormInput = function FormInput(_ref15) {
   }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0"
+    padding: "0",
+    "aria-live": "assertive"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-describedby": createIdFromString(labelTextWhenNoError),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(value) {
       return setValue(value);
@@ -26021,10 +26022,10 @@ var FormInput = function FormInput(_ref15) {
     themeValues: themeValues,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
-    autoComplete: autocomplete
+    autocomplete: autocomplete
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-describedby": createIdFromString(labelTextWhenNoError),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return setValue(e.target.value);
@@ -26040,11 +26041,11 @@ var FormInput = function FormInput(_ref15) {
     background: background,
     $customHeight: customHeight,
     $extraStyles: extraStyles,
-    autoComplete: autocomplete
+    autocomplete: autocomplete
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    "aria-role": "alert"
+    role: "alert"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -40388,7 +40389,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "address-line1",
-    "aria-label": "address line 1"
+    "aria-label": "Address Line 1"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40398,7 +40399,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "address-line2",
-    "aria-label": "Apt, Suite, Unit, Floor, etc. (Optional)"
+    "aria-label": "Address Line 2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
     required: true,
@@ -40410,7 +40411,7 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     autocomplete: "city",
-    "aria-label": "city"
+    "aria-label": "City"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -40421,8 +40422,7 @@ 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",
+    "aria-label": isUS ? "State" : "State or Province",
     required: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
@@ -40436,7 +40436,8 @@ var AddressForm = function AddressForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     "aria-label": "zip code",
-    autocomplete: "postal-code"
+    autocomplete: "postal-code",
+    required: true
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to Wallet",