[pickers] Include date/time in accessible name depending on picker variant

[DoctorDerek]

• The issue is present in the latest release. "@material-ui/lab": "^5.0.0-alpha.30",
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

1. <DateTimePicker> generates label aria-label="Choose date, selected date is Jul 23, 2021"
2. <TimePicker> generates label aria-label="Choose date, selected date is Jul 23, 2021"

Expected Behavior 🤔

1. <DateTimePicker> would generate a label including date & time
2. <TimePicker> would generate a label including just time, no date

Steps to Reproduce 🕹

Steps:

1. No reproduction is needed, as this behavior is clear in the source code.
2. These three components should have different defaults, not the same defaults:

https://github.com/mui-org/material-ui/blob/9693e8ba8a8c9122c530f26d84645de35277e9a8/packages/material-ui-lab/src/DatePicker/DatePicker.tsx#L183-L187
https://github.com/mui-org/material-ui/blob/9693e8ba8a8c9122c530f26d84645de35277e9a8/packages/material-ui-lab/src/TimePicker/TimePicker.tsx#L172-L176
https://github.com/mui-org/material-ui/blob/9693e8ba8a8c9122c530f26d84645de35277e9a8/packages/material-ui-lab/src/DateTimePicker/DateTimePicker.tsx#L214-L218

Context 🔦

Currently <DateTimePicker> and <TimePicker> are not accessible; they are only pretending to be so.

I was looking to query the aria-label for <DateTimePicker> by the word "time" but couldn't do so. I could only query the optional helperText I was using, which is not associated with the in the DOM flow.

Your Environment 🌎

My environment is not applicable.

Proposed Solution

Either of these seem like adequate solutions to me as overrides:

JavaScript code with default Date toString:

        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DateTimePicker
            value={selectedDateTime}
            onChange={setSelectedDateTime}
            getOpenDialogAriaText={(value) =>
              `Choose date and time, selected date and time is ${value}`
            }
            renderInput={(props) => (
              <TextField {...props} helperText="selected time" />
            )}
          />
        </LocalizationProvider>

resulting in:
aria-label="Choose date and time, selected date and time is Fri Jul 23 2021 19:36:38 GMT-0500 (Eastern Standard Time)"

or

TypeScript code with import { format } from "date-fns"

        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DateTimePicker
            value={selectedDateTime}
            onChange={setSelectedDateTime}
            getOpenDialogAriaText={(value) =>
              `Choose date and time, selected date and time is ${
                value && format(value as Date, "MM/dd/yyyy hh:mm aaa")
              }`
            }
            renderInput={(props) => (
              <TextField {...props} helperText="selected time" />
            )}
          />
        </LocalizationProvider>

resulting in:
aria-label="Choose date and time, selected date and time is 07/23/2021 07:45 pm"

[flaviendelangle]

This is currently the case for the time picker
We can discuss it for the date time picker.

[LukasTy]

Confirming that TimePicker works as expected with the latest package version.

As for DateTimePicker, I think there is merit to having the complete label.
@flaviendelangle did we ever have discussions about it including time?
I would like to groom this topic. 👍

[flaviendelangle]

@flaviendelangle did we ever have discussions about it including time?

Not that I recall