Merge pull request #6057 from Hacker0x01/feature/aria-label-support

feat: add aria-label prop support for DatePicker

Author: martijnrusschen

src/index.tsx

@@ -192,10 +192,12 @@ export type DatePickerProps = OmitUnion<
     tabIndex?: number;
     ariaDescribedBy?: string;
     ariaInvalid?: string;
+    ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaRequired?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: string;
+    "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-required"?: string;
     rangeSeparator?: string;
@@ -1584,13 +1586,15 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
     const ariaDescribedBy =
       this.props["aria-describedby"] ?? this.props.ariaDescribedBy;
     const ariaInvalid = this.props["aria-invalid"] ?? this.props.ariaInvalid;
+    const ariaLabel = this.props["aria-label"] ?? this.props.ariaLabel;
     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 (ariaLabel != null) ariaProps["aria-label"] = ariaLabel;
     if (ariaLabelledBy != null) ariaProps["aria-labelledby"] = ariaLabelledBy;
     if (ariaRequired != null) ariaProps["aria-required"] = ariaRequired;
 

src/test/datepicker_test.test.tsx

@@ -4350,20 +4350,50 @@ describe("DatePicker", () => {
       expect(input.getAttribute("aria-required")).toBe("true");
     });
 
+    it("should pass aria-label to the input using standard HTML attribute name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} aria-label="Select a date" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-label")).toBe("Select a date");
+    });
+
+    it("should pass aria-label to the input using camelCase prop name", () => {
+      const { container } = render(
+        <DatePicker selected={newDate()} ariaLabel="Select a date" />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-label")).toBe("Select a date");
+    });
+
+    it("should prefer standard HTML attribute name over camelCase for aria-label", () => {
+      const { container } = render(
+        <DatePicker
+          selected={newDate()}
+          aria-label="standard-label"
+          ariaLabel="camelcase-label"
+        />,
+      );
+      const input = safeQuerySelector(container, "input");
+      expect(input.getAttribute("aria-label")).toBe("standard-label");
+    });
+
     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-label="date-label"
           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-label")).toBe("date-label");
       expect(input.getAttribute("aria-labelledby")).toBe("label-id");
       expect(input.getAttribute("aria-required")).toBe("true");
     });