From c3f4bfd3bebf15c1ab5378acd5d678ae74552f70 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Wed, 27 Mar 2019 13:35:34 +0000
Subject: [PATCH] [Tabs] Improve accessibility

---
 docs/src/pages/components/tabs/SimpleTabs.js  | 30 ++++++++++-------
 docs/src/pages/components/tabs/SimpleTabs.tsx | 32 ++++++++++++-------
 packages/material-ui/src/Tabs/Tabs.js         |  2 +-
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
index c6373e5872b5f2..0f3cdc2e04c2de 100644
--- 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
index d025f823783c84..29638d63cace33 100644
--- 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
index ba7bbc038f70e1..e6d7cc3ba1f0c6 100644
--- 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>