fix(#4317): LabeledValue: ContextualHelp button should be labeled by …

…the label (#4319)
adobe · May 26, 2023 · 5c64bcb · 5c64bcb
1 parent 05f36e6
commit 5c64bcb
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
@@ -39,7 +39,7 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
     showErrorIcon,
     contextualHelp,
     children,
-    labelProps,
+    labelProps = {},
     // Not every component that uses <Field> supports help text.
     descriptionProps = {},
     errorMessageProps = {},
@@ -52,6 +52,11 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
   let hasHelpText = !!description || errorMessage && validationState === 'invalid';
   let contextualHelpId = useId();
 
+  let fallbackLabelPropsId = useId();
+  if (label && contextualHelp && !labelProps.id) {
+    labelProps.id = fallbackLabelPropsId;
+  }
+
   let labelWrapperClass = classNames(
       labelStyles,
       'spectrum-Field',