diff --git a/packages/react-date-picker/src/DateInput.tsx b/packages/react-date-picker/src/DateInput.tsx index f0591348..eb32e784 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..2d4e50bf 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..fd9b3d4d 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} />