add help text support to SearchAutocomplete (#4327)

Co-authored-by: Robert Snow <[email protected]>

Author: reidbarber

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -28,7 +28,11 @@ export interface SearchAutocompleteAria<T> {
   /** Props for the list box, to be passed to [useListBox](useListBox.html). */
   listBoxProps: AriaListBoxOptions<T>,
   /** Props for the search input's clear button. */
-  clearButtonProps: AriaButtonProps
+  clearButtonProps: AriaButtonProps,
+  /** Props for the search autocomplete description element, if any. */
+  descriptionProps: DOMAttributes,
+  /** Props for the search autocomplete error message element, if any. */
+  errorMessageProps: DOMAttributes
 }
 
 export interface AriaSearchAutocompleteOptions<T> extends AriaSearchAutocompleteProps<T> {
@@ -58,7 +62,7 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     onClear
   } = props;
 
-  let {inputProps, clearButtonProps} = useSearchField({
+  let {inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
     ...props,
     value: state.inputValue,
     onChange: state.setInputValue,
@@ -98,6 +102,8 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     labelProps,
     inputProps: mergeProps(inputProps, comboBoxInputProps),
     listBoxProps,
-    clearButtonProps
+    clearButtonProps,
+    descriptionProps,
+    errorMessageProps
   };
 }

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

@@ -96,7 +96,7 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
   );
   let layout = useListBoxLayout(state);
 
-  let {inputProps, listBoxProps, labelProps, clearButtonProps} = useSearchAutocomplete(
+  let {inputProps, listBoxProps, labelProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchAutocomplete(
     {
       ...props,
       keyboardDelegate: layout,
@@ -133,7 +133,12 @@ function _SearchAutocompleteBase<T extends object>(props: SpectrumSearchAutocomp
 
   return (
     <>
-      <Field {...props} labelProps={labelProps} ref={domRef}>
+      <Field
+        {...props}
+        descriptionProps={descriptionProps}
+        errorMessageProps={errorMessageProps}
+        labelProps={labelProps}
+        ref={domRef}>
         <SearchAutocompleteInput
           {...props}
           isOpen={state.isOpen}