[DatePicker] w3c validator issues #24171
Open
Comments
|
@annaolchowik Thanks for the report. While the issue you have reported seems to be fixed, we have a different one now:
What do you think about the following fix, do you want to work on a pull request :)? diff --git a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx
index 19351c3970..a96aeb2005 100644
--- a/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/material-ui-lab/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -125,6 +125,7 @@ const DateRangePickerDay = React.forwardRef(function DateRangePickerDay<TDate>(
return (
<div
+ role="cell"
data-mui-test={shouldRenderHighlight ? 'DateRangeHighlight' : undefined}
className={clsx(classes.root, className, {
[classes.rangeIntervalDayHighlight]: shouldRenderHighlight,
diff --git a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
index 1912d722e7..41ccbb6793 100644
--- a/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
+++ b/packages/material-ui-lab/src/DayPicker/PickersCalendar.tsx
@@ -193,7 +193,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,
@@ -220,7 +219,9 @@ function PickersCalendar<TDate>(props: PickersCalendarProps<TDate> & WithStyles<
return renderDay ? (
renderDay(day, selectedDates, dayProps)
) : (
- <PickersDay {...dayProps} />
+ <div role="cell">
+ <PickersDay {...dayProps} />
+ </div>
);
})}
</div>The solution is based on https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I'm using your Datepicker component.
Is there any chance to fix this?
Current Behavior😯
When trying to validate site which uses your Datepicker component I got average about 40 errors, which says:
"Element “p” not allowed as child of element “span” in this context. (Suppressing further errors from this subtree.)"
Expected Behavior🤔
element p should not be inside inline span block.
Steps to Reproduce🕹
Please see Link to your Datepicker component demo site below:
https://next.material-ui.com/components/date-picker/
Your Environment🌎
The text was updated successfully, but these errors were encountered: