Add renderAriaLabelAsTitle prop

packages/react-date-picker/src/DateInput.tsx

@@ -192,6 +192,7 @@ type DateInputProps = {
   nativeInputAriaLabel?: string;
   onChange?: (value: Value, shouldCloseCalendar: boolean) => void;
   onInvalidChange?: () => void;
+  renderAriaLabelAsTitle?: boolean;
   required?: boolean;
   returnValue?: 'start' | 'end' | 'range';
   showLeadingZeros?: boolean;
@@ -218,6 +219,7 @@ export default function DateInput({
   nativeInputAriaLabel,
   onChange: onChangeProps,
   onInvalidChange,
+  renderAriaLabelAsTitle,
   required,
   returnValue = 'start',
   showLeadingZeros,
@@ -586,6 +588,7 @@ export default function DateInput({
     onChange,
     onKeyDown,
     onKeyUp,
+    renderAriaLabelAsTitle,
     // This is only for showing validity when editing
     required: Boolean(required || isCalendarOpen),
   };

packages/react-date-picker/src/DateInput/Input.tsx

@@ -16,6 +16,7 @@ type InputProps = {
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => void;
   onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => void;
   placeholder?: string;
+  renderAriaLabelAsTitle?: boolean;
   required?: boolean;
   showLeadingZeros?: boolean;
   step?: number;
@@ -142,6 +143,7 @@ export default function Input({
   onKeyDown,
   onKeyUp,
   placeholder = '--',
+  renderAriaLabelAsTitle,
   required,
   showLeadingZeros,
   step,
@@ -199,6 +201,7 @@ export default function Input({
         ref={inputRef as React.RefObject<HTMLInputElement>}
         required={required}
         step={step}
+        title={renderAriaLabelAsTitle ? ariaLabel : undefined}
         type="number"
         value={value !== null ? value : ''}
       />

packages/react-date-picker/src/DateInput/MonthSelect.tsx

@@ -18,6 +18,7 @@ type MonthSelectProps = {
     event: React.KeyboardEvent<HTMLSelectElement> & { target: HTMLSelectElement },
   ) => void;
   placeholder?: string;
+  renderAriaLabelAsTitle?: boolean;
   required?: boolean;
   short?: boolean;
   value?: string | null;
@@ -36,6 +37,7 @@ export default function MonthSelect({
   onChange,
   onKeyDown,
   placeholder = '--',
+  renderAriaLabelAsTitle,
   required,
   short,
   value,
@@ -66,6 +68,7 @@ export default function MonthSelect({
       // Assertion is needed for React 18 compatibility
       ref={inputRef as React.RefObject<HTMLSelectElement>}
       required={required}
+      title={renderAriaLabelAsTitle ? ariaLabel : undefined}
       value={value !== null ? value : ''}
     >
       {!value && <option value="">{placeholder}</option>}

packages/react-date-picker/src/DatePicker.spec.tsx

@@ -98,6 +98,26 @@ describe('DatePicker', () => {
     expect(yearInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
   });
 
+  it('can render input aria-label props as title attributes', async () => {
+    const ariaLabelProps = {
+      dayAriaLabel: 'Day',
+      monthAriaLabel: 'Month',
+      yearAriaLabel: 'Year',
+    };
+
+    const { container } = await render(
+      <DatePicker {...ariaLabelProps} renderAriaLabelAsTitle value={new Date(2019, 0, 1)} />,
+    );
+
+    const dayInput = container.querySelector('input[name="day"]');
+    const monthInput = container.querySelector('input[name="month"]');
+    const yearInput = container.querySelector('input[name="year"]');
+
+    expect(dayInput).toHaveAttribute('title', ariaLabelProps.dayAriaLabel);
+    expect(monthInput).toHaveAttribute('title', ariaLabelProps.monthAriaLabel);
+    expect(yearInput).toHaveAttribute('title', ariaLabelProps.yearAriaLabel);
+  });
+
   it('passes placeholder props to DateInput', async () => {
     const placeholderProps = {
       dayPlaceholder: 'dd',

packages/react-date-picker/src/DatePicker.tsx

@@ -270,6 +270,13 @@ export type DatePickerProps = {
    * @example document.getElementById('my-div')
    */
   portalContainer?: HTMLElement | null;
+  /**
+   * Whether to render input `aria-label` values as `title` attributes as well.
+   *
+   * @default false
+   * @example true
+   */
+  renderAriaLabelAsTitle?: boolean;
   /**
    * Whether date input should be required.
    *
@@ -357,6 +364,7 @@ export default function DatePicker(props: DatePickerProps): React.ReactElement {
     onFocus: onFocusProps,
     onInvalidChange,
     openCalendarOnFocus = true,
+    renderAriaLabelAsTitle,
     required,
     returnValue = 'start',
     shouldCloseCalendar,
@@ -542,6 +550,7 @@ export default function DatePicker(props: DatePickerProps): React.ReactElement {
           name={name}
           onChange={onChange}
           onInvalidChange={onInvalidChange}
+          renderAriaLabelAsTitle={renderAriaLabelAsTitle}
           required={required}
           returnValue={returnValue}
           showLeadingZeros={showLeadingZeros}