@moda/om 21.7.0 → 21.7.2

package/dist/index.cjs.js

@@ -9896,6 +9896,7 @@ var TextInput = /*#__PURE__*/React.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);
@@ -11179,11 +11180,16 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label = _ref.label,
     placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded$h);
+  var id = React.useId();
+  var errorId = "".concat(id, "-error");
   var fieldContextValue = React.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.createElement(FormControlContext.Provider, {
     value: fieldContextValue
   }, /*#__PURE__*/React.createElement("label", {
@@ -11197,18 +11203,22 @@ var Field = /*#__PURE__*/React.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.createElement("span", {
     className: "Field__icon"
   }, /*#__PURE__*/React.createElement(Warning16, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, _extends$1({
     ref: ref,
     placeholder: placeholder,
     label: label,
-    error: error
+    error: error,
+    "aria-describedby": ariaDescribedBy
   }, rest)), error && /*#__PURE__*/React.createElement("span", {
     className: "Field__icon"
   }, /*#__PURE__*/React.createElement(Warning16, null)))), error && /*#__PURE__*/React.createElement("span", {
-    className: "Field__error"
+    id: errorId,
+    className: "Field__error",
+    role: "alert"
   }, error)));
 });
 Field.displayName = 'Field';
@@ -12607,6 +12617,7 @@ var SlidingPane = function SlidingPane(_ref) {
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     rest = _objectWithoutProperties(_ref, _excluded$5);
+  var titleId = React.useId();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('SlidingPane__overlay', {
       'SlidingPane__overlay--active': visible
@@ -12618,6 +12629,9 @@ var SlidingPane = function SlidingPane(_ref) {
     onClickOutside: onClose,
     onEscapeKey: onClose
   }, /*#__PURE__*/React.createElement("div", _extends$1({
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": titleId,
     className: classNames('SlidingPane', className, {
       'SlidingPane--active': visible
     })
@@ -12627,6 +12641,7 @@ var SlidingPane = function SlidingPane(_ref) {
     direction: "horizontal",
     className: "SlidingPane__top"
   }, /*#__PURE__*/React.createElement(Text, {
+    id: titleId,
     treatment: "h5",
     family: "serif"
   }, title), /*#__PURE__*/React.createElement(Clickable, {