From d30e5ae648d7b499161f4dd31da8c846d99a990e Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 9 Dec 2019 21:11:09 +0000
Subject: [PATCH] [docs] Improve homepage accessibility (#18745)

---
 README.md                                     |  2 +-
 docs/pages/index.js                           |  6 +-----
 docs/src/modules/components/HomeFooter.js     | 21 ++++++++++---------
 docs/src/modules/components/HomeSteps.js      |  2 ++
 docs/src/modules/components/HomeUsers.js      |  2 +-
 docs/src/modules/components/backers.md        |  2 +-
 .../pages/discover-more/backers/backers.md    |  2 +-
 7 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 41d8dc9107a2dc..bb70907cb9ec55 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.
diff --git a/docs/pages/index.js b/docs/pages/index.js
index bd38b27bdf62fe..5678100bf260e0 100644
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@@ -117,11 +117,7 @@ export default function HomePage() {
         <main id="main-content" tabIndex="-1">
           <div className={classes.hero}>
             <Container maxWidth="md" className={classes.content}>
-              <img
-                src="/static/images/material-ui-logo.svg"
-                alt="Material-UI Logo"
-                className={classes.logo}
-              />
+              <img src="/static/images/material-ui-logo.svg" alt="" className={classes.logo} />
               <div>
                 <Typography
                   variant="h3"
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
index ada228f0ef1d3c..58dfa3347fc196 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/HomeFooter.js
@@ -56,14 +56,14 @@ function HomeFooter(props) {
       <Container maxWidth="md">
         <footer className={classes.footer}>
           <Grid container>
-            <Grid item xs={12} md={3}>
+            <Grid item xs={12} sm={4}>
               <div className={classes.logo}>
-                <img src="/static/images/material-ui-logo.svg" alt="Material-UI Logo" />
+                <img src="/static/images/material-ui-logo.svg" alt="" />
                 <Typography color="primary">Material-UI</Typography>
               </div>
             </Grid>
-            <Grid item xs={6} md={3} className={classes.list}>
-              <Typography component="h3" gutterBottom>
+            <Grid item xs={6} sm={4} className={classes.list}>
+              <Typography component="h2" gutterBottom>
                 {t('footerCommunity')}
               </Typography>
               <ul>
@@ -97,8 +97,8 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} md={3} className={classes.list}>
-              <Typography component="h3" gutterBottom>
+            <Grid item xs={6} sm={4} className={classes.list}>
+              <Typography component="h2" gutterBottom>
                 {t('footerResources')}
               </Typography>
               <ul>
@@ -119,15 +119,16 @@ function HomeFooter(props) {
                 </li>
               </ul>
             </Grid>
-            <Grid item xs={6} md={3}>
-              <ul className={classes.list} />
-            </Grid>
           </Grid>
           <Typography className={classes.version} color="textSecondary" variant="body2">
             <Interpolate
               replacement={{
                 versionNumber: (
-                  <Link color="inherit" href="https://material-ui.com/versions/">
+                  <Link
+                    color="inherit"
+                    href="https://material-ui.com/versions/"
+                    aria-label={`v${process.env.LIB_VERSION}. View versions page.`}
+                  >
                     {`v${process.env.LIB_VERSION}`}
                   </Link>
                 ),
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index 6e58f0c9715fec..95bade38a3dda2 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -199,6 +199,8 @@ function HomeSteps(props) {
             data-ga-event-action="click"
             data-ga-event-label="home-image"
             className={classes.link}
+            aria-hidden="true"
+            tabindex="-1"
           >
             <NoSsr>
               <img
diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js
index 0c5ba33e20fd2f..4809f06f03c8ef 100644
--- a/docs/src/modules/components/HomeUsers.js
+++ b/docs/src/modules/components/HomeUsers.js
@@ -87,7 +87,7 @@ function HomeUsers(props) {
       <Divider />
       <NoSsr>
         <Container maxWidth="md" className={classes.container}>
-          <Typography variant="h4" align="center" gutterBottom>
+          <Typography variant="h4" component="h2" align="center" gutterBottom>
             {t('whosUsing')}
           </Typography>
           <Typography variant="body1" align="center" gutterBottom>
diff --git a/docs/src/modules/components/backers.md b/docs/src/modules/components/backers.md
index 2307b02953ebcf..a0ee6ab6438db4 100644
--- a/docs/src/modules/components/backers.md
+++ b/docs/src/modules/components/backers.md
@@ -21,7 +21,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.
diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md
index 569fa2fa194664..a75b1b97316bad 100644
--- a/docs/src/pages/discover-more/backers/backers.md
+++ b/docs/src/pages/discover-more/backers/backers.md
@@ -25,7 +25,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy" /></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy" /></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month and more to Material-UI.