[EuiAbsoluteTab][EuiRelativeTab] Link text input with label

acstll · acstll · commit dda2d4b3a618 · 2025-11-25T18:08:45.000+01:00
diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
@@ -90,6 +90,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
     [dateFormat]
   );
 
+  const textInputLabelId = useGeneratedHtmlId();
   const timeZomeDescriptionId = useGeneratedHtmlId();
   const submitButtonLabel = useEuiI18n(
     'euiAbsoluteTab.dateFormatButtonLabel',
@@ -205,6 +206,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           describedByIds={[timeZomeDescriptionId]}
         >
           <EuiFieldText
+            aria-labelledby={textInputLabelId}
             compressed
             isInvalid={isTextInvalid}
             value={textInputValue}
@@ -218,7 +220,9 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
               setIsReadyToParse(true);
             }}
             data-test-subj="superDatePickerAbsoluteDateInput"
-            prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
+            prepend={
+              <EuiFormLabel id={textInputLabelId}>{labelPrefix}</EuiFormLabel>
+            }
           />
         </EuiFormRow>
         {hasUnparsedText && (
diff --git a/packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx b/packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx
@@ -120,6 +120,7 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
     return parsedValue.locale(locale || 'en').format(dateFormat);
   }, [isInvalid, value, roundUp, locale, dateFormat]);
 
+  const textInputLabelId = useGeneratedHtmlId();
   const relativeDateInputNumberDescriptionId = useGeneratedHtmlId();
   const timeZomeDescriptionId = useGeneratedHtmlId();
   const numberAriaLabel = useEuiI18n(
@@ -178,11 +179,14 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
         </EuiFlexGroup>
         <EuiSpacer size="s" />
         <EuiFieldText
+          aria-labelledby={textInputLabelId}
           compressed
           value={formattedValue}
           readOnly
           aria-describedby={timeZomeDescriptionId}
-          prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
+          prepend={
+            <EuiFormLabel id={textInputLabelId}>{labelPrefix}</EuiFormLabel>
+          }
         />
         <EuiScreenReaderOnly>
           <p id={relativeDateInputNumberDescriptionId}>
