@primer/gatsby-theme-doctocat 4.4.1 → 4.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.4.3
+
+### Patch Changes
+
+- [`5f2f390`](https://github.com/primer/doctocat/commit/5f2f3903e93b6a64743c38fead16eaaa14788c4e) [#586](https://github.com/primer/doctocat/pull/586) Thanks [@camertron](https://github.com/camertron)! - Wrap root node with an SSRProvider
+
+## 4.4.2
+
+### Patch Changes
+
+- [`84f8a7e`](https://github.com/primer/doctocat/commit/84f8a7e6b64b431a620b59e5dcb54366ccc3f5c6) [#565](https://github.com/primer/doctocat/pull/565) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Accessibility improvements
+
 ## 4.4.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

package/src/components/header.js

@@ -8,6 +8,7 @@ import MobileSearch from './mobile-search'
 import NavDrawer, {useNavDrawerState} from './nav-drawer'
 import NavDropdown, {NavDropdownItem} from './nav-dropdown'
 import Search from './search'
+import SkipLink from './skip-link'
 
 export const HEADER_HEIGHT = 66
 
@@ -21,7 +22,6 @@ function Header({isSearchEnabled}) {
       <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
         <Box
           as="header"
-          aria-labelledby="site-heading"
           sx={{
             display: 'flex',
             height: HEADER_HEIGHT,
@@ -31,6 +31,7 @@ function Header({isSearchEnabled}) {
             bg: 'canvas.default'
           }}
         >
+          <SkipLink />
           <Box sx={{display: 'flex', alignItems: 'center'}}>
             <Link
               href={siteMetadata.header.logoUrl}
@@ -42,56 +43,50 @@ function Header({isSearchEnabled}) {
             >
               <StyledOcticon icon={MarkGithubIcon} size="medium" />
             </Link>
-            <Box
-              as="h2"
-              id="site-heading"
-              sx={{fontSize: 'unset', fontWeight: 'unset', m: 0, display: 'flex', alignItems: 'center'}}
-            >
-              {siteMetadata.header.title ? (
+            {siteMetadata.header.title ? (
+              <Link
+                href={siteMetadata.header.url}
+                sx={{
+                  color: 'accent.fg',
+                  fontFamily: 'mono',
+                  display: [
+                    // We only hide "Primer" on small viewports if a shortName is defined.
+                    siteMetadata.shortName ? 'none' : 'inline-block',
+                    null,
+                    null,
+                    'inline-block'
+                  ]
+                }}
+              >
+                {siteMetadata.header.title}
+              </Link>
+            ) : null}
+            {siteMetadata.shortName ? (
+              <>
+                {siteMetadata.header.title && (
+                  <Text
+                    sx={{
+                      display: ['none', null, null, 'inline-block'],
+                      color: 'accent.fg',
+                      fontFamily: 'mono',
+                      mx: 2
+                    }}
+                  >
+                    /
+                  </Text>
+                )}
                 <Link
-                  href={siteMetadata.header.url}
+                  as={GatsbyLink}
+                  to="/"
                   sx={{
                     color: 'accent.fg',
-                    fontFamily: 'mono',
-                    display: [
-                      // We only hide "Primer" on small viewports if a shortName is defined.
-                      siteMetadata.shortName ? 'none' : 'inline-block',
-                      null,
-                      null,
-                      'inline-block'
-                    ]
+                    fontFamily: 'mono'
                   }}
                 >
-                  {siteMetadata.header.title}
+                  {siteMetadata.shortName}
                 </Link>
-              ) : null}
-              {siteMetadata.shortName ? (
-                <>
-                  {siteMetadata.header.title && (
-                    <Text
-                      sx={{
-                        display: ['none', null, null, 'inline-block'],
-                        color: 'accent.fg',
-                        fontFamily: 'mono',
-                        mx: 2
-                      }}
-                    >
-                      /
-                    </Text>
-                  )}
-                  <Link
-                    as={GatsbyLink}
-                    to="/"
-                    sx={{
-                      color: 'accent.fg',
-                      fontFamily: 'mono'
-                    }}
-                  >
-                    {siteMetadata.shortName}
-                  </Link>
-                </>
-              ) : null}
-            </Box>
+              </>
+            ) : null}
 
             {isSearchEnabled ? (
               <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>

package/src/components/layout.js

@@ -52,8 +52,6 @@ function Layout({children, pageContext}) {
           <Sidebar />
         </Box>
         <Box
-          as="main"
-          id="skip-nav"
           sx={{
             justifyContent: 'center',
             flexDirection: 'row-reverse',
@@ -82,7 +80,7 @@ function Layout({children, pageContext}) {
             </Box>
           ) : null}
           <Box sx={{width: '100%', maxWidth: '960px'}}>
-            <Box sx={{mb: 4}}>
+            <Box as="main" id="skip-nav" sx={{mb: 4}}>
               <Box sx={{alignItems: 'center', display: 'flex'}}>
                 <Heading as="h1">{title}</Heading>{' '}
               </Box>

package/src/components/nav-items.js

@@ -31,10 +31,10 @@ function NavItem({href, children}) {
 function NavItems({items}) {
   return (
     <>
-      <VisuallyHidden>
-        <h3 id="nav-heading">Site navigation</h3>
-      </VisuallyHidden>
-      <NavList aria-labelledby="nav-heading">
+      <NavList aria-label="Site">
+        <VisuallyHidden>
+          <h3>Site navigation</h3>
+        </VisuallyHidden>
         {items.map(item => (
           <React.Fragment key={item.title}>
             {item.children ? (

package/src/components/page-footer.js

@@ -20,7 +20,7 @@ function PageFooter({editUrl, contributors}) {
       }}
     >
       <VisuallyHidden>
-        <h3 id="footer-heading">Page footer</h3>
+        <h2 id="footer-heading">Footer</h2>
       </VisuallyHidden>
       <Box sx={{gridGap: 4, display: 'grid'}}>
         {editUrl ? (

package/src/components/wrap-page-element.js

@@ -1,7 +1,6 @@
 import {BaseStyles, themeGet} from '@primer/react'
 import React from 'react'
 import {createGlobalStyle} from 'styled-components'
-import SkipLink from './skip-link'
 
 const GlobalStyles = createGlobalStyle`
   body {
@@ -29,7 +28,6 @@ function wrapPageElement({element}) {
   return (
     <BaseStyles>
       <GlobalStyles />
-      <SkipLink />
       {element}
     </BaseStyles>
   )

package/src/components/wrap-root-element.js

@@ -1,3 +1,4 @@
+import {SSRProvider} from '@react-aria/ssr'
 import {MDXProvider} from '@mdx-js/react'
 import {ThemeProvider} from '@primer/react'
 import Link from './link'
@@ -52,9 +53,11 @@ const components = {
 
 function wrapRootElement({element}) {
   return (
-    <MDXProvider components={components}>
-      <ThemeProvider>{element}</ThemeProvider>
-    </MDXProvider>
+    <SSRProvider>
+      <MDXProvider components={components}>
+        <ThemeProvider>{element}</ThemeProvider>
+      </MDXProvider>
+    </SSRProvider>
   )
 }