From 5c40a7cd266424de9fa254c2dcdfdb10acfeed78 Mon Sep 17 00:00:00 2001 From: Ekaterina Mozheiko Date: Mon, 25 Jan 2021 23:52:09 +0700 Subject: [PATCH 01/10] [DateRangePickerDay][PickersCalendar]: Add role attribute --- .../src/DateRangePickerDay/DateRangePickerDay.tsx | 1 + packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx index a09498d01da0fa..14d2a7c1d0fe32 100644 --- a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -148,6 +148,7 @@ const DateRangePickerDay = React.forwardRef(function DateRangePickerDay( })} >
(props: PickersCalendarProps & WithStyles< const dayProps: PickersDayProps = { key: (day as any)?.toString(), day, - role: 'cell', isAnimating: isMonthSwitchingAnimating, disabled: isDateDisabled(day), allowKeyboardControl, @@ -225,7 +224,9 @@ function PickersCalendar(props: PickersCalendarProps & WithStyles< return renderDay ? ( renderDay(day, selectedDates, dayProps) ) : ( - +
+ +
); })}
From 19f3f16ec043a8513c816d78a9d5a461955a6b57 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:01:41 +0100 Subject: [PATCH 02/10] polish docs --- .../{InternalPickers.js => SubComponentsPickers.js} | 2 +- .../{InternalPickers.tsx => SubComponentsPickers.tsx} | 2 +- docs/src/pages/components/date-picker/date-picker.md | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) rename docs/src/pages/components/date-picker/{InternalPickers.js => SubComponentsPickers.js} (91%) rename docs/src/pages/components/date-picker/{InternalPickers.tsx => SubComponentsPickers.tsx} (91%) diff --git a/docs/src/pages/components/date-picker/InternalPickers.js b/docs/src/pages/components/date-picker/SubComponentsPickers.js similarity index 91% rename from docs/src/pages/components/date-picker/InternalPickers.js rename to docs/src/pages/components/date-picker/SubComponentsPickers.js index 181674c28e3ad8..4bd1d203f3a20d 100644 --- a/docs/src/pages/components/date-picker/InternalPickers.js +++ b/docs/src/pages/components/date-picker/SubComponentsPickers.js @@ -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 ( diff --git a/docs/src/pages/components/date-picker/InternalPickers.tsx b/docs/src/pages/components/date-picker/SubComponentsPickers.tsx similarity index 91% rename from docs/src/pages/components/date-picker/InternalPickers.tsx rename to docs/src/pages/components/date-picker/SubComponentsPickers.tsx index 235750016ca39e..0e1b3923305914 100644 --- a/docs/src/pages/components/date-picker/InternalPickers.tsx +++ b/docs/src/pages/components/date-picker/SubComponentsPickers.tsx @@ -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 ( diff --git a/docs/src/pages/components/date-picker/date-picker.md b/docs/src/pages/components/date-picker/date-picker.md index 189e7c5affeab1..089d797e4ee069 100644 --- a/docs/src/pages/components/date-picker/date-picker.md +++ b/docs/src/pages/components/date-picker/date-picker.md @@ -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"}} From 659e54c698da0cb1421e7b99a7431860f033a175 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:05:21 +0100 Subject: [PATCH 03/10] unskip test --- packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx index e2264df4d502f7..45a024655f038f 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx @@ -36,9 +36,7 @@ describe('', () => { expect(getAllByMuiTest('day')).to.have.length(31); }); - // TODO - // eslint-disable-next-line mocha/no-skipped-tests - it.skip('renders year selection standalone', () => { + it('renders year selection standalone', () => { render( Date: Tue, 26 Jan 2021 13:08:52 +0100 Subject: [PATCH 04/10] assert the correct DOM structure --- packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx index 45a024655f038f..2e92b68df94b97 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx @@ -34,6 +34,9 @@ describe('', () => { expect(screen.getByText('January')).toBeVisible(); expect(screen.getByText('2019')).toBeVisible(); expect(getAllByMuiTest('day')).to.have.length(31); + expect( + document.querySelector('[role="grid"] > [role="row"] > [role="cell"] > button'), + ).to.have.text('1'); }); it('renders year selection standalone', () => { From cee49816ca52425478fd55250dcdba3dd14bbba4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:17:17 +0100 Subject: [PATCH 05/10] add more context --- packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx index 2e92b68df94b97..ab6e4f947c600f 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx @@ -34,12 +34,13 @@ describe('', () => { 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'); }); - it('renders year selection standalone', () => { + it('renders year selection standalone', () => { render( Date: Tue, 26 Jan 2021 13:19:20 +0100 Subject: [PATCH 06/10] respect naming convention --- .../src/DateRangePicker/DateRangePickerViewMobile.tsx | 4 ++-- .../src/DateRangePickerDay/DateRangePickerDay.tsx | 2 +- .../src/DesktopDateRangePicker/DesktopDateRangePicker.tsx | 2 +- .../src/MobileDateRangePicker/MobileDateRangePicker.tsx | 2 +- .../src/StaticDateRangePicker/StaticDateRangePicker.test.tsx | 4 +++- .../src/StaticDateRangePicker/StaticDateRangePicker.tsx | 2 +- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx index 686cde73120e9b..9c0431e2ca4801 100644 --- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx +++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewMobile.tsx @@ -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'; @@ -43,7 +43,7 @@ export function DateRangePickerViewMobile(props: DesktopDateRangeCalendar maxDate: maxDateProp, minDate: minDateProp, onChange, - renderDay = (_, dayProps) => {...dayProps} />, + renderDay = (_, dayProps) => {...dayProps} />, rightArrowButtonText, ...other } = props; diff --git a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx index 14d2a7c1d0fe32..f35d8609d9b10a 100644 --- a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx +++ b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx @@ -165,7 +165,7 @@ const DateRangePickerDay = React.forwardRef(function DateRangePickerDay( day={day} selected={selected} outsideCurrentMonth={outsideCurrentMonth} - data-mui-test="DateRangeDay" + data-mui-test="DateRangePickerDay" className={clsx(classes.day, { [classes.notSelectedDate]: !selected, [classes.dayOutsideRangeInterval]: !isHighlighting, diff --git a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index a0419981a78c9c..a0bf8470013430 100644 --- a/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -241,7 +241,7 @@ const DesktopDateRangePicker = makeDateRangePicker( reduceAnimations: PropTypes.bool, /** * Custom renderer for `` days. @DateIOType - * @example (date, DateRangeDayProps) => + * @example (date, DateRangePickerDayProps) => */ renderDay: PropTypes.func, /** diff --git a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx index 3090a0ebdf9998..310298927409bf 100644 --- a/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -258,7 +258,7 @@ const MobileDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', M reduceAnimations: PropTypes.bool, /** * Custom renderer for `` days. @DateIOType - * @example (date, DateRangeDayProps) => + * @example (date, DateRangePickerDayProps) => */ renderDay: PropTypes.func, /** diff --git a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx index 696b5ec4221861..7375778f11931f 100644 --- a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx +++ b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx @@ -30,7 +30,9 @@ describe('', () => { ); expect( - getAllByMuiTest('DateRangeDay').filter((day) => day.getAttribute('disabled') !== undefined), + getAllByMuiTest('DateRangePickerDay').filter( + (day) => day.getAttribute('disabled') !== undefined, + ), ).to.have.length(31); }); }); diff --git a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx index f71193840fa4bd..0b214f23989a24 100644 --- a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -239,7 +239,7 @@ const StaticDateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', S reduceAnimations: PropTypes.bool, /** * Custom renderer for `` days. @DateIOType - * @example (date, DateRangeDayProps) => + * @example (date, DateRangePickerDayProps) => */ renderDay: PropTypes.func, /** From 99911f5232f255190d85610738e8997d47aea34f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:20:53 +0100 Subject: [PATCH 07/10] oh ok, this sucks --- packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx index ab6e4f947c600f..26dc03d9cacf0c 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx @@ -40,7 +40,9 @@ describe('', () => { ).to.have.text('1'); }); - it('renders year selection standalone', () => { + // Flaky match 201 in the CI + // eslint-disable-next-line mocha/no-skipped-tests + it.skip('renders year selection standalone', () => { render( Date: Tue, 26 Jan 2021 13:21:39 +0100 Subject: [PATCH 08/10] more polish --- .../src/DateRangePicker/DateRangePicker.tsx | 2 +- .../src/DateRangePicker/DateRangePickerViewDesktop.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx index a12d20ba07db87..3cb3015ce7042f 100644 --- a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx @@ -268,7 +268,7 @@ const DateRangePicker = makeDateRangePicker('MuiPickersDateRangePicker', Respons reduceAnimations: PropTypes.bool, /** * Custom renderer for `` days. @DateIOType - * @example (date, DateRangeDayProps) => + * @example (date, DateRangePickerDayProps) => */ renderDay: PropTypes.func, /** diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx index 3b09e621d26d42..d82465f73870d2 100644 --- a/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx +++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePickerViewDesktop.tsx @@ -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, @@ -29,9 +29,9 @@ export interface ExportedDesktopDateRangeCalendarProps { calendars?: 1 | 2 | 3; /** * Custom renderer for `` days. @DateIOType - * @example (date, DateRangeDayProps) => + * @example (date, DateRangePickerDayProps) => */ - renderDay?: (date: TDate, DateRangeDayProps: DateRangePickerDayProps) => JSX.Element; + renderDay?: (date: TDate, DateRangePickerDayProps: DateRangePickerDayProps) => JSX.Element; } interface DesktopDateRangeCalendarProps @@ -109,7 +109,7 @@ function DateRangePickerViewDesktop( maxDate: maxDateProp, minDate: minDateProp, onChange, - renderDay = (_, dateRangeProps) => , + renderDay = (_, dateRangeProps) => , rightArrowButtonText = 'Next month', ...other } = props; From 4c130ff5356cd211d09ed08764617f71665644d5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:25:56 +0100 Subject: [PATCH 09/10] add test case --- .../StaticDateRangePicker.test.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx index 7375778f11931f..815f5473e7fbeb 100644 --- a/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx +++ b/packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx @@ -35,4 +35,22 @@ describe('', () => { ), ).to.have.length(31); }); + + it('should render the correct a11y tree structure', () => { + render( + {}} + 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'); + }); }); From dc35dda6d22c5ca66bdf6e508507dca205f4a7d8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 26 Jan 2021 13:27:33 +0100 Subject: [PATCH 10/10] polish --- packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx index 26dc03d9cacf0c..7e8b9e0d557df8 100644 --- a/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx +++ b/packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx @@ -40,7 +40,7 @@ describe('', () => { ).to.have.text('1'); }); - // Flaky match 201 in the CI + // Flaky, it match 201 instead of 200 in the CI // eslint-disable-next-line mocha/no-skipped-tests it.skip('renders year selection standalone', () => { render(