Use Link

mui · Apr 19, 2019 · ced2131 · ced2131
1 parent 4e4ca97
commit ced2131
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 92 deletions.
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
@@ -15,14 +15,12 @@ const styles = theme => ({
       maxWidth: 'calc(100% - 175px)',
     },
     [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing(1),
       paddingRight: theme.spacing(5),
       maxWidth: 'calc(100% - 240px - 175px)',
     },
-  },
-  anchor: {
-    position: 'absolute',
-    marginTop: -125,
+    '&:focus': {
+      outline: 'none',
+    },
   },
   disableToc: {
     [theme.breakpoints.up('sm')]: {
@@ -38,14 +36,16 @@ function AppContent(props) {
   const { className, classes, children, disableToc } = props;
 
   return (
-    <main
+    <Container
+      component="main"
+      id="main-content"
+      tabIndex="-1"
       className={clsx(classes.root, className, {
         [classes.disableToc]: disableToc,
       })}
     >
-      <div className={classes.anchor} id="content" />
-      <Container>{children}</Container>
-    </main>
+      {children}
+    </Container>
   );
 }
 

diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
@@ -55,6 +55,7 @@ class AppDrawerNavItem extends React.Component {
     const activeElement = document.querySelector(`.${this.props.classes.active}`);
     if (activeElement && activeElement.scrollIntoView) {
       activeElement.scrollIntoView({});
+      document.body.scrollIntoView({});
     }
   }
 

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -5,12 +5,10 @@ import NProgress from 'nprogress';
 import Router from 'next/router';
 import Interpolate from '@trendmicro/react-interpolate';
 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
-import Link from '@material-ui/core/Link';
 import Tooltip from '@material-ui/core/Tooltip';
 import NoSsr from '@material-ui/core/NoSsr';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -25,6 +23,7 @@ import NProgressBar from '@material-ui/docs/NProgressBar';
 import FormatTextdirectionLToR from '@material-ui/icons/FormatTextdirectionLToR';
 import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL';
 import GithubIcon from '@material-ui/docs/svgIcons/GitHub';
+import Link from 'docs/src/modules/components/Link';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import AppSearch from 'docs/src/modules/components/AppSearch';
 import Notifications from 'docs/src/modules/components/Notifications';
@@ -101,12 +100,20 @@ const styles = theme => ({
   },
   skipNav: {
     position: 'absolute',
-    transition: theme.transitions.create('top'),
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+    transition: theme.transitions.create('top', {
+      duration: theme.transitions.duration.enteringScreen,
+      easing: theme.transitions.easing.easeOut,
+    }),
     left: theme.spacing(2),
-    top: -56,
+    top: theme.spacing(-4),
     zIndex: 100000,
     '&:focus': {
       top: theme.spacing(2),
+      transition: theme.transitions.create('top', {
+        easing: theme.transitions.easing.easeIn,
+      }),
     },
   },
   appBar: {
@@ -147,18 +154,6 @@ class AppFrame extends React.Component {
     this.canonical = canonical;
   }
 
-  handleKeyDown = event => {
-    // Use event.keyCode to support IE 11
-    if (
-      event.keyCode === 9 &&
-      document.activeElement.nodeName === 'BODY' &&
-      document.activeElement !== this.skipNavRef
-    ) {
-      event.preventDefault();
-      this.skipNavRef.focus();
-    }
-  };
-
   handleDrawerOpen = () => {
     this.setState({ mobileOpen: true });
   };
@@ -220,17 +215,9 @@ class AppFrame extends React.Component {
             <div className={classes.root}>
               <NProgressBar />
               <CssBaseline />
-              <Button
-                className={classes.skipNav}
-                variant="contained"
-                color="secondary"
-                href="#content"
-                ref={ref => {
-                  this.skipNavRef = ref;
-                }}
-              >
+              <Link color="secondary" className={classes.skipNav} href="#main-content">
                 Skip to content
-              </Button>
+              </Link>
               <Notifications />
               <MarkdownLinks />
               <AppBar className={appBarClassName}>

diff --git a/pages/index.js b/pages/index.js
@@ -38,10 +38,6 @@ const styles = theme => ({
   drawer: {
     width: 0,
   },
-  anchor: {
-    position: 'absolute',
-    marginTop: -125,
-  },
   hero: {
     paddingTop: 64 + 29,
     backgroundColor: theme.palette.background.paper,
@@ -123,60 +119,61 @@ class HomePage extends React.Component {
     return (
       <AppFrame classes={{ drawer: classes.drawer }}>
         <div className={classes.root}>
-          <div className={classes.anchor} id="content" />
           <Head />
-          <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}
-              />
-              <div>
-                <Typography
-                  variant="h3"
-                  component="h1"
-                  color="inherit"
-                  gutterBottom
-                  className={classes.title}
-                >
-                  {'MATERIAL-UI'}
-                </Typography>
-                <Typography variant="h5" component="h2" color="inherit">
-                  {t('strapline')}
-                </Typography>
-                <Button
-                  component={GettingStartedLink}
-                  className={classes.button}
-                  variant="outlined"
-                  color="primary"
-                >
-                  {t('getStarted')}
-                </Button>
-              </div>
-            </Container>
-          </div>
-          <div className={classes.social}>
-            <a
-              className="github-button"
-              href="https://github.com/mui-org/material-ui"
-              data-icon="octicon-star"
-              data-show-count="true"
-            >
-              Star
-            </a>
-            <a
-              className="twitter-follow-button"
-              href="https://twitter.com/@materialui"
-              data-show-screen-name="false"
-            >
-              Follow
-            </a>
-          </div>
-          <HomeQuickWord />
-          <HomeSteps />
-          <HomeBackers />
-          <HomeUsers />
+          <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}
+                />
+                <div>
+                  <Typography
+                    variant="h3"
+                    component="h1"
+                    color="inherit"
+                    gutterBottom
+                    className={classes.title}
+                  >
+                    {'MATERIAL-UI'}
+                  </Typography>
+                  <Typography variant="h5" component="h2" color="inherit">
+                    {t('strapline')}
+                  </Typography>
+                  <Button
+                    component={GettingStartedLink}
+                    className={classes.button}
+                    variant="outlined"
+                    color="primary"
+                  >
+                    {t('getStarted')}
+                  </Button>
+                </div>
+              </Container>
+            </div>
+            <div className={classes.social}>
+              <a
+                className="github-button"
+                href="https://github.com/mui-org/material-ui"
+                data-icon="octicon-star"
+                data-show-count="true"
+              >
+                Star
+              </a>
+              <a
+                className="twitter-follow-button"
+                href="https://twitter.com/@materialui"
+                data-show-screen-name="false"
+              >
+                Follow
+              </a>
+            </div>
+            <HomeQuickWord />
+            <HomeSteps />
+            <HomeBackers />
+            <HomeUsers />
+          </main>
           <HomeFooter />
         </div>
         <script