[docs][pickers] Fix grammar and spelling mistakes

docs/data/date-pickers/accessibility/accessibility.md

@@ -30,8 +30,8 @@ Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to d
 This behavior is automated as much as possible, ensuring that the Date and Time Pickers are accessible in most cases.
 A correct `aria-labelledby` value is assigned to the dialog component based on the following rules:
 
-- Use `toolbar` id if the toolbar is visible;
-- Use the id of the input label if the toolbar is hidden;
+- Use `toolbar` ID if the toolbar is visible
+- Use the ID of the input label if the toolbar is hidden
 
 :::info
 Make sure to provide an `aria-labelledby` prop to `popper` and/or `mobilePaper` slots in case you are using Date and Time Pickers component with **hidden toolbar** and **without a label**.
@@ -50,15 +50,15 @@ Each of these components is designed to respond intuitively to keyboard interact
 
 The following table describes the keyboard support for all [field components](/x/react-date-pickers/fields/):
 
-|                                                                  Keys | Description                                  |
-| --------------------------------------------------------------------: | :------------------------------------------- |
-| <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among date/time sections         |
-|                                       <kbd class="key">Arrow Up</kbd> | Increases focused section value by 1         |
-|                                     <kbd class="key">Arrow Down</kbd> | Decreases focused section value section by 1 |
-|                                        <kbd class="key">Page Up</kbd> | Increases focused section value section by 5 |
-|                                      <kbd class="key">Page Down</kbd> | Decreases focused section value section by 5 |
-|                                           <kbd class="key">Home</kbd> | Sets focused section to the minimal value    |
-|                                            <kbd class="key">End</kbd> | Sets focused section to the maximal value    |
+|                                                                  Keys | Description                               |
+| --------------------------------------------------------------------: | :---------------------------------------- |
+| <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among date/time sections      |
+|                                       <kbd class="key">Arrow Up</kbd> | Increases focused section value by 1      |
+|                                     <kbd class="key">Arrow Down</kbd> | Decreases focused section value by 1      |
+|                                        <kbd class="key">Page Up</kbd> | Increases focused section value by 5      |
+|                                      <kbd class="key">Page Down</kbd> | Decreases focused section value by 5      |
+|                                           <kbd class="key">Home</kbd> | Sets focused section to the minimal value |
+|                                            <kbd class="key">End</kbd> | Sets focused section to the maximal value |
 
 ### Date Calendar
 
@@ -74,20 +74,19 @@ Among the [available view components](https://mui.com/x/react-date-pickers/date-
 ### Date Picker
 
 The [Date Picker](/x/react-date-pickers/date-picker/) combines the functionalities of the Date Field and Date Calendar components.
-
 Depending on which component is in focus, the Picker will provide the corresponding keyboard support, either from [Date Field](/x/react-date-pickers/accessibility/#fields) or [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar).
 
 ### Date Range Calendar
 
-The [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) implements a similar keyboard support as the day view of the [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar) component, with a difference on the navigation among the previous and next months that must be achieved using the arrows in the calendar header.
+The [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) implements similar keyboard support as the day view of the [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar) component, with a difference in the navigation between the previous and next months that must be achieved using the arrows in the calendar header.
 
-|                                                                                                                                          Keys | Description                                                   |
-| --------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------ |
-| <kbd class="key">Arrow Up</kbd>, <kbd class="key">Arrow Down</kbd>,<br> <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among the available values                        |
-|                                                                                                                <kbd class="key">Page Up</kbd> | Moves focus to the last day of the month                      |
-|                                                                                                              <kbd class="key">Page Down</kbd> | Moves focus to the first day of the month                     |
-|                                                                                                                   <kbd class="key">Home</kbd> | Moves focus to first day of the week within the current month |
-|                                                                                                                    <kbd class="key">End</kbd> | Moves focus to last day of the week within the current month  |
+|                                                                                                                                          Keys | Description                                                       |
+| --------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
+| <kbd class="key">Arrow Up</kbd>, <kbd class="key">Arrow Down</kbd>,<br> <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among the available values                            |
+|                                                                                                                <kbd class="key">Page Up</kbd> | Moves focus to the last day of the month                          |
+|                                                                                                              <kbd class="key">Page Down</kbd> | Moves focus to the first day of the month                         |
+|                                                                                                                   <kbd class="key">Home</kbd> | Moves focus to the first day of the week within the current month |
+|                                                                                                                    <kbd class="key">End</kbd> | Moves focus to the last day of the week within the current month  |
 
 ### Date Range Picker
 

docs/data/date-pickers/adapters-locale/adapters-locale.md

@@ -193,7 +193,7 @@ Luxon is not able to respect the leading zeroes when using macro tokens (for exa
 
 ### Custom field placeholder
 
-When a section is empty, the fields displays its placeholder instead of an empty value.
+When a section is empty, the field displays its placeholder instead of an empty value.
 For example, if you did not fill any value for the `year` section, the field will render the year placeholder.
 
 These placeholders are based on your current component localization, not on your date localization.
@@ -239,8 +239,8 @@ This prop is available on all pickers.
 ### Custom day of week format
 
 Use `dayOfWeekFormatter` to customize day names in the calendar header.
-This prop takes two parameters, `day` (a string with the name of the day) and `date` ( the day in the format of your date library) and returns the formatted string to display.
-The default formatter only keeps the first letter of the name and capitalises it.
+This prop takes two parameters, `day` (a string with the name of the day) and `date` (the day in the format of your date library), and returns the formatted string to display.
+The default formatter only keeps the first letter of the name and capitalizes it.
 
 :::warning
 The first parameter `day` will be removed in v7 in favor of the second parameter `date` for more flexibility.

docs/data/date-pickers/base-concepts/base-concepts.md

@@ -134,7 +134,7 @@
 
 {{"demo": "ReferenceDateUsingValue.js"}}
 
-When `value` and `defaultValue` contains no valid date, the component will try to find a reference date that passes the validation to initialize its rendering:
+When `value` and `defaultValue` contain no valid date, the component will try to find a reference date that passes the validation to initialize its rendering:
 
 {{"demo": "ReferenceDateDefaultBehavior.js"}}
 
@@ -143,7 +143,7 @@
 {{"demo": "ReferenceDateExplicitDateTimePicker.js"}}
 
 This can also be useful to set the part of the value that will not be selectable in the component.
-For example, in a Time Picker, it allows you to choose the date of your value:
+For example, in a Time Picker, it lets you choose the date of your value:
 
 {{"demo": "ReferenceDateExplicitTimePicker.js"}}
 
@@ -152,7 +152,7 @@
 This might be useful when you want different time values for start and end positions in a Date Time Range Picker.
 
 :::info
-Try selecting a date the demo below, then move to next position to observe the end reference date usage.
+Try selecting a date in the demo below, then move to the next position to observe the end reference date usage.
 :::
 
 {{"demo": "ReferenceDateRange.js"}}
@@ -166,16 +166,16 @@
 :::
 
 Be aware that running tests in headless browsers might not pass the default mediaQuery (`pointer: fine`).
-In such case you can [force pointer precision](https://github.com/microsoft/playwright/issues/7769#issuecomment-1205106311) via browser flags or preferences.
+In such cases you can [force pointer precision](https://github.com/microsoft/playwright/issues/7769#issuecomment-1205106311) via browser flags or preferences.
 
 ### Field components
 
 :::info
-To support RTL and some keyboard interactions, field components add some Unicode character that are invisible, but appears in the input value.
+To support RTL and some keyboard interactions, field components add some Unicode characters that are invisible, but appear in the input value.
 :::
 
-To add tests about a field value without having to care about those characters, you can remove the specific character before testing the equality.
-Here is an example about how to do it.
+To add tests about a field value without having to care about those characters, you can remove the specific characters before testing the equality.
+Here is an example of how to do it.
 
 ```js
 // Helper removing specific characters

docs/data/date-pickers/custom-components/custom-components.md

@@ -69,8 +69,8 @@ In the example below, the actions are the same as in the section above, but they
 
 ## Tabs
 
-The tabs are available on all date time picker components.
-It allows switching between date and time interfaces.
+Tabs are available on all date time picker components.
+They let users switch between date and time interfaces.
 
 ### Component props
 
@@ -112,7 +112,7 @@ In the example below, the tabs are using different icons and have an additional
 ## Toolbar
 
 The toolbar is available on all date time picker components.
-It displays the current values and allows to switch between different views.
+It displays the current values and lets users switch between different views.
 
 ### Component props
 
@@ -147,7 +147,7 @@ Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolb
 ## Calendar header
 
 The calendar header is available on any component that renders a calendar to select a date or a range of dates.
-It allows the user to navigate through months and to switch to the month and year views when available.
+It lets users navigate through months and switch to the month and year views when available.
 
 ### Component props
 
@@ -174,7 +174,7 @@ The demo below shows how to navigate the months two by two:
 
 ## Year button
 
-This button allows users to change the selected year in the `year` view.
+This button lets users change the selected year in the `year` view.
 
 ### Component props
 
@@ -196,7 +196,7 @@ The examples below use the new components, which might need further changes on y
 Be sure to check that any custom styling configuration is compatible with the new structure.
 :::
 
-The `day` slot allows users to change the selected day in the calendar.
+The `day` slot lets users change the selected day in the calendar.
 
 You can use the `<PickerDay2 />` and `<DateRangePickerDay2 />` components to replace the day slot with a simplified DOM structure reduced to a single element.
 
@@ -218,10 +218,10 @@ Customize the look and feel by creating a custom theme with `styleOverrides`.
 
 ## Month button
 
-This button allows users to change the selected month in the `month` view.
+This button lets users change the selected month in the `month` view.
 
 :::success
-You can learn more on how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views).
+You can learn more about how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views).
 :::
 
 ### Component props

docs/data/date-pickers/custom-field/custom-field.md

@@ -85,7 +85,7 @@
 {{"demo": "MaterialV6Field.js"}}
 
 :::warning
-The non-accessible DOM structure will be deprecated in a follow up minor version and remove in `v9.x`.
+The non-accessible DOM structure will be deprecated in a follow-up minor version and removed in `v9.x`.
 If you are unable to migrate for some reason, please open an issue to describe what is missing from the new DOM structure so that we can improve it before dropping the old one.
 :::
 
@@ -97,7 +97,7 @@
 You will need to use a component that supports the `sx` prop as a wrapper for your input
 to be able to benefit from the **hover** and **focus** behavior of the clear button.
 You will have access to the `clearable` and `onClear` props using native HTML elements,
-but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop.
+but the **focus** and **hover** behavior depends on styles applied via the `sx` prop.
 :::
 
 {{"demo": "BrowserV7Field.js", "defaultCodeOpen": false}}
@@ -262,7 +262,7 @@
 <DatePicker label="Birth date" name="birthdate" className="date-picker" sx={{ borderColor: 'red'}}>
 ```
 
-If you are using any of those props in one of your picker, make sure to retrieve them in your field using the `usePickerContext` hook:
+If you are using any of those props in one of your pickers, make sure to retrieve them in your field using the `usePickerContext` hook:
 
 ```jsx
 const { label, name, rootClassName, rootSx, rootRef } = usePickerContext();

docs/data/date-pickers/custom-layout/custom-layout.md

@@ -16,13 +16,13 @@ See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-compon
 
 ## Default layout structure
 
-By default, pickers are made of 5 subcomponents present in the following order:
+By default, pickers are made of five subcomponents present in the following order:
 
-- The **toolbar** displaying the selected date. Can be enforced with `slotProps: { toolbar: { hidden: false } }` prop.
-- The **shortcuts** allowing quick selection of some values. Can be added with [`slotProps.shortcuts`](/x/react-date-pickers/shortcuts/#adding-shortcuts)
-- The **content** displaying the current view. Can be a calendar, or a clock.
-- The **tabs** allowing to switch between day and time views in Date Time Pickers. Can be enforced with `slotProps: { tabs: { hidden: false } }` prop.
-- The **action bar** allowing some interactions. Can be added with [`slotProps.actionBar`](/x/react-date-pickers/custom-components/#action-bar) prop.
+- The **toolbar** displays the selected date. Can be enforced with `slotProps: { toolbar: { hidden: false } }` prop.
+- The **shortcuts** let users quickly select some values. Can be added with [`slotProps.shortcuts`](/x/react-date-pickers/shortcuts/#adding-shortcuts)
+- The **content** displays the current view. Can be a calendar, or a clock.
+- The **tabs** let users switch between day and time views in Date Time Pickers. Can be enforced with `slotProps: { tabs: { hidden: false } }` prop.
+- The **action bar** lets users perform some interactions. Can be added with [`slotProps.actionBar`](/x/react-date-pickers/custom-components/#action-bar) prop.
 
 By default the `content` and `tabs` are wrapped together in a `contentWrapper` to simplify the layout.
 

docs/data/date-pickers/custom-opening-button/custom-opening-button.md

@@ -52,7 +52,7 @@ In the example below, the warning icon will be visible anytime the current value
 
 {{"demo": "AddWarningIconWhenInvalid.js"}}
 
-To add the same behavior to a picker that does not have an input adornment (for example, a Date Range Picker when used with a multi input field),
+To add the same behavior to a picker that does not have an input adornment (for example, a Date Range Picker when used with a multi-input field),
 you need to use the `textField` slot to add one:
 
 {{"demo": "AddWarningIconWhenInvalidRange.js"}}

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -83,7 +83,7 @@ This value is usually set to `6` for Gregorian calendars, because month display
 
 ### Display week number
 
-To display week number, use the `displayWeekNumber`.
+To display week numbers, use the `displayWeekNumber` prop.
 You can customize the calendar week header by using the localization key `localeText.calendarWeekNumberHeaderText`.
 You can also customize what's rendered as a calendar week number, using a callback for the localization key `localeText.calendarWeekNumberText`.
 

docs/data/date-pickers/date-picker/date-picker.md

@@ -19,7 +19,7 @@
 
 The component is built using the `DateField` for the keyboard editing and the `DateCalendar` for the view editing.
 
-Check-out their documentation page for more information:
+Check out their documentation page for more information:
 
 - [Date Field](/x/react-date-pickers/date-field/)
 - [Date Calendar](/x/react-date-pickers/date-calendar/)
@@ -96,8 +96,7 @@
 
 :::success
 The views will appear in the order defined by the `views` array.
-If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow
-(for example view the default behaviors, the `year` is only accessible when clicking on the toolbar).
+If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow (for example, viewing the default behaviors, the `year` is only accessible when clicking on the toolbar).
 :::
 
 ## Order of years

docs/data/date-pickers/date-range-calendar/date-range-calendar.md

@@ -42,7 +42,7 @@ You can render up to 3 months at the same time using the `calendars` prop:
 
 {{"demo": "DateRangeCalendarCalendarsProp.js"}}
 
-You can choose the position the current month is rendered in using the `currentMonthCalendarPosition` prop.
+You can choose the position where the current month is rendered using the `currentMonthCalendarPosition` prop.
 This can be useful when using `disableFuture` to render the current month and the month before instead of the current month and the month after.
 
 {{"demo": "DateRangeCalendarCurrentMonthCalendarPositionProp.js"}}