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

package/dist/index.esm.js

@@ -23976,8 +23976,8 @@ var Dropdown = function Dropdown(_ref8) {
     width: "100%"
   }, /*#__PURE__*/React.createElement(Box, {
     as: "input",
+    role: "combobox",
     "aria-multiline": "false",
-    "aria-autocomplete": "list",
     "aria-activedescendant": "focused_option",
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
@@ -24006,13 +24006,14 @@ var Dropdown = function Dropdown(_ref8) {
     padding: "12px",
     placeholder: getSelection(),
     themeValues: themeValues,
-    role: "combobox",
     title: hasTitles ? getSelection() : null,
     type: "text",
     tabIndex: 0,
     value: inputValue,
     width: "100%",
-    dataQa: placeholder
+    dataQa: placeholder,
+    required: options.required,
+    "aria-required": options.required
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen,
     onClick: _onClick
@@ -24048,13 +24049,14 @@ 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.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
@@ -24187,7 +24189,8 @@ var FormSelect = function FormSelect(_ref) {
   });
   return /*#__PURE__*/React.createElement(SelectContainer, {
     ref: dropdownRef,
-    disabled: disabled
+    disabled: disabled,
+    className: "form-select-component"
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%"
@@ -24201,9 +24204,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.createElement(Dropdown$1, {
+  }, "".concat(labelTextWhenNoError).concat(options.required ? "*" : "")))), /*#__PURE__*/React.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 : "",
@@ -24212,6 +24215,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) {
@@ -24221,19 +24225,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.createElement(Stack, {
     direction: "row",
-    justify: "space-between",
-    role: "alert"
+    justify: "space-between"
   }, /*#__PURE__*/React.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]] : "")));
 };
 
@@ -25975,7 +25982,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.createElement(Text$1, {
     variant: "pS",
@@ -25986,10 +25993,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.createElement(Box, {
     padding: "0 0 0 auto"
@@ -25997,7 +26005,7 @@ var FormInput = function FormInput(_ref15) {
     padding: "0"
   }, formatter ? /*#__PURE__*/React.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);
@@ -26016,7 +26024,7 @@ var FormInput = function FormInput(_ref15) {
     autocomplete: autocomplete
   }, props)) : /*#__PURE__*/React.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);
@@ -26036,7 +26044,8 @@ var FormInput = function FormInput(_ref15) {
   }, props))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    role: "alert"
+    "aria-live": "assertive",
+    "aria-atomic": true
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -37928,12 +37937,15 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
   var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
   return /*#__PURE__*/React.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
   });
 };
@@ -40367,8 +40379,7 @@ var AddressForm = function AddressForm(_ref) {
         actions.fields.zip.set("");
       }
     },
-    showErrors: showErrors,
-    "aria-label": "Country"
+    showErrors: showErrors
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,