@instructure/ui-text-area 11.7.4-snapshot-121 → 11.7.4-snapshot-126

package/CHANGELOG.md

@@ -3,7 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-121](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-121) (2026-07-22)
+## [11.7.4-snapshot-126](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-126) (2026-07-22)
+
+
+### Bug Fixes
+
+* **many:** keep form field messages out of the control's accessible name ([409d077](https://github.com/instructure/instructure-ui/commit/409d077a3095b318fd7d2e150bb01bc2732c9bf5))
+* **many:** only reference rendered messages via aria-describedby ([ccc9516](https://github.com/instructure/instructure-ui/commit/ccc95165ec8dae6d06e001c0a20fcebef1cf9962))
 
 
 ### Features

package/es/TextArea/v2/index.js

@@ -90,6 +90,9 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
       isSuccess
     };
   }, [messages]);
+  const hasMessages = !!messages?.some(m => !!m.text);
+  const messagesId = `${id}-messages`;
+  const labelId = `${id}-label`;
 
   // Use styles
   const styles = useStyleNew({
@@ -309,7 +312,11 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     required: required,
     "aria-required": required,
-    "aria-invalid": isInvalid ? 'true' : undefined,
+    "aria-invalid": isInvalid ? 'true' : undefined
+    // Keep messages in the description so the accessible name contains only the label.
+    ,
+    "aria-describedby": [rest['aria-describedby'], hasMessages ? messagesId : null].filter(Boolean).join(' ') || undefined,
+    "aria-labelledby": hasMessages ? rest['aria-labelledby'] || labelId : rest['aria-labelledby'],
     disabled: disabled,
     readOnly: readOnly,
     css: styles?.textArea,
@@ -318,6 +325,8 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   return _jsx(FormField, {
     ...pickProps(props, FormField.allowedProps),
     label: label,
+    messagesId: messagesId,
+    labelId: labelId,
     vAlign: "top",
     id: id,
     elementRef: el => {

package/lib/TextArea/v2/index.js

@@ -103,6 +103,9 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
       isSuccess
     };
   }, [messages]);
+  const hasMessages = !!messages?.some(m => !!m.text);
+  const messagesId = `${id}-messages`;
+  const labelId = `${id}-label`;
 
   // Use styles
   const styles = (0, _emotion.useStyleNew)({
@@ -322,7 +325,11 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
     id: id,
     required: required,
     "aria-required": required,
-    "aria-invalid": isInvalid ? 'true' : undefined,
+    "aria-invalid": isInvalid ? 'true' : undefined
+    // Keep messages in the description so the accessible name contains only the label.
+    ,
+    "aria-describedby": [rest['aria-describedby'], hasMessages ? messagesId : null].filter(Boolean).join(' ') || undefined,
+    "aria-labelledby": hasMessages ? rest['aria-labelledby'] || labelId : rest['aria-labelledby'],
     disabled: disabled,
     readOnly: readOnly,
     css: styles?.textArea,
@@ -331,6 +338,8 @@ const TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)((props,
   return (0, _jsxRuntime.jsx)(_latest.FormField, {
     ...(0, _pickProps.pickProps)(props, _latest.FormField.allowedProps),
     label: label,
+    messagesId: messagesId,
+    labelId: labelId,
     vAlign: "top",
     id: id,
     elementRef: el => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-area",
-  "version": "11.7.4-snapshot-121",
+  "version": "11.7.4-snapshot-126",
   "description": "A styled HTML text area component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/debounce": "11.7.4-snapshot-121",
-    "@instructure/emotion": "11.7.4-snapshot-121",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-121",
-    "@instructure/shared-types": "11.7.4-snapshot-121",
-    "@instructure/ui-form-field": "11.7.4-snapshot-121",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-themes": "11.7.4-snapshot-121",
-    "@instructure/uid": "11.7.4-snapshot-121"
+    "@instructure/debounce": "11.7.4-snapshot-126",
+    "@instructure/emotion": "11.7.4-snapshot-126",
+    "@instructure/shared-types": "11.7.4-snapshot-126",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-form-field": "11.7.4-snapshot-126",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-themes": "11.7.4-snapshot-126",
+    "@instructure/ui-utils": "11.7.4-snapshot-126",
+    "@instructure/uid": "11.7.4-snapshot-126"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-121",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-121",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-121"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-126",
+    "@instructure/ui-axe-check": "11.7.4-snapshot-126",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-126"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TextArea/v2/index.tsx

@@ -128,6 +128,10 @@ const TextArea = forwardRef<TextAreaElement, TextAreaProps>((props, ref) => {
     return { isInvalid, isSuccess }
   }, [messages])
 
+  const hasMessages = !!messages?.some((m) => !!m.text)
+  const messagesId = `${id}-messages`
+  const labelId = `${id}-label`
+
   // Use styles
   const styles = useStyleNew({
     generateStyle,
@@ -393,6 +397,17 @@ const TextArea = forwardRef<TextAreaElement, TextAreaProps>((props, ref) => {
       required={required}
       aria-required={required}
       aria-invalid={isInvalid ? 'true' : undefined}
+      // Keep messages in the description so the accessible name contains only the label.
+      aria-describedby={
+        [rest['aria-describedby'], hasMessages ? messagesId : null]
+          .filter(Boolean)
+          .join(' ') || undefined
+      }
+      aria-labelledby={
+        hasMessages
+          ? rest['aria-labelledby'] || labelId
+          : rest['aria-labelledby']
+      }
       disabled={disabled}
       readOnly={readOnly}
       css={styles?.textArea}
@@ -404,6 +419,8 @@ const TextArea = forwardRef<TextAreaElement, TextAreaProps>((props, ref) => {
     <FormField
       {...pickProps(props, FormField.allowedProps)}
       label={label}
+      messagesId={messagesId}
+      labelId={labelId}
       vAlign="top"
       id={id}
       elementRef={(el) => {

package/src/TextArea/v2/props.ts

@@ -113,7 +113,9 @@ type TextAreaOwnProps = {
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
 
   /**
-   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   * Valid values are `0`, `none`, `auto`, and Spacing token values,
+   * see https://instructure.design/layout-spacing. Apply these values via
+   * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
    */
   margin?: Spacing
 }