fix(time-picker): preserve aria-describedby and added tests

heloiselui · heloiselui · commit 7230d881d87b · 2026-04-29T11:34:09.000+01:00
diff --git a/packages/react/src/components/TimePicker/TimePicker-test.js b/packages/react/src/components/TimePicker/TimePicker-test.js
@@ -313,7 +313,7 @@ describe('TimePicker', () => {
       );
     });
 
-    it('should apply invalid aria attributes over conflicting consumer props', () => {
+    it('should merge invalid aria attributes with consumer-provided aria-describedby', () => {
       render(
         <TimePicker
           id="time-picker"
@@ -326,12 +326,29 @@ describe('TimePicker', () => {
       const invalidText = screen.getByText('Invalid time');
       expect(screen.getByRole('textbox')).toHaveAttribute(
         'aria-describedby',
-        invalidText.id
+        `${invalidText.id} custom-hint`
       );
       expect(screen.getByRole('textbox')).toHaveAttribute(
         'aria-invalid',
         'true'
       );
     });
+
+    it('should merge warning aria attributes with consumer-provided aria-describedby', () => {
+      render(
+        <TimePicker
+          id="time-picker"
+          warning
+          warningText="Warning message"
+          aria-describedby="custom-hint"
+        />
+      );
+      const warningText = screen.getByText('Warning message');
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        `${warningText.id} custom-hint`
+      );
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+    });
   });
 });
diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx
@@ -269,11 +269,17 @@ const TimePicker = frFn((props, ref) => {
   const readOnlyProps = {
     readOnly: readOnly,
   };
-  const describedBy = normalizedProps.invalid
-    ? normalizedProps.invalidId
-    : normalizedProps.warn
-      ? normalizedProps.warnId
-      : ariaDescribedBy;
+  const describedBy =
+    [
+      normalizedProps.invalid
+        ? normalizedProps.invalidId
+        : normalizedProps.warn
+          ? normalizedProps.warnId
+          : null,
+      ariaDescribedBy,
+    ]
+      .filter(Boolean)
+      .join(' ') || undefined;
 
   return (
     <div className={cx(`${prefix}--form-item`, className)}>
