Fixing error message and description announcement for NumberField

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -45,7 +45,11 @@ interface NumberFieldAria {
   /** Props for the increment button, to be passed to [useButton](useButton.html). */
   incrementButtonProps: AriaButtonProps,
   /** Props for the decrement button, to be passed to [useButton](useButton.html). */
-  decrementButtonProps: AriaButtonProps
+  decrementButtonProps: AriaButtonProps,
+  /** Props for the number field's description element. */
+  descriptionProps: HTMLAttributes<HTMLElement>,
+  /** Props for the number field's error message element. */
+  errorMessageProps: HTMLAttributes<HTMLElement>
 }
 
 /**
@@ -70,7 +74,9 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onFocus,
     onFocusChange,
     onKeyDown,
-    onKeyUp
+    onKeyUp,
+    description,
+    errorMessage
   } = props;
 
   let {
@@ -166,7 +172,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     state.setInputValue(value);
   };
 
-  let {labelProps, inputProps: textFieldProps} = useFormattedTextField({
+  let {labelProps, inputProps: textFieldProps, descriptionProps, errorMessageProps} = useFormattedTextField({
     label,
     autoFocus,
     isDisabled,
@@ -185,7 +191,9 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onFocus,
     onFocusChange,
     onKeyDown,
-    onKeyUp
+    onKeyUp,
+    description,
+    errorMessage
   }, state, inputRef);
 
   let inputProps = mergeProps(
@@ -274,6 +282,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     labelProps,
     inputProps,
     incrementButtonProps,
-    decrementButtonProps
+    decrementButtonProps,
+    errorMessageProps,
+    descriptionProps
   };
 }

packages/@react-aria/searchfield/src/useSearchField.ts

@@ -26,9 +26,9 @@ interface SearchFieldAria {
   inputProps: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
   /** Props for the clear button. */
   clearButtonProps: AriaButtonProps,
-  /** Props for the description element. */
+  /** Props for the searchfield's description element. */
   descriptionProps: HTMLAttributes<HTMLElement>,
-  /** Props for the error message element. */
+  /** Props for the searchfield's error message element. */
   errorMessageProps: HTMLAttributes<HTMLElement>
 }
 

packages/@react-aria/select/src/useSelect.ts

@@ -44,10 +44,10 @@ interface SelectAria {
   /** Props for the popup. */
   menuProps: AriaListBoxOptions<unknown>,
 
-  /** Props for the description element. */
+  /** Props for the select's description element. */
   descriptionProps: HTMLAttributes<HTMLElement>,
 
-  /** Props for the error message element. */
+  /** Props for the select's error message element. */
   errorMessageProps: HTMLAttributes<HTMLElement>
 }
 

packages/@react-spectrum/numberfield/src/NumberField.tsx

@@ -50,7 +50,9 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     labelProps,
     inputProps,
     incrementButtonProps,
-    decrementButtonProps
+    decrementButtonProps,
+    descriptionProps,
+    errorMessageProps
   } = useNumberField(props, state, inputRef);
   let isMobile = provider.scale === 'large';
   let showStepper = !hideStepper;
@@ -77,6 +79,8 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
   return (
     <Field
       {...props as Omit<SpectrumNumberFieldProps, 'onChange'>}
+      descriptionProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
       labelProps={labelProps}
       ref={domRef}
       wrapperClassName={classNames(

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -1614,6 +1614,27 @@ describe('NumberField', function () {
       expect(decrementButton).not.toHaveAttribute('id');
       expect(decrementButton).not.toHaveAttribute('aria-labelledby');
     });
+
+    it('error message', () => {
+      let {textField, root} = renderNumberField({
+        label: 'Width',
+        errorMessage: 'This is a error.',
+        validationState: 'invalid'
+      });
+
+      let errorText = within(root).getByText('This is a error.');
+      expect(textField).toHaveAttribute('aria-describedby', errorText.id);
+    });
+
+    it('description', () => {
+      let {textField, root} = renderNumberField({
+        label: 'Width',
+        description: 'This is a description.'
+      });
+
+      let description = within(root).getByText('This is a description.');
+      expect(textField).toHaveAttribute('aria-describedby', description.id);
+    });
   });
 
   it.each`

packages/@react-types/numberfield/src/index.d.ts

@@ -14,6 +14,7 @@ import {
   AriaLabelingProps,
   DOMProps,
   FocusableProps,
+  HelpTextProps,
   InputBase, LabelableProps,
   RangeInputBase, SpectrumLabelableProps,
   StyleProps,
@@ -22,7 +23,7 @@ import {
   ValueBase
 } from '@react-types/shared';
 
-export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase<number>, RangeInputBase<number>, LabelableProps {
+export interface NumberFieldProps extends InputBase, Validation, FocusableProps, TextInputBase, ValueBase<number>, RangeInputBase<number>, LabelableProps, HelpTextProps {
   /**
    * Formatting options for the value displayed in the number field.
    * This also affects what characters are allowed to be typed by the user.