fix(time-picker): announce invalid/warn state message (#22109)

heloiselui · web-flow · commit d443e90203bc · 2026-04-29T12:24:42.000Z
* fix(time-picker): announce invalid state messages

* test(time-picker): add tests

* fix(time-picker): preserve aria-describedby and added tests
diff --git a/packages/react/src/components/TimePicker/TimePicker-test.js b/packages/react/src/components/TimePicker/TimePicker-test.js
@@ -177,6 +177,15 @@ describe('TimePicker', () => {
       expect(
         container.querySelector('.cds--form-requirement')
       ).toHaveTextContent('Invalid time');
+      const invalidText = screen.getByText('Invalid time');
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        invalidText.id
+      );
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
     });
 
     it('should show warning state when warning is true', () => {
@@ -192,6 +201,12 @@ describe('TimePicker', () => {
       expect(
         container.querySelector('.cds--form-requirement')
       ).toHaveTextContent('Warning message');
+      const warningText = screen.getByText('Warning message');
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        warningText.id
+      );
+      expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
     });
 
     it('should not show invalid state when disabled', () => {
@@ -289,5 +304,51 @@ describe('TimePicker', () => {
         container.querySelector('.cds--time-picker__input-field-error')
       ).not.toBeInTheDocument();
     });
+
+    it('should preserve provided aria-describedby when not invalid or warning', () => {
+      render(<TimePicker id="time-picker" aria-describedby="custom-hint" />);
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        'custom-hint'
+      );
+    });
+
+    it('should merge invalid aria attributes with consumer-provided aria-describedby', () => {
+      render(
+        <TimePicker
+          id="time-picker"
+          invalid
+          invalidText="Invalid time"
+          aria-describedby="custom-hint"
+          aria-invalid={false}
+        />
+      );
+      const invalidText = screen.getByText('Invalid time');
+      expect(screen.getByRole('textbox')).toHaveAttribute(
+        'aria-describedby',
+        `${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
@@ -142,6 +142,7 @@ const frFn = forwardRef<HTMLInputElement, TimePickerProps>;
 
 const TimePicker = frFn((props, ref) => {
   const {
+    ['aria-describedby']: ariaDescribedBy,
     children,
     className,
     inputClassName,
@@ -268,6 +269,17 @@ const TimePicker = frFn((props, ref) => {
   const readOnlyProps = {
     readOnly: readOnly,
   };
+  const describedBy =
+    [
+      normalizedProps.invalid
+        ? normalizedProps.invalidId
+        : normalizedProps.warn
+          ? normalizedProps.warnId
+          : null,
+      ariaDescribedBy,
+    ]
+      .filter(Boolean)
+      .join(' ') || undefined;
 
   return (
     <div className={cx(`${prefix}--form-item`, className)}>
@@ -290,6 +302,8 @@ const TimePicker = frFn((props, ref) => {
             value={value}
             {...rest}
             {...readOnlyProps}
+            aria-describedby={describedBy}
+            aria-invalid={normalizedProps.invalid ? true : undefined}
           />
           {(normalizedProps.invalid || normalizedProps.warn) &&
             normalizedProps.icon && (
