carbon-react 154.3.1 → 154.3.2

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -10,6 +10,12 @@ export interface ContentEditorProps {
     rows?: number;
     /** Whether the editor is read-only */
     readOnly?: boolean;
+    /** Whether the editor is required */
+    required?: boolean;
+    /** Editor has an error */
+    error?: boolean;
+    /** Editor has a warning */
+    warning?: boolean;
 }
 declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -11,9 +11,15 @@ const ContentEditor = /*#__PURE__*/forwardRef(({
   namespace,
   previews = [],
   rows,
-  readOnly
+  readOnly,
+  required,
+  error,
+  warning
 }, ref) => {
   const focusAtEnd = useCursorAtEnd();
+  const validationMessageId = error || warning ? `${namespace}-validation-message` : "";
+  const inputHintId = inputHint ? `${namespace}-input-hint` : "";
+  const ariaDescribedBy = `${validationMessageId} ${inputHintId}`.trim();
   return /*#__PURE__*/React.createElement(StyledContentEditable, {
     "data-role": `${namespace}-content-editable`,
     namespace: namespace,
@@ -21,8 +27,10 @@ const ContentEditor = /*#__PURE__*/forwardRef(({
     readOnly: readOnly
   }, /*#__PURE__*/React.createElement(ContentEditable, {
     ref: ref,
-    "aria-describedby": inputHint && `${namespace}-input-hint`,
+    "aria-describedby": ariaDescribedBy,
     "aria-labelledby": `${namespace}-label`,
+    "aria-required": required,
+    "aria-invalid": error,
     className: `${namespace}-editable`,
     "data-role": `${namespace}-editable`,
     onFocus: event => {
@@ -32,7 +40,7 @@ const ContentEditor = /*#__PURE__*/forwardRef(({
         focusAtEnd(event);
       }
     }
-    /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */,
+    /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overridden */,
     "aria-autocomplete": undefined,
     "aria-readonly": undefined
   }), /*#__PURE__*/React.createElement(LinkPreviewerPlugin, {

package/esm/components/text-editor/text-editor.component.js

@@ -164,6 +164,7 @@ export const TextEditor = ({
     warning: characterLimitWarning || warning || undefined
   }, (error || characterLimitWarning || warning) && /*#__PURE__*/React.createElement(StyledValidationMessage, {
     error: error,
+    id: `${namespace}-validation-message`,
     "data-role": `${namespace}-validation-message`
   }, error || characterLimitWarning || warning), /*#__PURE__*/React.createElement(StyledEditorToolbarWrapper, {
     "data-role": `${namespace}-editor-toolbar-wrapper`,
@@ -183,7 +184,10 @@ export const TextEditor = ({
       namespace: namespace,
       previews: previews,
       rows: rows,
-      readOnly: readOnly
+      readOnly: readOnly,
+      required: required,
+      error: !!error,
+      warning: !!warning || !!characterLimitWarning
     }),
     placeholder: /*#__PURE__*/React.createElement(Placeholder, {
       namespace: namespace,

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -10,6 +10,12 @@ export interface ContentEditorProps {
     rows?: number;
     /** Whether the editor is read-only */
     readOnly?: boolean;
+    /** Whether the editor is required */
+    required?: boolean;
+    /** Editor has an error */
+    error?: boolean;
+    /** Editor has a warning */
+    warning?: boolean;
 }
 declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/lib/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -21,9 +21,15 @@ const ContentEditor = /*#__PURE__*/(0, _react.forwardRef)(({
   namespace,
   previews = [],
   rows,
-  readOnly
+  readOnly,
+  required,
+  error,
+  warning
 }, ref) => {
   const focusAtEnd = (0, _.useCursorAtEnd)();
+  const validationMessageId = error || warning ? `${namespace}-validation-message` : "";
+  const inputHintId = inputHint ? `${namespace}-input-hint` : "";
+  const ariaDescribedBy = `${validationMessageId} ${inputHintId}`.trim();
   return /*#__PURE__*/_react.default.createElement(_contentEditor.default, {
     "data-role": `${namespace}-content-editable`,
     namespace: namespace,
@@ -31,8 +37,10 @@ const ContentEditor = /*#__PURE__*/(0, _react.forwardRef)(({
     readOnly: readOnly
   }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
     ref: ref,
-    "aria-describedby": inputHint && `${namespace}-input-hint`,
+    "aria-describedby": ariaDescribedBy,
     "aria-labelledby": `${namespace}-label`,
+    "aria-required": required,
+    "aria-invalid": error,
     className: `${namespace}-editable`,
     "data-role": `${namespace}-editable`,
     onFocus: event => {
@@ -42,7 +50,7 @@ const ContentEditor = /*#__PURE__*/(0, _react.forwardRef)(({
         focusAtEnd(event);
       }
     }
-    /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overriden */,
+    /** The following are automatically added by Lexical but violate WCAG 4.1.2 Name, Role, Value and so have been overridden */,
     "aria-autocomplete": undefined,
     "aria-readonly": undefined
   }), /*#__PURE__*/_react.default.createElement(_.LinkPreviewerPlugin, {

package/lib/components/text-editor/text-editor.component.js

@@ -172,6 +172,7 @@ const TextEditor = ({
     warning: characterLimitWarning || warning || undefined
   }, (error || characterLimitWarning || warning) && /*#__PURE__*/_react.default.createElement(_textEditor2.StyledValidationMessage, {
     error: error,
+    id: `${namespace}-validation-message`,
     "data-role": `${namespace}-validation-message`
   }, error || characterLimitWarning || warning), /*#__PURE__*/_react.default.createElement(_textEditor2.StyledEditorToolbarWrapper, {
     "data-role": `${namespace}-editor-toolbar-wrapper`,
@@ -191,7 +192,10 @@ const TextEditor = ({
       namespace: namespace,
       previews: previews,
       rows: rows,
-      readOnly: readOnly
+      readOnly: readOnly,
+      required: required,
+      error: !!error,
+      warning: !!warning || !!characterLimitWarning
     }),
     placeholder: /*#__PURE__*/_react.default.createElement(_plugins.Placeholder, {
       namespace: namespace,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "154.3.1",
+  "version": "154.3.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",