Feature/aria props

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<string | null>(null);
   const [month, setMonth] = useState<string | null>(null);
@@ -658,6 +664,9 @@ export default function DateInput({
         required={required}
         value={value}
         valueType={valueType}
+        ariaDescribedBy={ariaDescribedBy}
+        ariaLabelledBy={ariaLabelledBy}
+        ariaRequired={ariaRequired}
       />
     );
   }

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}
     />
   );
 }

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 = {

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}
             />
             <div ref={portalContainer} />
             <br />