@instructure/ui-number-input 11.7.4-snapshot-121 → 11.7.4-snapshot-125

package/CHANGELOG.md

@@ -3,9 +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-125](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-125) (2026-07-22)
 
-**Note:** Version bump only for package @instructure/ui-number-input
+
+### 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))
 
 
 

package/es/NumberInput/v2/index.js

@@ -82,6 +82,9 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   // Computed values
   const invalid = !!messages && messages.some(message => message.type === 'error' || message.type === 'newError');
   const success = !!messages && messages.some(message => message.type === 'success');
+  const hasMessages = !!messages?.some(m => !!m.text);
+  const messagesId = id ? `${id}-messages` : undefined;
+  const labelId = id ? `${id}-label` : undefined;
   const interaction = getInteraction({
     props
   });
@@ -229,6 +232,8 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   return _jsx(FormField, {
     ...pickProps(props, FormField.allowedProps),
     label: label,
+    messagesId: messagesId,
+    labelId: labelId,
     inline: display === 'inline-block',
     id: id,
     elementRef: handleRef,
@@ -247,7 +252,11 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
         children: [_jsx("input", {
           ...passedProps,
           css: styles?.input,
-          "aria-invalid": invalid ? 'true' : undefined,
+          "aria-invalid": invalid ? 'true' : undefined
+          // Keep messages in the description so the accessible name contains only the label.
+          ,
+          "aria-describedby": [passedProps['aria-describedby'], hasMessages ? messagesId : null].filter(Boolean).join(' ') || undefined,
+          "aria-labelledby": hasMessages ? passedProps['aria-labelledby'] || labelId : passedProps['aria-labelledby'],
           id: id,
           type: allowStringValue ? 'text' : 'number',
           inputMode: inputMode,

package/lib/NumberInput/v2/index.js

@@ -93,6 +93,9 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   // Computed values
   const invalid = !!messages && messages.some(message => message.type === 'error' || message.type === 'newError');
   const success = !!messages && messages.some(message => message.type === 'success');
+  const hasMessages = !!messages?.some(m => !!m.text);
+  const messagesId = id ? `${id}-messages` : undefined;
+  const labelId = id ? `${id}-label` : undefined;
   const interaction = (0, _getInteraction.getInteraction)({
     props
   });
@@ -240,6 +243,8 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   return (0, _jsxRuntime.jsx)(_latest.FormField, {
     ...(0, _pickProps.pickProps)(props, _latest.FormField.allowedProps),
     label: label,
+    messagesId: messagesId,
+    labelId: labelId,
     inline: display === 'inline-block',
     id: id,
     elementRef: handleRef,
@@ -258,7 +263,11 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
         children: [(0, _jsxRuntime.jsx)("input", {
           ...passedProps,
           css: styles?.input,
-          "aria-invalid": invalid ? 'true' : undefined,
+          "aria-invalid": invalid ? 'true' : undefined
+          // Keep messages in the description so the accessible name contains only the label.
+          ,
+          "aria-describedby": [passedProps['aria-describedby'], hasMessages ? messagesId : null].filter(Boolean).join(' ') || undefined,
+          "aria-labelledby": hasMessages ? passedProps['aria-labelledby'] || labelId : passedProps['aria-labelledby'],
           id: id,
           type: allowStringValue ? 'text' : 'number',
           inputMode: inputMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "11.7.4-snapshot-121",
+  "version": "11.7.4-snapshot-125",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,23 +16,23 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/emotion": "11.7.4-snapshot-121",
-    "@instructure/shared-types": "11.7.4-snapshot-121",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-icons": "11.7.4-snapshot-121",
-    "@instructure/ui-form-field": "11.7.4-snapshot-121",
-    "@instructure/ui-themes": "11.7.4-snapshot-121",
-    "@instructure/ui-utils": "11.7.4-snapshot-121",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-121",
-    "@instructure/uid": "11.7.4-snapshot-121"
+    "@instructure/emotion": "11.7.4-snapshot-125",
+    "@instructure/shared-types": "11.7.4-snapshot-125",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-125",
+    "@instructure/ui-form-field": "11.7.4-snapshot-125",
+    "@instructure/ui-icons": "11.7.4-snapshot-125",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-125",
+    "@instructure/ui-themes": "11.7.4-snapshot-125",
+    "@instructure/ui-utils": "11.7.4-snapshot-125",
+    "@instructure/uid": "11.7.4-snapshot-125"
   },
   "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-babel-preset": "11.7.4-snapshot-121",
-    "@instructure/ui-scripts": "11.7.4-snapshot-121"
+    "@instructure/ui-scripts": "11.7.4-snapshot-125",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-125"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/NumberInput/v2/index.tsx

@@ -120,6 +120,10 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
     const success =
       !!messages && messages.some((message) => message.type === 'success')
 
+    const hasMessages = !!messages?.some((m) => !!m.text)
+    const messagesId = id ? `${id}-messages` : undefined
+    const labelId = id ? `${id}-label` : undefined
+
     const interaction = getInteraction({ props })
     if (
       interaction === 'disabled' &&
@@ -320,7 +324,7 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
 
     const label = callRenderProp(renderLabel)
 
-    const passedProps = passthroughProps(rest)
+    const passedProps = passthroughProps(rest) as Record<string, any>
 
     // Don't render until we have an ID
     if (!id) {
@@ -331,6 +335,8 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
       <FormField
         {...pickProps(props, FormField.allowedProps)}
         label={label}
+        messagesId={messagesId}
+        labelId={labelId}
         inline={display === 'inline-block'}
         id={id}
         elementRef={handleRef}
@@ -346,6 +352,20 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
               {...passedProps}
               css={styles?.input}
               aria-invalid={invalid ? 'true' : undefined}
+              // Keep messages in the description so the accessible name contains only the label.
+              aria-describedby={
+                [
+                  passedProps['aria-describedby'],
+                  hasMessages ? messagesId : null
+                ]
+                  .filter(Boolean)
+                  .join(' ') || undefined
+              }
+              aria-labelledby={
+                hasMessages
+                  ? passedProps['aria-labelledby'] || labelId
+                  : passedProps['aria-labelledby']
+              }
               id={id}
               type={allowStringValue ? 'text' : 'number'}
               inputMode={inputMode}