[Tabs] Improve accessibility

mui · Jun 26, 2019 · c3f4bfd · c3f4bfd
1 parent 6290988
commit c3f4bfd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 24 deletions.
diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
@@ -6,15 +6,17 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 
-function TabContainer(props) {
+function TabPanel(props) {
+  const { children, ...other } = props;
+
   return (
-    <Typography component="div" style={{ padding: 8 * 3 }}>
-      {props.children}
+    <Typography component="div" role="tabpanel" style={{ padding: 8 * 3 }} {...other}>
+      {children}
     </Typography>
   );
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
@@ -35,16 +37,22 @@ export default function SimpleTabs() {
 
   return (
     <div className={classes.root}>
-      <AppBar position="static">
+      <AppBar position="static" aria-label="Simple tabs example">
         <Tabs value={value} onChange={handleChange}>
-          <Tab label="Item One" />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
+          <Tab label="Item One" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
+          <Tab label="Item Two" id="simple-tab-2" aria-controls="simple-tabpanel-2" />
+          <Tab label="Item Three" id="simple-tab-3" aria-controls="simple-tabpanel-3" />
         </Tabs>
       </AppBar>
-      {value === 0 && <TabContainer>Item One</TabContainer>}
-      {value === 1 && <TabContainer>Item Two</TabContainer>}
-      {value === 2 && <TabContainer>Item Three</TabContainer>}
+      <TabPanel hidden={value !== 0} id="simple-tabpanel-1" aria-labelledby="simple-tab-1">
+        Item One
+      </TabPanel>
+      <TabPanel hidden={value !== 1} id="simple-tabpanel-2" aria-labelledby="simple-tab-2">
+        Item Two
+      </TabPanel>
+      <TabPanel hidden={value !== 2} id="simple-tabpanel-3" aria-labelledby="simple-tab-3">
+        Item Three
+      </TabPanel>
     </div>
   );
 }
diff --git a/docs/src/pages/components/tabs/SimpleTabs.tsx b/docs/src/pages/components/tabs/SimpleTabs.tsx
@@ -6,19 +6,21 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 
-interface TabContainerProps {
+interface TabPanelProps {
   children?: React.ReactNode;
 }
 
-function TabContainer(props: TabContainerProps) {
+function TabPanel(props: TabPanelProps) {
+  const { children, ...other } = props;
+
   return (
-    <Typography component="div" style={{ padding: 8 * 3 }}>
-      {props.children}
+    <Typography component="div" role="tabpanel" style={{ padding: 8 * 3 }} {...other}>
+      {children}
     </Typography>
   );
 }
 
-TabContainer.propTypes = {
+TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
@@ -41,16 +43,22 @@ export default function SimpleTabs() {
 
   return (
     <div className={classes.root}>
-      <AppBar position="static">
+      <AppBar position="static" aria-label="Simple tabs example">
         <Tabs value={value} onChange={handleChange}>
-          <Tab label="Item One" />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
+          <Tab label="Item One" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
+          <Tab label="Item Two" id="simple-tab-2" aria-controls="simple-tabpanel-2" />
+          <Tab label="Item Three" id="simple-tab-3" aria-controls="simple-tabpanel-3" />
         </Tabs>
       </AppBar>
-      {value === 0 && <TabContainer>Item One</TabContainer>}
-      {value === 1 && <TabContainer>Item Two</TabContainer>}
-      {value === 2 && <TabContainer>Item Three</TabContainer>}
+      <TabPanel hidden={value !== 0} id="simple-tabpanel-1" aria-labelledby="simple-tab-1">
+        Item One
+      </TabPanel>
+      <TabPanel hidden={value !== 1} id="simple-tabpanel-2" aria-labelledby="simple-tab-2">
+        Item Two
+      </TabPanel>
+      <TabPanel hidden={value !== 2} id="simple-tabpanel-3" aria-labelledby="simple-tab-3">
+        Item Three
+      </TabPanel>
     </div>
   );
 }
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
@@ -390,13 +390,13 @@ class Tabs extends React.Component {
             })}
             style={this.state.scrollerStyle}
             ref={this.handleTabsRef}
-            role="tablist"
             onScroll={this.handleTabsScroll}
           >
             <div
               className={clsx(classes.flexContainer, {
                 [classes.centered]: centered && !scrollable,
               })}
+              role="tablist"
             >
               {children}
             </div>