Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Pickers] Fix role attribute #24621

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import DayPicker from '@material-ui/lab/DayPicker';

export default function InternalPickers() {
export default function SubComponentsPickers() {
const [date, setDate] = React.useState(new Date());

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
import DayPicker from '@material-ui/lab/DayPicker';

export default function InternalPickers() {
export default function SubComponentsPickers() {
const [date, setDate] = React.useState<Date | null>(new Date());

return (
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/components/date-picker/date-picker.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,19 +73,19 @@ It's possible to render any picker without the modal/popover and text field. Thi

## Landscape orientation

For ease of use the date picker will automatically change the layout between portrait and landscape by subscription to the `window.orientation` change. You can force a specific layout using the `orientation` prop.
For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the `window.orientation` change. You can force a specific layout using the `orientation` prop.

{{"demo": "pages/components/date-picker/StaticDatePickerLandscape.js", "bg": true}}

## Sub-components

Some lower level sub-components (`DayPicker`, `MonthPicker` and `YearPicker`) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).
Some lower-level sub-components (`DayPicker`, `MonthPicker`, and `YearPicker`) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).

{{"demo": "pages/components/date-picker/InternalPickers.js"}}
{{"demo": "pages/components/date-picker/SubComponentsPickers.js"}}

## Custom input component

You can customize rendering of the input with the `renderInput` prop. Make sure to spread `ref` and `inputProps` correctly to the custom input component.
You can customize the rendering of the input with the `renderInput` prop. Make sure to spread `ref` and `inputProps` correctly to the custom input component.

{{"demo": "pages/components/date-picker/CustomInput.js"}}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ const DateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', Respons
reduceAnimations: PropTypes.bool,
/**
* Custom renderer for `<DateRangePicker />` days. @DateIOType
* @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
* @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
*/
renderDay: PropTypes.func,
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { DateRange } from './RangeTypes';
import { useUtils } from '../internal/pickers/hooks/useUtils';
import { calculateRangePreview } from './date-range-manager';
import PickersCalendar, { PickersCalendarProps } from '../DayPicker/PickersCalendar';
import DateRangeDay, { DateRangePickerDayProps } from '../DateRangePickerDay';
import DateRangePickerDay, { DateRangePickerDayProps } from '../DateRangePickerDay';
import { defaultMinDate, defaultMaxDate } from '../internal/pickers/constants/prop-types';
import PickersArrowSwitcher, {
ExportedArrowSwitcherProps,
Expand All @@ -29,9 +29,9 @@ export interface ExportedDesktopDateRangeCalendarProps<TDate> {
calendars?: 1 | 2 | 3;
/**
* Custom renderer for `<DateRangePicker />` days. @DateIOType
* @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
* @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
*/
renderDay?: (date: TDate, DateRangeDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
renderDay?: (date: TDate, DateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
}

interface DesktopDateRangeCalendarProps<TDate>
Expand Down Expand Up @@ -109,7 +109,7 @@ function DateRangePickerViewDesktop<TDate>(
maxDate: maxDateProp,
minDate: minDateProp,
onChange,
renderDay = (_, dateRangeProps) => <DateRangeDay {...dateRangeProps} />,
renderDay = (_, dateRangeProps) => <DateRangePickerDay {...dateRangeProps} />,
rightArrowButtonText = 'Next month',
...other
} = props;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PickersCalendarHeader, {
ExportedCalendarHeaderProps,
} from '../DayPicker/PickersCalendarHeader';
import { DateRange } from './RangeTypes';
import DateRangeDay from '../DateRangePickerDay/DateRangePickerDay';
import DateRangePickerDay from '../DateRangePickerDay';
import { useUtils } from '../internal/pickers/hooks/useUtils';
import PickersCalendar, { PickersCalendarProps } from '../DayPicker/PickersCalendar';
import { defaultMinDate, defaultMaxDate } from '../internal/pickers/constants/prop-types';
Expand Down Expand Up @@ -43,7 +43,7 @@ export function DateRangePickerViewMobile<TDate>(props: DesktopDateRangeCalendar
maxDate: maxDateProp,
minDate: minDateProp,
onChange,
renderDay = (_, dayProps) => <DateRangeDay<TDate> {...dayProps} />,
renderDay = (_, dayProps) => <DateRangePickerDay<TDate> {...dayProps} />,
rightArrowButtonText,
...other
} = props;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ const DateRangePickerDay = React.forwardRef(function DateRangePickerDay<TDate>(
})}
>
<div
role="cell"
data-mui-test={shouldRenderPreview ? 'DateRangePreview' : undefined}
className={clsx(classes.rangeIntervalPreview, {
[classes.rangeIntervalDayPreview]: shouldRenderPreview,
Expand All @@ -164,7 +165,7 @@ const DateRangePickerDay = React.forwardRef(function DateRangePickerDay<TDate>(
day={day}
selected={selected}
outsideCurrentMonth={outsideCurrentMonth}
data-mui-test="DateRangeDay"
data-mui-test="DateRangePickerDay"
className={clsx(classes.day, {
[classes.notSelectedDate]: !selected,
[classes.dayOutsideRangeInterval]: !isHighlighting,
Expand Down
8 changes: 6 additions & 2 deletions packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,15 @@ describe('<DayPicker />', () => {
expect(screen.getByText('January')).toBeVisible();
expect(screen.getByText('2019')).toBeVisible();
expect(getAllByMuiTest('day')).to.have.length(31);
// It should follow https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
expect(
document.querySelector('[role="grid"] > [role="row"] > [role="cell"] > button'),
).to.have.text('1');
});

// TODO
// Flaky, it match 201 instead of 200 in the CI
// eslint-disable-next-line mocha/no-skipped-tests
it.skip('renders year selection standalone', () => {
it.skip('renders year selection standalone', () => {
render(
<DayPicker
date={adapterToUse.date('2019-01-01T00:00:00.000')}
Expand Down
5 changes: 3 additions & 2 deletions packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
const dayProps: PickersDayProps<TDate> = {
key: (day as any)?.toString(),
day,
role: 'cell',
isAnimating: isMonthSwitchingAnimating,
disabled: isDateDisabled(day),
allowKeyboardControl,
Expand All @@ -225,7 +224,9 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
return renderDay ? (
renderDay(day, selectedDates, dayProps)
) : (
<PickersDay {...dayProps} />
<div role="cell" key={dayProps.key}>
<PickersDay {...dayProps} />
</div>
);
})}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ const DesktopDateRangePicker = makeDateRangePicker(
reduceAnimations: PropTypes.bool,
/**
* Custom renderer for `<DateRangePicker />` days. @DateIOType
* @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
* @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
*/
renderDay: PropTypes.func,
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ const MobileDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', M
reduceAnimations: PropTypes.bool,
/**
* Custom renderer for `<DateRangePicker />` days. @DateIOType
* @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
* @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
*/
renderDay: PropTypes.func,
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,27 @@ describe('<StaticDateRangePicker />', () => {
);

expect(
getAllByMuiTest('DateRangeDay').filter((day) => day.getAttribute('disabled') !== undefined),
getAllByMuiTest('DateRangePickerDay').filter(
(day) => day.getAttribute('disabled') !== undefined,
),
).to.have.length(31);
});

it('should render the correct a11y tree structure', () => {
render(
<StaticDateRangePicker
renderInput={defaultRangeRenderInput}
onChange={() => {}}
value={[
adapterToUse.date('2018-01-01T00:00:00.000'),
adapterToUse.date('2018-01-31T00:00:00.000'),
]}
/>,
);

// It should follow https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
expect(
document.querySelector('[role="grid"] > [role="row"] [role="cell"] > button'),
).to.have.text('1');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ const StaticDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', S
reduceAnimations: PropTypes.bool,
/**
* Custom renderer for `<DateRangePicker />` days. @DateIOType
* @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />
* @example (date, DateRangePickerDayProps) => <DateRangePickerDay {...DateRangePickerDayProps} />
*/
renderDay: PropTypes.func,
/**
Expand Down