[Tabs] Improve accessibility (mui#16384)

* [Tabs] Improve accessibility * fix build fail * migrate the other demos * rename tablist -> tablistContainer
segore · Jul 17, 2019 · e616584 · e616584
1 parent 42f78c6
commit e616584
Show file tree

Hide file tree

Showing 26 changed files with 807 additions and 289 deletions.
diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.js b/docs/src/pages/components/buttons/FloatingActionButtonZoom.js
@@ -13,22 +13,39 @@ import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
 import UpIcon from '@material-ui/icons/KeyboardArrowUp';
 import { green } from '@material-ui/core/colors';
+import Box from '@material-ui/core/Box';
 
-function TabContainer(props) {
-  const { children, dir } = props;
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
 
   return (
-    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
-      {children}
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`action-tabpanel-${index}`}
+      aria-labelledby={`action-tab-${index}`}
+      {...other}
+    >
+      <Box p={3}>{children}</Box>
     </Typography>
   );
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
   dir: PropTypes.string.isRequired,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
 };
 
+function a11yProps(index) {
+  return {
+    id: `action-tab-${index}`,
+    'aria-controls': `action-tabpanel-${index}`,
+  };
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.paper,
@@ -98,20 +115,27 @@ export default function FloatingActionButtonZoom() {
           indicatorColor="primary"
           textColor="primary"
           variant="fullWidth"
+          aria-label="Action tabs example"
         >
-          <Tab label="Item One" />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
       <SwipeableViews
         axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
         index={value}
         onChangeIndex={handleChangeIndex}
       >
-        <TabContainer dir={theme.direction}>Item One</TabContainer>
-        <TabContainer dir={theme.direction}>Item Two</TabContainer>
-        <TabContainer dir={theme.direction}>Item Three</TabContainer>
+        <TabPanel value={value} index={0} dir={theme.direction}>
+          Item One
+        </TabPanel>
+        <TabPanel value={value} index={1} dir={theme.direction}>
+          Item Two
+        </TabPanel>
+        <TabPanel value={value} index={2} dir={theme.direction}>
+          Item Three
+        </TabPanel>
       </SwipeableViews>
       {fabs.map((fab, index) => (
         <Zoom

diff --git a/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx b/docs/src/pages/components/buttons/FloatingActionButtonZoom.tsx
@@ -13,27 +13,46 @@ import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
 import UpIcon from '@material-ui/icons/KeyboardArrowUp';
 import { green } from '@material-ui/core/colors';
+import Box from '@material-ui/core/Box';
 
-interface TabContainerProps {
+interface TabPanelProps {
   children?: React.ReactNode;
-  dir: TypographyProps['dir'];
+  dir?: string;
+  index: any;
+  value: any;
 }
 
-function TabContainer(props: TabContainerProps) {
-  const { children, dir } = props;
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
 
   return (
-    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
-      {children}
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`action-tabpanel-${index}`}
+      aria-labelledby={`action-tab-${index}`}
+      {...other}
+    >
+      <Box p={3}>{children}</Box>
     </Typography>
   );
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
   dir: PropTypes.string.isRequired,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
 };
 
+function a11yProps(index: any) {
+  return {
+    id: `action-tab-${index}`,
+    'aria-controls': `action-tabpanel-${index}`,
+  };
+}
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -105,20 +124,27 @@ export default function FloatingActionButtonZoom() {
           indicatorColor="primary"
           textColor="primary"
           variant="fullWidth"
+          aria-label="Action tabs example"
         >
-          <Tab label="Item One" />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
       <SwipeableViews
         axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
         index={value}
         onChangeIndex={handleChangeIndex}
       >
-        <TabContainer dir={theme.direction}>Item One</TabContainer>
-        <TabContainer dir={theme.direction}>Item Two</TabContainer>
-        <TabContainer dir={theme.direction}>Item Three</TabContainer>
+        <TabPanel value={value} index={0} dir={theme.direction}>
+          Item One
+        </TabPanel>
+        <TabPanel value={value} index={1} dir={theme.direction}>
+          Item Two
+        </TabPanel>
+        <TabPanel value={value} index={2} dir={theme.direction}>
+          Item Three
+        </TabPanel>
       </SwipeableViews>
       {fabs.map((fab, index) => (
         <Zoom

diff --git a/docs/src/pages/components/tabs/CustomizedTabs.js b/docs/src/pages/components/tabs/CustomizedTabs.js
@@ -76,7 +76,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
-  typography: {
+  padding: {
     padding: theme.spacing(3),
   },
   demo1: {
@@ -98,20 +98,20 @@ export default function CustomizedTabs() {
   return (
     <div className={classes.root}>
       <div className={classes.demo1}>
-        <AntTabs value={value} onChange={handleChange}>
+        <AntTabs value={value} onChange={handleChange} aria-label="Ant example">
           <AntTab label="Tab 1" />
           <AntTab label="Tab 2" />
           <AntTab label="Tab 3" />
         </AntTabs>
-        <Typography className={classes.typography} />
+        <Typography className={classes.padding} />
       </div>
       <div className={classes.demo2}>
-        <StyledTabs value={value} onChange={handleChange}>
+        <StyledTabs value={value} onChange={handleChange} aria-label="Styled tabs example">
           <StyledTab label="Workflows" />
           <StyledTab label="Datasets" />
           <StyledTab label="Connections" />
         </StyledTabs>
-        <Typography className={classes.typography} />
+        <Typography className={classes.padding} />
       </div>
     </div>
   );

diff --git a/docs/src/pages/components/tabs/CustomizedTabs.tsx b/docs/src/pages/components/tabs/CustomizedTabs.tsx
@@ -90,7 +90,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       flexGrow: 1,
     },
-    typography: {
+    padding: {
       padding: theme.spacing(3),
     },
     demo1: {
@@ -113,20 +113,20 @@ export default function CustomizedTabs() {
   return (
     <div className={classes.root}>
       <div className={classes.demo1}>
-        <AntTabs value={value} onChange={handleChange}>
+        <AntTabs value={value} onChange={handleChange} aria-label="Ant example">
           <AntTab label="Tab 1" />
           <AntTab label="Tab 2" />
           <AntTab label="Tab 3" />
         </AntTabs>
-        <Typography className={classes.typography} />
+        <Typography className={classes.padding} />
       </div>
       <div className={classes.demo2}>
-        <StyledTabs value={value} onChange={handleChange}>
+        <StyledTabs value={value} onChange={handleChange} aria-label="Styled tabs example">
           <StyledTab label="Workflows" />
           <StyledTab label="Datasets" />
           <StyledTab label="Connections" />
         </StyledTabs>
-        <Typography className={classes.typography} />
+        <Typography className={classes.padding} />
       </div>
     </div>
   );

diff --git a/docs/src/pages/components/tabs/DisabledTabs.js b/docs/src/pages/components/tabs/DisabledTabs.js
@@ -12,7 +12,13 @@ export default function DisabledTabs() {
 
   return (
     <Paper square>
-      <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange}>
+      <Tabs
+        value={value}
+        indicatorColor="primary"
+        textColor="primary"
+        onChange={handleChange}
+        aria-label="Disabled tabs example"
+      >
         <Tab label="Active" />
         <Tab label="Disabled" disabled />
         <Tab label="Active" />

diff --git a/docs/src/pages/components/tabs/DisabledTabs.tsx b/docs/src/pages/components/tabs/DisabledTabs.tsx
@@ -12,7 +12,13 @@ export default function DisabledTabs() {
 
   return (
     <Paper square>
-      <Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange}>
+      <Tabs
+        value={value}
+        indicatorColor="primary"
+        textColor="primary"
+        onChange={handleChange}
+        aria-label="Disabled tabs example"
+      >
         <Tab label="Active" />
         <Tab label="Disabled" disabled />
         <Tab label="Active" />

diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js
@@ -6,20 +6,39 @@ import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
 
-function TabContainer({ children, dir }) {
   return (
-    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
-      {children}
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`full-width-tabpanel-${index}`}
+      aria-labelledby={`full-width-tab-${index}`}
+      {...other}
+    >
+      <Box p={3}>{children}</Box>
     </Typography>
   );
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
   dir: PropTypes.string.isRequired,
+  index: PropTypes.any.isRequired,
+  value: PropTypes.any.isRequired,
 };
 
+function a11yProps(index) {
+  return {
+    id: `full-width-tab-${index}`,
+    'aria-controls': `full-width-tabpanel-${index}`,
+  };
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.paper,
@@ -49,20 +68,27 @@ export default function FullWidthTabs() {
           indicatorColor="primary"
           textColor="primary"
           variant="fullWidth"
+          aria-label="Full width tabs example"
         >
-          <Tab label="Item One" />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
       <SwipeableViews
         axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
         index={value}
         onChangeIndex={handleChangeIndex}
       >
-        <TabContainer dir={theme.direction}>Item One</TabContainer>
-        <TabContainer dir={theme.direction}>Item Two</TabContainer>
-        <TabContainer dir={theme.direction}>Item Three</TabContainer>
+        <TabPanel value={value} index={0} dir={theme.direction}>
+          Item One
+        </TabPanel>
+        <TabPanel value={value} index={1} dir={theme.direction}>
+          Item Two
+        </TabPanel>
+        <TabPanel value={value} index={2} dir={theme.direction}>
+          Item Three
+        </TabPanel>
       </SwipeableViews>
     </div>
   );