[Pickers] Fix role attribute

docs/src/pages/components/date-picker/InternalPickers.js → 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 (

docs/src/pages/components/date-picker/InternalPickers.tsx → 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<Date | null>(new Date());
 
   return (

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"}}
 

packages/material-ui-lab/src/DateRangePicker/DateRangePicker.tsx

@@ -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,
   /**

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<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>
@@ -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;

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<TDate>(props: DesktopDateRangeCalendar
     maxDate: maxDateProp,
     minDate: minDateProp,
     onChange,
-    renderDay = (_, dayProps) => <DateRangeDay<TDate> {...dayProps} />,
+    renderDay = (_, dayProps) => <DateRangePickerDay<TDate> {...dayProps} />,
     rightArrowButtonText,
     ...other
   } = props;

packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx

@@ -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,
@@ -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,

packages/material-ui-lab/src/DayPicker/DayPicker.test.tsx

@@ -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')}

packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx

@@ -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,
@@ -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>

packages/material-ui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx

@@ -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,
   /**

packages/material-ui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx

@@ -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,
   /**

packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.test.tsx

@@ -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');
+  });
 });

packages/material-ui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx

@@ -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,
   /**