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 standard HTML attribute names take precedence when both are
provided. This allows developers to use the familiar HTML attribute
syntax when passing aria attributes to the DatePicker component,
including when using custom inputs.

Fixes #5580

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

Co-Authored-By: Claude <noreply@anthropic.com>

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>,
@@ -1596,10 +1600,12 @@ 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,
+      "aria-describedby":
+        this.props["aria-describedby"] ?? this.props.ariaDescribedBy,
+      "aria-invalid": this.props["aria-invalid"] ?? this.props.ariaInvalid,
+      "aria-labelledby":
+        this.props["aria-labelledby"] ?? this.props.ariaLabelledBy,
+      "aria-required": this.props["aria-required"] ?? this.props.ariaRequired,
     });
   };
 

src/test/datepicker_test.test.tsx

@@ -4273,6 +4273,102 @@ 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 not customize the className attribute if showIcon is set to false", () => {
     const { container } = render(
       <DatePicker selected={newDate("2021-04-15")} />,