@instructure/ui-number-input 11.7.9-snapshot-5 → 11.7.10

package/CHANGELOG.md

@@ -3,12 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.9-snapshot-5](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-5) (2026-10-13)
+## [11.7.10](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.10) (2026-10-14)
 
-**Note:** Version bump only for package @instructure/ui-number-input
+### Bug Fixes
+
+* **many:** Stop wrapping form field controls in their label ([#2740](https://github.com/instructure/instructure-ui/issues/2740)) ([467269e](https://github.com/instructure/instructure-ui/commit/467269ea6d66c88ef9deb8bd14980730bbd645e8))
 
 
+## [11.7.9](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9) (2026-10-13)
+
+### Bug Fixes
 
+* **many:** Stop wrapping form field controls in their label ([#2740](https://github.com/instructure/instructure-ui/issues/2740)) ([467269e](https://github.com/instructure/instructure-ui/commit/467269ea6d66c88ef9deb8bd14980730bbd645e8))
 
 
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)

package/es/NumberInput/v2/index.js

@@ -78,9 +78,6 @@ 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
   });
@@ -228,8 +225,6 @@ 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,
@@ -238,7 +233,9 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     disabled: interaction === 'disabled',
     readOnly: interaction === 'readonly',
     "data-cid": "NumberInput",
-    children: _jsx("span", {
+    children: ({
+      describedBy
+    }) => _jsx("span", {
       css: styles?.inputWidth,
       style: width ? {
         width
@@ -248,11 +245,8 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
         children: [_jsx("input", {
           ...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'],
+          "aria-invalid": invalid ? 'true' : undefined,
+          "aria-describedby": [passedProps['aria-describedby'], describedBy].filter(Boolean).join(' ') || undefined,
           id: id,
           type: allowStringValue ? 'text' : 'number',
           inputMode: inputMode,

package/lib/NumberInput/v2/index.js

@@ -85,9 +85,6 @@ 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, _uiReactUtils.getInteraction)({
     props
   });
@@ -235,8 +232,6 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
   return (0, _jsxRuntime.jsx)(_latest.FormField, {
     ...(0, _uiReactUtils.pickProps)(props, _latest.FormField.allowedProps),
     label: label,
-    messagesId: messagesId,
-    labelId: labelId,
     inline: display === 'inline-block',
     id: id,
     elementRef: handleRef,
@@ -245,7 +240,9 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
     disabled: interaction === 'disabled',
     readOnly: interaction === 'readonly',
     "data-cid": "NumberInput",
-    children: (0, _jsxRuntime.jsx)("span", {
+    children: ({
+      describedBy
+    }) => (0, _jsxRuntime.jsx)("span", {
       css: styles?.inputWidth,
       style: width ? {
         width
@@ -255,11 +252,8 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
         children: [(0, _jsxRuntime.jsx)("input", {
           ...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'],
+          "aria-invalid": invalid ? 'true' : undefined,
+          "aria-describedby": [passedProps['aria-describedby'], describedBy].filter(Boolean).join(' ') || undefined,
           id: id,
           type: allowStringValue ? 'text' : 'number',
           inputMode: inputMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "11.7.9-snapshot-5",
+  "version": "11.7.10",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.9-snapshot-5",
-    "@instructure/shared-types": "11.7.9-snapshot-5",
-    "@instructure/ui-a11y-utils": "11.7.9-snapshot-5",
-    "@instructure/ui-form-field": "11.7.9-snapshot-5",
-    "@instructure/ui-icons": "11.7.9-snapshot-5",
-    "@instructure/ui-react-utils": "11.7.9-snapshot-5",
-    "@instructure/ui-themes": "11.7.9-snapshot-5",
-    "@instructure/ui-utils": "11.7.9-snapshot-5",
-    "@instructure/uid": "11.7.9-snapshot-5",
+    "@instructure/emotion": "11.7.10",
+    "@instructure/shared-types": "11.7.10",
+    "@instructure/ui-a11y-utils": "11.7.10",
+    "@instructure/ui-form-field": "11.7.10",
+    "@instructure/ui-icons": "11.7.10",
+    "@instructure/ui-react-utils": "11.7.10",
+    "@instructure/ui-themes": "11.7.10",
+    "@instructure/ui-utils": "11.7.10",
+    "@instructure/uid": "11.7.10",
     "keycode": "^2"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "11.7.9-snapshot-5",
-    "@instructure/ui-scripts": "11.7.9-snapshot-5",
+    "@instructure/ui-babel-preset": "11.7.10",
+    "@instructure/ui-scripts": "11.7.10",
     "vitest": "^5.0.0"
   },
   "peerDependencies": {

package/src/NumberInput/v2/index.tsx

@@ -115,10 +115,6 @@ 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' &&
@@ -330,8 +326,6 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
       <FormField
         {...pickProps(props, FormField.allowedProps)}
         label={label}
-        messagesId={messagesId}
-        labelId={labelId}
         inline={display === 'inline-block'}
         id={id}
         elementRef={handleRef}
@@ -341,45 +335,40 @@ const NumberInput = forwardRef<NumberInputHandle, NumberInputProps>(
         readOnly={interaction === 'readonly'}
         data-cid="NumberInput"
       >
-        <span css={styles?.inputWidth} style={width ? { width } : undefined}>
-          <span css={styles?.inputContainer}>
-            <input
-              {...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}
-              placeholder={interaction === 'enabled' ? placeholder : undefined}
-              ref={handleInputRef}
-              required={isRequired}
-              value={value}
-              disabled={interaction === 'disabled'}
-              readOnly={interaction === 'readonly'}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-            />
-            {showArrows && interaction !== 'readonly'
-              ? renderArrows(renderIcons)
-              : null}
+        {({ describedBy }) => (
+          <span css={styles?.inputWidth} style={width ? { width } : undefined}>
+            <span css={styles?.inputContainer}>
+              <input
+                {...passedProps}
+                css={styles?.input}
+                aria-invalid={invalid ? 'true' : undefined}
+                aria-describedby={
+                  [passedProps['aria-describedby'], describedBy]
+                    .filter(Boolean)
+                    .join(' ') || undefined
+                }
+                id={id}
+                type={allowStringValue ? 'text' : 'number'}
+                inputMode={inputMode}
+                placeholder={
+                  interaction === 'enabled' ? placeholder : undefined
+                }
+                ref={handleInputRef}
+                required={isRequired}
+                value={value}
+                disabled={interaction === 'disabled'}
+                readOnly={interaction === 'readonly'}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+              />
+              {showArrows && interaction !== 'readonly'
+                ? renderArrows(renderIcons)
+                : null}
+            </span>
           </span>
-        </span>
+        )}
       </FormField>
     )
   }