diff --git a/src/index.tsx b/src/index.tsx index 5ea00fd14..6006fa2ad 100644 --- a/src/index.tsx +++ b/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,6 +1586,7 @@ export class DatePicker extends Component { 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; @@ -1591,6 +1594,7 @@ export class DatePicker extends Component { 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; diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 94629138d..fab4db472 100644 --- a/src/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -4350,6 +4350,34 @@ 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( + , + ); + 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( + , + ); + 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( + , + ); + 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( { customInput={} aria-describedby="desc-id" aria-invalid="true" + aria-label="date-label" aria-labelledby="label-id" aria-required="true" />, @@ -4364,6 +4393,7 @@ describe("DatePicker", () => { 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"); });