[docs] Fix a few WAVE errors (#20304)

Author: oliviertassinari

docs/src/pages/components/buttons/CustomizedButtons.js

@@ -11,8 +11,8 @@ const BootstrapButton = withStyles({
     padding: '6px 12px',
     border: '1px solid',
     lineHeight: 1.5,
-    backgroundColor: '#007bff',
-    borderColor: '#007bff',
+    backgroundColor: '#0063cc',
+    borderColor: '#0063cc',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',

docs/src/pages/components/buttons/CustomizedButtons.tsx

@@ -18,8 +18,8 @@ const BootstrapButton = withStyles({
     padding: '6px 12px',
     border: '1px solid',
     lineHeight: 1.5,
-    backgroundColor: '#007bff',
-    borderColor: '#007bff',
+    backgroundColor: '#0063cc',
+    borderColor: '#0063cc',
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',

docs/src/pages/components/selects/GroupedSelect.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import FormControl from '@material-ui/core/FormControl';
@@ -21,7 +20,7 @@ export default function GroupedSelect() {
     <div>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" input={<Input id="grouped-native-select" />}>
+        <Select native defaultValue="" id="grouped-native-select">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -35,7 +34,7 @@ export default function GroupedSelect() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
-        <Select defaultValue="" input={<Input id="grouped-select" />}>
+        <Select defaultValue="" id="grouped-select">
           <MenuItem value="">
             <em>None</em>
           </MenuItem>

docs/src/pages/components/selects/GroupedSelect.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import FormControl from '@material-ui/core/FormControl';
@@ -23,7 +22,7 @@ export default function GroupedSelect() {
     <div>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" input={<Input id="grouped-native-select" />}>
+        <Select native defaultValue="" id="grouped-native-select">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -37,7 +36,7 @@ export default function GroupedSelect() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
-        <Select defaultValue="" input={<Input id="grouped-select" />}>
+        <Select defaultValue="" id="grouped-select">
           <MenuItem value="">
             <em>None</em>
           </MenuItem>

docs/src/pages/components/slider/TrackFalseSlider.js

@@ -51,8 +51,8 @@ export default function TrackFalseSlider() {
         marks={marks}
       />
       <div className={classes.margin} />
-      <Typography id="track-false-multi-values-slider" gutterBottom>
-        Removed track multi-values
+      <Typography id="track-false-range-slider" gutterBottom>
+        Removed track range slider
       </Typography>
       <Slider
         track={false}

docs/src/pages/components/slider/TrackFalseSlider.tsx

@@ -53,8 +53,8 @@ export default function TrackFalseSlider() {
         marks={marks}
       />
       <div className={classes.margin} />
-      <Typography id="track-false-multi-values-slider" gutterBottom>
-        Removed track multi-values
+      <Typography id="track-false-range-slider" gutterBottom>
+        Removed track range slider
       </Typography>
       <Slider
         track={false}

docs/src/pages/components/tables/EnhancedTable.js

@@ -159,11 +159,11 @@ const EnhancedTableToolbar = (props) => {
       })}
     >
       {numSelected > 0 ? (
-        <Typography className={classes.title} color="inherit" variant="subtitle1">
+        <Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
           {numSelected} selected
         </Typography>
       ) : (
-        <Typography className={classes.title} variant="h6" id="tableTitle">
+        <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
           Nutrition
         </Typography>
       )}

docs/src/pages/components/tables/EnhancedTable.tsx

@@ -190,11 +190,11 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
       })}
     >
       {numSelected > 0 ? (
-        <Typography className={classes.title} color="inherit" variant="subtitle1">
+        <Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
           {numSelected} selected
         </Typography>
       ) : (
-        <Typography className={classes.title} variant="h6" id="tableTitle">
+        <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
           Nutrition
         </Typography>
       )}

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

@@ -41,7 +41,7 @@ A simple example of a dense table with no frills.
 
 This example demonstrates the use of `Checkbox` and clickable rows for selection, with a custom `Toolbar`. It uses the `TableSortLabel` component to help style column headings.
 
-The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The ['Custom Table Pagination Action' example](#custom-table-pagination-action) below shows the pagination within the TableFooter.)
+The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The ['Custom Table Pagination Action' example](#custom-pagination-actions) below shows the pagination within the TableFooter.)
 
 {{"demo": "pages/components/tables/EnhancedTable.js", "bg": true}}
 

docs/src/pages/landing/Quotes.js

@@ -149,10 +149,10 @@ function Quote(props) {
               <Avatar src={avatar} alt={name} className={classes.avatar} />
             </Grid>
             <Grid item>
-              <Typography variant="h6" color="textPrimary" className={classes.name}>
+              <Typography component="div" variant="h6" color="textPrimary" className={classes.name}>
                 {name}
               </Typography>
-              <Typography variant="subtitle2" color="textSecondary">
+              <Typography component="div" variant="subtitle2" color="textSecondary">
                 {userName}
               </Typography>
             </Grid>