From 5ab44694480aef34977fd9a112f816125919e838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dovydas=20=C5=BDilinskas?= Date: Tue, 26 Aug 2025 07:52:47 +0300 Subject: [PATCH 1/2] feat: add ariaLabelledBy, ariaDescribedBy, ariaRequired props --- packages/react-date-picker/src/DateInput.tsx | 9 +++++++++ .../src/DateInput/NativeInput.tsx | 9 +++++++++ packages/react-date-picker/src/DatePicker.tsx | 18 ++++++++++++++++++ test/Test.tsx | 3 +++ 4 files changed, 39 insertions(+) diff --git a/packages/react-date-picker/src/DateInput.tsx b/packages/react-date-picker/src/DateInput.tsx index f0591348..77ec6f76 100644 --- a/packages/react-date-picker/src/DateInput.tsx +++ b/packages/react-date-picker/src/DateInput.tsx @@ -198,6 +198,9 @@ type DateInputProps = { value?: LooseValuePiece; yearAriaLabel?: string; yearPlaceholder?: string; + ariaDescribedBy?: string, + ariaLabelledBy?: string, + ariaRequired?: boolean, }; export default function DateInput({ @@ -224,6 +227,9 @@ export default function DateInput({ value: valueProps, yearAriaLabel, yearPlaceholder, + ariaDescribedBy, + ariaLabelledBy, + ariaRequired, }: DateInputProps): React.ReactElement { const [year, setYear] = useState(null); const [month, setMonth] = useState(null); @@ -658,6 +664,9 @@ export default function DateInput({ required={required} value={value} valueType={valueType} + ariaDescribedBy={ariaDescribedBy} + ariaLabelledBy={ariaLabelledBy} + ariaRequired={ariaRequired} /> ); } diff --git a/packages/react-date-picker/src/DateInput/NativeInput.tsx b/packages/react-date-picker/src/DateInput/NativeInput.tsx index e340db19..951c0b6d 100644 --- a/packages/react-date-picker/src/DateInput/NativeInput.tsx +++ b/packages/react-date-picker/src/DateInput/NativeInput.tsx @@ -10,6 +10,9 @@ type NativeInputProps = { required?: boolean; value?: Date | null; valueType: 'century' | 'decade' | 'year' | 'month' | 'day'; + ariaDescribedBy?: string, + ariaLabelledBy?: string, + ariaRequired?: boolean | 'true' | 'false', }; export default function NativeInput({ @@ -22,6 +25,9 @@ export default function NativeInput({ required, value, valueType, + ariaDescribedBy, + ariaLabelledBy, + ariaRequired, }: NativeInputProps): React.ReactElement { const nativeInputType = (() => { switch (valueType) { @@ -73,6 +79,9 @@ export default function NativeInput({ }} type={nativeInputType} value={value ? nativeValueParser(value) : ''} + aria-describedby={ariaDescribedBy} + aria-labelledby={ariaLabelledBy} + aria-required={ariaRequired} /> ); } diff --git a/packages/react-date-picker/src/DatePicker.tsx b/packages/react-date-picker/src/DatePicker.tsx index 8babee64..5c7e755c 100644 --- a/packages/react-date-picker/src/DatePicker.tsx +++ b/packages/react-date-picker/src/DatePicker.tsx @@ -140,6 +140,18 @@ export type DatePickerProps = { * @example 'dd' */ dayPlaceholder?: string; + /** + * Identifies the element that labels this input. + */ + ariaLabelledBy?: string; + /** + * Identifies the element(s) that describe this input. + */ + ariaDescribedBy?: string; + /** + * Indicates that the input is required. + */ + ariaRequired?: boolean; /** * When set to `true`, will remove the calendar and the button toggling its visibility. * @@ -365,6 +377,9 @@ export default function DatePicker(props: DatePickerProps): React.ReactElement { value, yearAriaLabel, yearPlaceholder, + ariaDescribedBy, + ariaLabelledBy, + ariaRequired, ...otherProps } = props; @@ -517,6 +532,9 @@ export default function DatePicker(props: DatePickerProps): React.ReactElement { monthAriaLabel, nativeInputAriaLabel, yearAriaLabel, + ariaDescribedBy, + ariaLabelledBy, + ariaRequired, }; const placeholderProps = { diff --git a/test/Test.tsx b/test/Test.tsx index 7ca4e592..47464068 100644 --- a/test/Test.tsx +++ b/test/Test.tsx @@ -126,6 +126,9 @@ export default function Test() { returnValue={returnValue} showLeadingZeros={showLeadingZeros} value={value} + ariaDescribedBy='my-describedby-id' + ariaLabelledBy='my-labelledby-id' + ariaRequired={required} />

From 8d35a7eaebe9e8e44b4c91da7b9f43ab05f3ad75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dovydas=20=C5=BDilinskas?= Date: Tue, 26 Aug 2025 07:53:17 +0300 Subject: [PATCH 2/2] feat: add ariaLabelledBy, ariaDescribedBy, ariaRequired props --- packages/react-date-picker/src/DateInput.tsx | 6 +++--- packages/react-date-picker/src/DateInput/NativeInput.tsx | 6 +++--- test/Test.tsx | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-date-picker/src/DateInput.tsx b/packages/react-date-picker/src/DateInput.tsx index 77ec6f76..eb32e784 100644 --- a/packages/react-date-picker/src/DateInput.tsx +++ b/packages/react-date-picker/src/DateInput.tsx @@ -198,9 +198,9 @@ type DateInputProps = { value?: LooseValuePiece; yearAriaLabel?: string; yearPlaceholder?: string; - ariaDescribedBy?: string, - ariaLabelledBy?: string, - ariaRequired?: boolean, + ariaDescribedBy?: string; + ariaLabelledBy?: string; + ariaRequired?: boolean; }; export default function DateInput({ diff --git a/packages/react-date-picker/src/DateInput/NativeInput.tsx b/packages/react-date-picker/src/DateInput/NativeInput.tsx index 951c0b6d..2d4e50bf 100644 --- a/packages/react-date-picker/src/DateInput/NativeInput.tsx +++ b/packages/react-date-picker/src/DateInput/NativeInput.tsx @@ -10,9 +10,9 @@ type NativeInputProps = { required?: boolean; value?: Date | null; valueType: 'century' | 'decade' | 'year' | 'month' | 'day'; - ariaDescribedBy?: string, - ariaLabelledBy?: string, - ariaRequired?: boolean | 'true' | 'false', + ariaDescribedBy?: string; + ariaLabelledBy?: string; + ariaRequired?: boolean | 'true' | 'false'; }; export default function NativeInput({ diff --git a/test/Test.tsx b/test/Test.tsx index 47464068..fd9b3d4d 100644 --- a/test/Test.tsx +++ b/test/Test.tsx @@ -126,8 +126,8 @@ export default function Test() { returnValue={returnValue} showLeadingZeros={showLeadingZeros} value={value} - ariaDescribedBy='my-describedby-id' - ariaLabelledBy='my-labelledby-id' + ariaDescribedBy="my-describedby-id" + ariaLabelledBy="my-labelledby-id" ariaRequired={required} />