[core] Batch small changes

docs/src/pages/components/box/box.md

@@ -18,7 +18,7 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty
 
 ## The sx prop
 
-All system properties are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it:
+All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:
 
 {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
 

docs/src/pages/components/menus/menus.md

@@ -24,7 +24,7 @@ Choosing an option should immediately ideally commit the option and close the me
 
 {{"demo": "pages/components/menus/SimpleMenu.js"}}
 
-## Selected menus
+## Selected menu
 
 If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element,
 and the initial focus will be placed on the selected menu item.
@@ -33,7 +33,7 @@ To use a selected menu item without impacting the initial focus or the vertical
 
 {{"demo": "pages/components/menus/SimpleListMenu.js"}}
 
-## Menu positioning
+## Positioned menu
 
 Because the `Menu` component uses the `Popover` component to position itself, you can use the same [positioning props](/components/popover/#anchor-playground) to position it.
 For instance, you can display the menu below the anchor:
@@ -50,7 +50,7 @@ The primary responsibility of the `MenuList` component is to handle the focus.
 
 {{"demo": "pages/components/menus/MenuListComposition.js", "bg": true}}
 
-## Customized menus
+## Customized menu
 
 Here is an example of customizing the component. You can learn more about this in the
 [overrides documentation page](/customization/components/).
@@ -62,7 +62,7 @@ You can use the same list composition features with the `MenuItem` component:
 
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/menu).
 
-## Max height menus
+## Max height menu
 
 If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.
 

docs/src/pages/components/rating/rating.md

@@ -53,7 +53,7 @@ The accessibility of this component relies on:
 - Labels for the radio buttons containing actual text (“1 Star”, “2 Stars”, …).
   Be sure to provide a suitable function to the `getLabelText` prop when the page is in a language other than English. You can use the [included locales](https://material-ui.com/guides/localization/), or provide your own.
 - A visually distinct appearance for the rating icons.
-  By default, the rating component uses both a difference of color and shape (filled and empty icons)to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) of WCAG2.1.
+  By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) of WCAG2.1.
 
 {{"demo": "pages/components/rating/TextRating.js"}}
 

docs/src/pages/components/tables/tables.md

@@ -2,29 +2,36 @@
 title: React Table component
 components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel
 githubLabel: 'component: Table'
+waiAria: https://www.w3.org/TR/wai-aria-practices/#table
 materialDesign: https://material.io/components/data-tables
 ---
 
 # Table
 
 <p class="description">Tables display sets of data. They can be fully customized.</p>
 
-Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards.
-
-Tables can include:
+Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. They can include:
 
 - A corresponding visualization
 - Navigation
 - Tools to query and manipulate data
 
-When including tools, they should be placed directly above or below the table.
+{{"component": "modules/components/ComponentLinkHeader.js"}}
 
 ## Basic table
 
 A simple example with no frills.
 
 {{"demo": "pages/components/tables/BasicTable.js", "bg": true}}
 
+## Data table
+
+The `Table` component has a close mapping to the native `<table>` elements.
+This constraint makes building rich data tables challenging.
+
+The [`DataGrid` component](/components/data-grid/) is designed for use-cases that are focused around handling a large amounts of tabular data.
+While it comes with a more rigid structure, in exchange, you gain more powerful features.
+
 ## Dense table
 
 A simple example of a dense table with no frills.
@@ -39,14 +46,6 @@ The Table has been given a fixed width to demonstrate horizontal scrolling. In o
 
 {{"demo": "pages/components/tables/EnhancedTable.js", "bg": true}}
 
-## Data table
-
-The `Table` component has a close mapping to the native `<table>` elements.
-This constraint makes building rich data tables challenging.
-
-The [`DataGrid` component](/components/data-grid/) is designed for use-cases that are focused around handling a large amounts of tabular data.
-While it comes with a more rigid structure, in exchange, you gain more powerful features.
-
 ## Customized tables
 
 Here is an example of customizing the component. You can learn more about this in the

docs/src/pages/components/tree-view/BarTreeView.tsx

@@ -6,7 +6,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem, {
   TreeItemProps,
   useTreeItem,
-  ContentProps,
+  TreeItemContentProps,
 } from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
@@ -88,7 +88,7 @@ const useContentStyles = makeStyles((theme) =>
 );
 
 const CustomContent = React.forwardRef(function CustomContent(
-  props: ContentProps,
+  props: TreeItemContentProps,
   ref,
 ) {
   const {

docs/src/pages/components/tree-view/IconExpansionTreeView.tsx

@@ -6,7 +6,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem, {
   TreeItemProps,
   useTreeItem,
-  ContentProps,
+  TreeItemContentProps,
 } from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
 });
 
 const CustomContent = React.forwardRef(function CustomContent(
-  props: ContentProps,
+  props: TreeItemContentProps,
   ref,
 ) {
   const {

docs/src/pages/guides/localization/localization.md

@@ -78,7 +78,7 @@ You can [find the source](https://github.com/mui-org/material-ui/blob/next/packa
 To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
 
 Please do consider contributing new translations back to Material-UI by opening a pull request.
-However, Material-UI aims to support the [100 most popular locales](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers.
+However, Material-UI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers.
 
 ## RTL Support
 

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -132,13 +132,13 @@ The following changes are supported by the adapter.
 
   Before:
 
-  ```
+  ```js
   theme.spacing(2) => 16
   ```
 
   After:
 
-  ```
+  ```js
   theme.spacing(2) => '16px'
   ```
 

packages/material-ui-lab/src/TreeItem/TreeItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import { TransitionProps } from '@material-ui/core/transitions';
-import { ContentProps } from './TreeItemContent';
+import { TreeItemContentProps } from './TreeItemContent';
 
 export interface TreeItemProps
   extends StandardProps<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
@@ -40,7 +40,7 @@ export interface TreeItemProps
    * The component used for the content node.
    * @default TreeItemContent
    */
-  ContentComponent?: React.ComponentType<ContentProps>;
+  ContentComponent?: React.ComponentType<TreeItemContentProps>;
   /**
    * Props applied to ContentComponent
    */

packages/material-ui-lab/src/TreeItem/TreeItemContent.d.ts

@@ -1,7 +1,7 @@
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import * as React from 'react';
 
-export interface ContentProps extends StandardProps<React.HTMLAttributes<HTMLElement>> {
+export interface TreeItemContentProps extends StandardProps<React.HTMLAttributes<HTMLElement>> {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -43,4 +43,4 @@ export interface ContentProps extends StandardProps<React.HTMLAttributes<HTMLEle
   displayIcon?: React.ReactNode;
 }
 
-export type ContentClassKey = keyof NonNullable<ContentProps['classes']>;
+export type TreeItemContentClassKey = keyof NonNullable<TreeItemContentProps['classes']>;

test/regressions/index.js

@@ -50,28 +50,28 @@ const blacklist = [
   'docs-components-drawers/SwipeableTemporaryDrawer.png', // Needs interaction
   'docs-components-drawers/TemporaryDrawer.png', // Needs interaction
   'docs-components-floating-action-button/FloatingActionButtonZoom.png', // Needs interaction
-  'docs-components-image-list', // Image don't load
   'docs-components-grid/InteractiveGrid.png', // Redux isolation
   'docs-components-grid/SpacingGrid.png', // Needs interaction
   'docs-components-hidden', // Need to dynamically resize to test
+  'docs-components-image-list', // Image don't load
   'docs-components-material-icons/synonyms.png', // No component
   'docs-components-menus', // Need interaction
+  'docs-components-modal/KeepMountedModal.png', // Needs interaction
   'docs-components-modal/SimpleModal.png', // Needs interaction
   'docs-components-modal/SpringModal.png', // Needs interaction
   'docs-components-modal/TransitionsModal.png', // Needs interaction
-  'docs-components-modal/KeepMountedModal.png', // Needs interaction
   'docs-components-no-ssr/FrameDeferring.png', // Needs interaction
   'docs-components-popover/AnchorPlayground.png', // Redux isolation
   'docs-components-popover/MouseOverPopover.png', // Needs interaction
   'docs-components-popover/PopoverPopupState.png', // Needs interaction
   'docs-components-popover/SimplePopover.png', // Needs interaction
-  'docs-components-popper/VirtualElementPopper.png', // Needs interaction
   'docs-components-popper/PopperPopupState.png', // Needs interaction
   'docs-components-popper/PositionedPopper.png', // Needs interaction
   'docs-components-popper/ScrollPlayground.png', // Redux isolation
   'docs-components-popper/SimplePopper.png', // Needs interaction
   'docs-components-popper/SpringPopper.png', // Needs interaction
   'docs-components-popper/TransitionsPopper.png', // Needs interaction
+  'docs-components-popper/VirtualElementPopper.png', // Needs interaction
   'docs-components-portal/SimplePortal.png', // Needs interaction
   'docs-components-progress', // Flaky
   'docs-components-selects/ControlledOpenSelect.png', // Needs interaction
@@ -94,16 +94,21 @@ const blacklist = [
   'docs-components-steppers/HorizontalNonLinearStepper.png', // Redundant
   'docs-components-steppers/SwipeableTextMobileStepper.png', // Flaky image loading
   'docs-components-steppers/TextMobileStepper.png', // Flaky image loading
+  'docs-components-tabs/AccessibleTabs.png', // Need interaction
   'docs-components-textarea-autosize', // Superseded by a dedicated regression test
   'docs-components-tooltips', // Needs interaction
   'docs-components-transitions', // Needs interaction
+  'docs-components-trap-focus', // Need interaction
   'docs-components-tree-view/ControlledTreeView.png', // Redundant
   'docs-components-tree-view/CustomizedTreeView.png', // Flaky
+  'docs-components-tree-view/IconExpansionTreeView.png', // Need interaction
+  'docs-components-tree-view/MultiSelectTreeView.png', // Need interaction
   'docs-components-use-media-query', // Need to dynamically resize to test
   'docs-customization-breakpoints', // Need to dynamically resize to test
   'docs-customization-color', // Escape viewport
   'docs-customization-default-theme', // Redux isolation
   'docs-customization-density/DensityTool.png', // Redux isolation
+  'docs-customization-transitions/TransitionHover.png', // Need interaction
   'docs-customization-typography/ResponsiveFontSizesChart.png',
   'docs-discover-more-languages', // No public components
   'docs-discover-more-showcase', // No public components
@@ -125,6 +130,7 @@ const blacklist = [
   'docs-landing', // Mostly images, redundant
   'docs-production-error', // No components, page for DX
   'docs-styles-advanced', // Redudant
+  'docs-styles-basics/StressTest.png', // Need interaction
   'docs-system-borders', // Unit tests are enough
   'docs-system-display', // Unit tests are enough
   'docs-system-flexbox', // Unit tests are enough