@moda/om 21.7.1 → 21.7.2

package/dist/index.esm.js

@@ -9876,6 +9876,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     disabled: disabled,
     placeholder: placeholder,
     "aria-label": label || placeholder,
+    "aria-invalid": error ? true : undefined,
     ref: ref,
     onChange: function onChange(event) {
       _onChange === null || _onChange === void 0 || _onChange(event.target.value);
@@ -11159,11 +11160,16 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     label = _ref.label,
     placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded$h);
+  var id = useId();
+  var errorId = "".concat(id, "-error");
   var fieldContextValue = useMemo(function () {
     return {
       displaysError: Boolean(error)
     };
   }, [error]);
+
+  // Combine any existing aria-describedby with our error ID
+  var ariaDescribedBy = [rest['aria-describedby'], error ? errorId : null].filter(Boolean).join(' ') || undefined;
   return /*#__PURE__*/React__default.createElement(FormControlContext.Provider, {
     value: fieldContextValue
   }, /*#__PURE__*/React__default.createElement("label", {
@@ -11177,18 +11183,22 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     error: error,
     placeholder: placeholder,
     label: label,
-    shiftIconLeftwards: error && children.type === Select
+    shiftIconLeftwards: error && children.type === Select,
+    'aria-describedby': ariaDescribedBy
   }, rest), children.props)), error && /*#__PURE__*/React__default.createElement("span", {
     className: "Field__icon"
   }, /*#__PURE__*/React__default.createElement(Warning16, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({
     ref: ref,
     placeholder: placeholder,
     label: label,
-    error: error
+    error: error,
+    "aria-describedby": ariaDescribedBy
   }, rest)), error && /*#__PURE__*/React__default.createElement("span", {
     className: "Field__icon"
   }, /*#__PURE__*/React__default.createElement(Warning16, null)))), error && /*#__PURE__*/React__default.createElement("span", {
-    className: "Field__error"
+    id: errorId,
+    className: "Field__error",
+    role: "alert"
   }, error)));
 });
 Field.displayName = 'Field';