[docs] Improve homepage accessibility (#18745)

mui · Dec 9, 2019 · d30e5ae · d30e5ae
1 parent 9c16b55
commit d30e5ae
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.