[pickers] Include date/time in accessible name depending on picker variant #27420
Labels
accessibility
a11y
component: pickers
This is the name of the generic UI component, not the React module!
"@material-ui/lab": "^5.0.0-alpha.30",
Current Behavior 馃槸
<DateTimePicker>
generates labelaria-label="Choose date, selected date is Jul 23, 2021"
<TimePicker>
generates labelaria-label="Choose date, selected date is Jul 23, 2021"
Expected Behavior 馃
<DateTimePicker>
would generate a label including date & time<TimePicker>
would generate a label including just time, no dateSteps to Reproduce 馃暪
Steps:
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 optionalhelperText
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:
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"
resulting in:
aria-label="Choose date and time, selected date and time is 07/23/2021 07:45 pm"
The text was updated successfully, but these errors were encountered: