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

package/CHANGELOG.md

@@ -3,11 +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))
 * **ui-text-input:** restore inline cursor flow next to selected tags ([3dd1736](https://github.com/instructure/instructure-ui/commit/3dd1736173ff089970bbbd175bda81faa02895f7))
 
 

package/es/TextInput/v2/index.js

@@ -56,11 +56,13 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
     super(props);
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
+    this._labelId = props.deterministicId('TextInput-label');
   }
   ref = null;
   _input = null;
   _defaultId;
   _messagesId;
+  _labelId;
   _focusListener = null;
   handleRef = el => {
     const {
@@ -123,7 +125,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
     });
   }
   get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages?.some(m => !!m.text);
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
@@ -182,6 +184,13 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
+    // Keep messages in the description, not the accessible name.
+    // A consumer-provided aria-labelledby wins.
+    let labelledById = props['aria-labelledby'];
+    if (this.hasMessages) {
+      descriptionIds = [descriptionIds, this._messagesId].filter(Boolean).join(' ');
+      labelledById = labelledById || this._labelId;
+    }
     return _jsx("input", {
       ...props,
       css: this.props.styles?.textInput,
@@ -196,6 +205,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
       "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
+      "aria-labelledby": labelledById,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur
@@ -221,6 +231,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
       id: this.id,
       label: label,
       messagesId: this._messagesId,
+      labelId: this._labelId,
       messages: messages,
       inline: display === 'inline-block',
       width: width,

package/lib/TextInput/v2/index.js

@@ -67,11 +67,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     super(props);
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
+    this._labelId = props.deterministicId('TextInput-label');
   }
   ref = null;
   _input = null;
   _defaultId;
   _messagesId;
+  _labelId;
   _focusListener = null;
   handleRef = el => {
     const {
@@ -134,7 +136,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     });
   }
   get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0;
+    return !!this.props.messages?.some(m => !!m.text);
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
@@ -193,6 +195,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
+    // Keep messages in the description, not the accessible name.
+    // A consumer-provided aria-labelledby wins.
+    let labelledById = props['aria-labelledby'];
+    if (this.hasMessages) {
+      descriptionIds = [descriptionIds, this._messagesId].filter(Boolean).join(' ');
+      labelledById = labelledById || this._labelId;
+    }
     return (0, _jsxRuntime.jsx)("input", {
       ...props,
       css: this.props.styles?.textInput,
@@ -207,6 +216,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       disabled: interaction === 'disabled',
       readOnly: interaction === 'readonly',
       "aria-describedby": descriptionIds !== '' ? descriptionIds : undefined,
+      "aria-labelledby": labelledById,
       size: htmlSize,
       onChange: this.handleChange,
       onBlur: this.handleBlur
@@ -232,6 +242,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       id: this.id,
       label: label,
       messagesId: this._messagesId,
+      labelId: this._labelId,
       messages: messages,
       inline: display === 'inline-block',
       width: width,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.7.4-snapshot-121",
+  "version": "11.7.4-snapshot-126",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -18,21 +18,21 @@
     "@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-badge": "11.7.4-snapshot-121"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-126",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-126",
+    "@instructure/ui-badge": "11.7.4-snapshot-126",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-126"
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/shared-types": "11.7.4-snapshot-121",
-    "@instructure/emotion": "11.7.4-snapshot-121",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-form-field": "11.7.4-snapshot-121",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-themes": "11.7.4-snapshot-121",
-    "@instructure/ui-tag": "11.7.4-snapshot-121"
+    "@instructure/shared-types": "11.7.4-snapshot-126",
+    "@instructure/emotion": "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-dom-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-126",
+    "@instructure/ui-tag": "11.7.4-snapshot-126",
+    "@instructure/ui-themes": "11.7.4-snapshot-126"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TextInput/v2/index.tsx

@@ -70,6 +70,7 @@ class TextInput extends Component<TextInputProps> {
     super(props)
     this._defaultId = props.deterministicId!()
     this._messagesId = props.deterministicId!('TextInput-messages')
+    this._labelId = props.deterministicId!('TextInput-label')
   }
 
   ref: Element | null = null
@@ -78,6 +79,7 @@ class TextInput extends Component<TextInputProps> {
 
   private readonly _defaultId: string
   private readonly _messagesId: string
+  private readonly _labelId: string
 
   private _focusListener: { remove(): void } | null = null
 
@@ -158,7 +160,7 @@ class TextInput extends Component<TextInputProps> {
   }
 
   get hasMessages() {
-    return !!this.props.messages && this.props.messages.length > 0
+    return !!this.props.messages?.some((m) => !!m.text)
   }
 
   get invalid() {
@@ -231,6 +233,15 @@ class TextInput extends Component<TextInputProps> {
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`
     }
+    // Keep messages in the description, not the accessible name.
+    // A consumer-provided aria-labelledby wins.
+    let labelledById = props['aria-labelledby'] as string | undefined
+    if (this.hasMessages) {
+      descriptionIds = [descriptionIds, this._messagesId]
+        .filter(Boolean)
+        .join(' ')
+      labelledById = labelledById || this._labelId
+    }
 
     return (
       <input
@@ -247,6 +258,7 @@ class TextInput extends Component<TextInputProps> {
         disabled={interaction === 'disabled'}
         readOnly={interaction === 'readonly'}
         aria-describedby={descriptionIds !== '' ? descriptionIds : undefined}
+        aria-labelledby={labelledById}
         size={htmlSize}
         onChange={this.handleChange}
         onBlur={this.handleBlur}
@@ -283,6 +295,7 @@ class TextInput extends Component<TextInputProps> {
         id={this.id}
         label={label}
         messagesId={this._messagesId}
+        labelId={this._labelId}
         messages={messages}
         inline={display === 'inline-block'}
         width={width}

package/src/TextInput/v2/props.ts

@@ -174,7 +174,9 @@ type TextInputOwnProps = {
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => 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
 }