fix(skip-to-content): add explicit href to component, add id to… (#607)

carbon-design-system · Dec 12, 2019 · 068fec5 · 068fec5 · vercel · Dec 12, 2019
1 parent 34e46f7
commit 068fec5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Container/Container.js b/packages/gatsby-theme-carbon/src/components/Container/Container.js
@@ -48,7 +48,11 @@ const Container = ({ children, homepage, theme }) => {
         role="presentation"
         tabIndex="-1"
       />
-      <main aria-hidden={overlayVisible} className={containerClassNames}>
+      <main
+        id="main-content"
+        aria-hidden={overlayVisible}
+        className={containerClassNames}
+      >
         {children}
       </main>
     </>

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js
@@ -36,7 +36,7 @@ const Header = ({ children }) => {
   return (
     <>
       <ShellHeader aria-label="Header" className={header}>
-        <SkipToContent className={skipToContent} />
+        <SkipToContent href="#main-content" className={skipToContent} />
         <HeaderMenuButton
           className={cx('bx--header__action--menu', headerButton)}
           aria-label="Open menu"