fix(DatePicker): link invalid/warn text via aria-describedby (#22070)

heloiselui · web-flow · commit ffd8d30f4c6a · 2026-04-22T14:17:29.000Z
* fix(DatePicker): link invalid/warn text via aria-describedby

* test(DatePicker): add a11y test for helper/invalid/warn messaging
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -180,6 +180,56 @@ describe('DatePicker', () => {
     spy.mockRestore();
   });
 
+  describe('accessibility', () => {
+    it('associates helper text with the input using aria-describedby', () => {
+      render(
+        <DatePickerInput
+          id="date-picker-input-helper"
+          labelText="Date Picker label"
+          helperText="Helpful text"
+        />
+      );
+
+      const input = screen.getByLabelText('Date Picker label');
+      const helperText = screen.getByText('Helpful text');
+
+      expect(input).toHaveAttribute('aria-describedby', helperText.id);
+    });
+
+    it('associates invalid text with the input and marks input as invalid', () => {
+      render(
+        <DatePickerInput
+          id="date-picker-input-invalid"
+          labelText="Date Picker label"
+          invalid
+          invalidText="Invalid date"
+        />
+      );
+
+      const input = screen.getByLabelText('Date Picker label');
+      const invalidText = screen.getByText('Invalid date');
+
+      expect(input).toHaveAttribute('aria-describedby', invalidText.id);
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('associates warning text with the input using aria-describedby', () => {
+      render(
+        <DatePickerInput
+          id="date-picker-input-warn"
+          labelText="Date Picker label"
+          warn
+          warnText="Warning message"
+        />
+      );
+
+      const input = screen.getByLabelText('Date Picker label');
+      const warnText = screen.getByText('Warning message');
+
+      expect(input).toHaveAttribute('aria-describedby', warnText.id);
+    });
+  });
+
   it('should respect parseDate prop', async () => {
     const parseDate = jest.fn();
     parseDate.mockReturnValueOnce(new Date('1989/01/20'));
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -243,17 +243,27 @@ const DatePickerInput = frFn((props, ref) => {
     ? undefined
     : `datepicker-input-helper-text-${datePickerInputInstanceId}`;
 
+  let ariaDescribedBy: string | undefined;
+  if (normalizedProps.invalid) {
+    ariaDescribedBy = normalizedProps.invalidId;
+  } else if (normalizedProps.warn) {
+    ariaDescribedBy = normalizedProps.warnId;
+  } else {
+    ariaDescribedBy = helperText ? datePickerInputHelperId : undefined;
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
   const inputProps: any = {
     ...rest,
     ...datePickerInputProps,
     className: inputClasses,
     disabled: normalizedProps.disabled,
     ref,
-    ['aria-describedby']: helperText ? datePickerInputHelperId : undefined,
+    ['aria-describedby']: ariaDescribedBy,
   };
   if (normalizedProps.invalid) {
     inputProps['data-invalid'] = true;
+    inputProps['aria-invalid'] = true;
   }
   const input = <input {...inputProps} />;
 
