[docs] Improve a11y story of /customization/color#color-tool

mui · Apr 2, 2020 · f5f8f87 · f5f8f87
1 parent e2c371c
commit f5f8f87
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 11 deletions.
diff --git a/docs/src/pages/customization/color/ColorDemo.js b/docs/src/pages/customization/color/ColorDemo.js
@@ -73,7 +73,7 @@ function ColorDemo(props) {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" color="inherit">
+            <Typography component="div" variant="h6" color="inherit">
               Color
             </Typography>
           </Toolbar>

diff --git a/docs/src/pages/customization/color/ColorTool.js b/docs/src/pages/customization/color/ColorTool.js
@@ -186,18 +186,10 @@ function ColorTool(props) {
 
     return (
       <Grid item xs={12} sm={6} md={4}>
-        <Typography gutterBottom variant="h6">
+        <Typography component="label" gutterBottom htmlFor={intent} variant="h6">
           {capitalize(intent)}
         </Typography>
-        <Input
-          id={intent}
-          value={intentInput}
-          onChange={handleChangeColor(intent)}
-          inputProps={{
-            'aria-label': `${capitalize(intent)} color`,
-          }}
-          fullWidth
-        />
+        <Input id={intent} value={intentInput} onChange={handleChangeColor(intent)} fullWidth />
         <div className={classes.sliderContainer}>
           <Typography id={`${intent}ShadeSliderLabel`}>Shade:</Typography>
           <Slider