Support standard HTML aria attribute names

Add support for standard HTML aria attribute names (aria-describedby,
aria-invalid, aria-labelledby, aria-required) in addition to the
existing camelCase prop names (ariaDescribedBy, ariaInvalid,
ariaLabelledBy, ariaRequired).

The implementation only includes aria props in the cloneElement call
when they have actual values. This prevents overwriting aria attributes
that may already be defined on a custom input component when the
DatePicker doesn't explicitly set them.

Standard HTML attribute names take precedence when both are provided.

Fixes #5580

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: martijnrusschen

src/index.tsx

@@ -194,6 +194,10 @@ export type DatePickerProps = OmitUnion<
     ariaInvalid?: string;
     ariaLabelledBy?: string;
     ariaRequired?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: string;
+    "aria-labelledby"?: string;
+    "aria-required"?: string;
     rangeSeparator?: string;
     onChangeRaw?: (
       event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
@@ -1574,6 +1578,22 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
     const customInput = this.props.customInput || <input type="text" />;
     const customInputRef = this.props.customInputRef || "ref";
 
+    // Build aria props object, only including defined values to avoid
+    // overwriting aria attributes that may be set on the custom input
+    const ariaProps: Record<string, string> = {};
+    const ariaDescribedBy =
+      this.props["aria-describedby"] ?? this.props.ariaDescribedBy;
+    const ariaInvalid = this.props["aria-invalid"] ?? this.props.ariaInvalid;
+    const ariaLabelledBy =
+      this.props["aria-labelledby"] ?? this.props.ariaLabelledBy;
+    const ariaRequired = this.props["aria-required"] ?? this.props.ariaRequired;
+
+    if (ariaDescribedBy != null)
+      ariaProps["aria-describedby"] = ariaDescribedBy;
+    if (ariaInvalid != null) ariaProps["aria-invalid"] = ariaInvalid;
+    if (ariaLabelledBy != null) ariaProps["aria-labelledby"] = ariaLabelledBy;
+    if (ariaRequired != null) ariaProps["aria-required"] = ariaRequired;
+
     return cloneElement(customInput, {
       [customInputRef]: (input: HTMLElement | null) => {
         this.input = input;
@@ -1596,10 +1616,7 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
       readOnly: this.props.readOnly,
       required: this.props.required,
       tabIndex: this.props.tabIndex,
-      "aria-describedby": this.props.ariaDescribedBy,
-      "aria-invalid": this.props.ariaInvalid,
-      "aria-labelledby": this.props.ariaLabelledBy,
-      "aria-required": this.props.ariaRequired,
+      ...ariaProps,
     });
   };
 

src/test/datepicker_test.test.tsx

@@ -4273,6 +4273,129 @@ describe("DatePicker", () => {
     });
   });
 
+  describe("aria attributes on input", () => {
+    it("should pass aria-describedby to the input using standard HTML attribute name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} aria-describedby="description-id" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-describedby")).toBe("description-id");
+    });
+
+    it("should pass aria-describedby to the input using camelCase prop name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} ariaDescribedBy="description-id" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-describedby")).toBe("description-id");
+    });
+
+    it("should prefer standard HTML attribute name over camelCase for aria-describedby", () => {
+      const { container } = render(
+        <DatePicker
+          selected={newDate()}
+          aria-describedby="standard-id"
+          ariaDescribedBy="camelcase-id"
+        />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-describedby")).toBe("standard-id");
+    });
+
+    it("should pass aria-invalid to the input using standard HTML attribute name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} aria-invalid="true" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+    });
+
+    it("should pass aria-invalid to the input using camelCase prop name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} ariaInvalid="true" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+    });
+
+    it("should pass aria-labelledby to the input using standard HTML attribute name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} aria-labelledby="label-id" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-labelledby")).toBe("label-id");
+    });
+
+    it("should pass aria-labelledby to the input using camelCase prop name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} ariaLabelledBy="label-id" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-labelledby")).toBe("label-id");
+    });
+
+    it("should pass aria-required to the input using standard HTML attribute name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} aria-required="true" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-required")).toBe("true");
+    });
+
+    it("should pass aria-required to the input using camelCase prop name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} ariaRequired="true" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-required")).toBe("true");
+    });
+
+    it("should pass aria attributes to custom input using standard HTML attribute names", () => {
+      const { container } = render(
+        <DatePicker
+          selected={newDate()}
+          customInput={<CustomInput />}
+          aria-describedby="desc-id"
+          aria-invalid="true"
+          aria-labelledby="label-id"
+          aria-required="true"
+        />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-describedby")).toBe("desc-id");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(input.getAttribute("aria-labelledby")).toBe("label-id");
+      expect(input.getAttribute("aria-required")).toBe("true");
+    });
+
+    it("should preserve custom input's own aria attributes when DatePicker does not specify them", () => {
+      // Custom input with its own aria attributes
+      const CustomInputWithAria = React.forwardRef<
+        HTMLInputElement,
+        React.InputHTMLAttributes<HTMLInputElement>
+      >((props, ref) => (
+        <input
+          ref={ref}
+          {...props}
+          aria-describedby="custom-desc"
+          aria-invalid="false"
+        />
+      ));
+      CustomInputWithAria.displayName = "CustomInputWithAria";
+
+      const { container } = render(
+        <DatePicker
+          selected={newDate()}
+          customInput={<CustomInputWithAria />}
+        />,
+      );
+      const input = safeQuerySelector(container, "input");
+      // Should preserve the custom input's aria attributes since DatePicker didn't specify any
+      expect(input.getAttribute("aria-describedby")).toBe("custom-desc");
+      expect(input.getAttribute("aria-invalid")).toBe("false");
+    });
+  });
+
   it("should not customize the className attribute if showIcon is set to false", () => {
     const { container } = render(
       <DatePicker selected={newDate("2021-04-15")} />,