@thecb/components 8.4.11-beta.10 → 8.4.11-beta.12

package/dist/index.cjs.js

@@ -22151,7 +22151,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,
@@ -23984,11 +23984,11 @@ var Dropdown = function Dropdown(_ref8) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
+    role: "combobox",
     "aria-multiline": "false",
-    "aria-autocomplete": "list" // aria-activedescendant="focused_option"
-    // aria-owns={`${ariaLabelledby}_listbox`}
-    // aria-controls={`${ariaLabelledby}_listbox`}
-    ,
+    "aria-activedescendant": "focused_option",
+    "aria-owns": "".concat(ariaLabelledby, "_listbox"),
+    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
@@ -24002,8 +24002,8 @@ var Dropdown = function Dropdown(_ref8) {
     isOpen: isOpen,
     minHeight: "48px",
     minWidth: "100%",
-    name: autocompleteValue // aria-expanded={isOpen}
-    ,
+    name: autocompleteValue,
+    "aria-expanded": isOpen,
     onChange: function onChange(e) {
       // support autofill and copy/paste
       if (e.target.value !== inputValue) {
@@ -24019,7 +24019,9 @@ var Dropdown = function Dropdown(_ref8) {
     tabIndex: 0,
     value: inputValue,
     width: "100%",
-    dataQa: placeholder
+    dataQa: placeholder,
+    required: options.required,
+    "aria-required": options.required
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24055,17 +24057,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)));
 };
@@ -24194,7 +24197,8 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React__default.createElement(SelectContainer, {
     ref: dropdownRef,
-    disabled: disabled
+    disabled: disabled,
+    className: "form-select-component"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -24208,9 +24212,9 @@ var FormSelect = function FormSelect(_ref) {
     weight: themeValues.fontWeight,
     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, {
+  }, "".concat(labelTextWhenNoError).concat(options.required ? "*" : "")))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
     ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    ariaDescribedby: createIdFromString(labelTextWhenNoError),
+    ariaDescribedby: "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24219,6 +24223,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) {
@@ -24228,19 +24233,22 @@ var FormSelect = function FormSelect(_ref) {
       return setOpen(!open);
     },
     disabled: disabled,
+    "aria-disabled": disabled,
     autocompleteValue: autocompleteValue,
     smoothScroll: smoothScroll,
-    required: options.required
+    required: options.required,
+    "aria-required": options.required,
+    id: "".concat(createIdFromString(labelTextWhenNoError), "-input")
   }), /*#__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"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
@@ -25982,7 +25990,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",
@@ -25993,10 +26001,11 @@ 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);
+      return (e.key === "Enter" || e.code === "Space") && setShowPassword(!showPassword);
     }
   }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
@@ -26004,7 +26013,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0"
   }, formatter ? /*#__PURE__*/React__default.createElement(FormattedInputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(value) {
       return setValue(value);
@@ -26023,7 +26032,7 @@ var FormInput = function FormInput(_ref15) {
     autocomplete: autocomplete
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
-    "aria-describedby": createIdFromString(labelTextWhenNoError),
+    "aria-describedby": "".concat(createIdFromString(labelTextWhenNoError), "-error-message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
       return setValue(e.target.value);
@@ -26043,7 +26052,8 @@ var FormInput = function FormInput(_ref15) {
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    role: "alert"
+    "aria-live": "assertive",
+    "aria-atomic": true
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -37935,12 +37945,15 @@ 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,
+    "aria-invalid": !!(errorMessages !== null && errorMessages !== void 0 && errorMessages.length),
     autocompleteValue: autocomplete
   });
 };
@@ -40374,8 +40387,7 @@ var AddressForm = function AddressForm(_ref) {
         actions.fields.zip.set("");
       }
     },
-    showErrors: showErrors,
-    "aria-label": "Country"
+    showErrors: showErrors
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,