carbon-react 154.3.0 → 154.3.2

package/esm/components/decimal/decimal.component.js

@@ -146,6 +146,9 @@ export const Decimal = /*#__PURE__*/React.forwardRef(({
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     !(prevControlledRef.current !== isControlled) ? process.env.NODE_ENV !== "production" ? invariant(false, message) : invariant(false) : void 0;
     prevControlledRef.current = isControlled;
+    return () => {
+      prevControlledRef.current = null;
+    };
   }, [isControlled]);
   const prevValue = usePrevious(value);
   useEffect(() => {

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/decimal/decimal.component.js

@@ -155,6 +155,9 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     const message = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     !(prevControlledRef.current !== isControlled) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, message) : (0, _invariant.default)(false) : void 0;
     prevControlledRef.current = isControlled;
+    return () => {
+      prevControlledRef.current = null;
+    };
   }, [isControlled]);
   const prevValue = (0, _usePrevious.default)(value);
   (0, _react.useEffect)(() => {

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.0",
+  "version": "154.3.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -91,7 +91,7 @@
     "@storybook/types": "~8.6.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/crypto-js": "^4.2.1",
     "@types/glob": "^8.1.0",