@primer/gatsby-theme-doctocat 4.4.0 → 4.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.4.1
+
+### Patch Changes
+
+- [`2dbdb69`](https://github.com/primer/doctocat/commit/2dbdb69562a13e600a994063fd2736cacde68d45) [#560](https://github.com/primer/doctocat/pull/560) Thanks [@colebemis](https://github.com/colebemis)! - Move heading permalinks to after headings
+
+* [`d3ddb0a`](https://github.com/primer/doctocat/commit/d3ddb0afac5ce764b8fab261e1f90ed0235b7798) [#548](https://github.com/primer/doctocat/pull/548) Thanks [@maximedegreve](https://github.com/maximedegreve)! - Remove `Command line` from the `Design` menu since it's now merged in guidelines.
+
+- [`2883499`](https://github.com/primer/doctocat/commit/2883499f9309af8a6388f053541d45ad3b94d570) [#550](https://github.com/primer/doctocat/pull/550) Thanks [@maximedegreve](https://github.com/maximedegreve)! - Remove `Mobile` from the `Design` menu since it's now merged in our guidelines.
+
+* [`a8fd12e`](https://github.com/primer/doctocat/commit/a8fd12ec0bcfeb35604936ef89707f279ed7ee52) [#561](https://github.com/primer/doctocat/pull/561) Thanks [@colebemis](https://github.com/colebemis)! - Miscellaneous accessibility improvements
+
 ## 4.4.0
 
 ### Minor Changes

package/package.json

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

package/src/components/container.js

@@ -2,11 +2,7 @@ import {Box} from '@primer/react'
 import React from 'react'
 
 function Container({children}) {
-  return (
-    <Box id="skip-nav" sx={{width: '100%', maxWidth: 960, p: 5, mx: 'auto'}}>
-      {children}
-    </Box>
-  )
+  return <Box sx={{width: '100%', maxWidth: 960, p: 5, mx: 'auto'}}>{children}</Box>
 }
 
 export default Container

package/src/components/header.js

@@ -20,6 +20,8 @@ function Header({isSearchEnabled}) {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
         <Box
+          as="header"
+          aria-labelledby="site-heading"
           sx={{
             display: 'flex',
             height: HEADER_HEIGHT,
@@ -40,45 +42,56 @@ function Header({isSearchEnabled}) {
             >
               <StyledOcticon icon={MarkGithubIcon} size="medium" />
             </Link>
-            {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>
-                )}
+            <Box
+              as="h2"
+              id="site-heading"
+              sx={{fontSize: 'unset', fontWeight: 'unset', m: 0, display: 'flex', alignItems: 'center'}}
+            >
+              {siteMetadata.header.title ? (
                 <Link
-                  as={GatsbyLink}
-                  to="/"
+                  href={siteMetadata.header.url}
                   sx={{
                     color: 'accent.fg',
-                    fontFamily: 'mono'
+                    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.shortName}
+                  {siteMetadata.header.title}
                 </Link>
-              </>
-            ) : null}
+              ) : 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>
 
             {isSearchEnabled ? (
               <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>

package/src/components/heading.js

@@ -1,4 +1,4 @@
-import {Heading, Link} from '@primer/react'
+import {Heading, Link, StyledOcticon} from '@primer/react'
 import {LinkIcon} from '@primer/octicons-react'
 import themeGet from '@styled-system/theme-get'
 import GithubSlugger from 'github-slugger'
@@ -11,14 +11,17 @@ const StyledHeading = styled(Heading)`
   margin-top: ${themeGet('space.4')};
   margin-bottom: ${themeGet('space.3')};
   scroll-margin-top: ${HEADER_HEIGHT + 24}px;
+  line-height: ${themeGet('lineHeights.condensed')};
 
-  & .octicon-link {
-    visibility: hidden;
-  }
+  @media (hover: hover) {
+    & .octicon-link {
+      visibility: hidden;
+    }
 
-  &:hover .octicon-link,
-  &:focus-within .octicon-link {
-    visibility: visible;
+    &:hover .octicon-link,
+    &:focus-within .octicon-link {
+      visibility: visible;
+    }
   }
 `
 
@@ -31,28 +34,37 @@ function MarkdownHeading({children, ...props}) {
     <StyledHeading id={id} {...props}>
       <Link
         href={`#${id}`}
-        aria-label={`${text} permalink`}
         sx={{
-          p: 2,
-          ml: -32,
-          color: 'fg.default'
+          color: 'inherit',
+          '&:hover, &:focus': {
+            textDecoration: 'none'
+          }
         }}
       >
-        <LinkIcon className="octicon-link" verticalAlign="middle" />
+        {children}
+        <StyledOcticon
+          icon={LinkIcon}
+          className="octicon-link"
+          sx={{
+            ml: 2,
+            color: 'fg.muted',
+            // !important is needed here to override default icon styles
+            verticalAlign: 'middle !important'
+          }}
+        />
       </Link>
-      {children}
     </StyledHeading>
   )
 }
 
 const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
-  padding-bottom: ${themeGet('space.1')};
+  padding-bottom: ${themeGet('space.2')};
   font-size: ${themeGet('fontSizes.5')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
 `
 
 const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
-  padding-bottom: ${themeGet('space.1')};
+  padding-bottom: ${themeGet('space.2')};
   font-size: ${themeGet('fontSizes.4')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
 `

package/src/components/hero-layout.js

@@ -22,7 +22,7 @@ function HeroLayout({children, pageContext}) {
         <Box sx={{display: ['none', null, null, 'block']}}>
           <Sidebar />
         </Box>
-        <Box sx={{width: '100%'}}>
+        <Box as="main" id="skip-nav" sx={{width: '100%'}}>
           <Hero />
           <Container>
             {children}

package/src/components/layout.js

@@ -52,6 +52,7 @@ function Layout({children, pageContext}) {
           <Sidebar />
         </Box>
         <Box
+          as="main"
           id="skip-nav"
           sx={{
             justifyContent: 'center',
@@ -74,9 +75,9 @@ function Layout({children, pageContext}) {
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
-              <Text sx={{display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
+              <Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
                 On this page
-              </Text>
+              </Heading>
               <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
             </Box>
           ) : null}

package/src/components/mobile-search.js

@@ -1,5 +1,5 @@
 import {Box, Button} from '@primer/react'
-import {XIcon} from '@primer/octicons-react'
+import {SearchIcon, XIcon} from '@primer/octicons-react'
 import Downshift from 'downshift'
 import {AnimatePresence, motion} from 'framer-motion'
 import {navigate} from 'gatsby'
@@ -85,6 +85,7 @@ function MobileSearch({isOpen, onDismiss}) {
                       style={{width: '100%', originX: '100%'}}
                     >
                       <TextInput
+                        leadingVisual={SearchIcon}
                         {...getInputProps({
                           placeholder: `Search`,
                           sx: {width: '100%'}

package/src/components/nav-items.js

@@ -4,6 +4,7 @@ import {useLocation} from '@reach/router'
 import {Link as GatsbyLink, withPrefix} from 'gatsby'
 import preval from 'preval.macro'
 import React from 'react'
+import VisuallyHidden from './visually-hidden'
 
 // This code needs to run at build-time so it can access the file system.
 const repositoryUrl = preval`
@@ -29,43 +30,48 @@ function NavItem({href, children}) {
 
 function NavItems({items}) {
   return (
-    <NavList>
-      {items.map(item => (
-        <React.Fragment key={item.title}>
-          {item.children ? (
-            <NavList.Group title={item.title}>
-              {item.children.map(child => (
-                <NavItem key={child.title} href={child.url}>
-                  {child.title}
-                  {child.children ? (
-                    <NavList.SubNav>
-                      {child.children.map(subChild => (
-                        <NavItem key={subChild.title} href={subChild.url}>
-                          {subChild.title}
-                        </NavItem>
-                      ))}
-                    </NavList.SubNav>
-                  ) : null}
-                </NavItem>
-              ))}
-            </NavList.Group>
-          ) : (
-            <NavItem href={item.url}>{item.title}</NavItem>
-          )}
-        </React.Fragment>
-      ))}
-      {repositoryUrl ? (
-        <>
-          <NavList.Divider />
-          <NavList.Item href={repositoryUrl}>
-            GitHub
-            <NavList.TrailingVisual>
-              <LinkExternalIcon />
-            </NavList.TrailingVisual>
-          </NavList.Item>
-        </>
-      ) : null}
-    </NavList>
+    <>
+      <VisuallyHidden>
+        <h3 id="nav-heading">Site navigation</h3>
+      </VisuallyHidden>
+      <NavList aria-labelledby="nav-heading">
+        {items.map(item => (
+          <React.Fragment key={item.title}>
+            {item.children ? (
+              <NavList.Group title={item.title}>
+                {item.children.map(child => (
+                  <NavItem key={child.title} href={child.url}>
+                    {child.title}
+                    {child.children ? (
+                      <NavList.SubNav>
+                        {child.children.map(subChild => (
+                          <NavItem key={subChild.title} href={subChild.url}>
+                            {subChild.title}
+                          </NavItem>
+                        ))}
+                      </NavList.SubNav>
+                    ) : null}
+                  </NavItem>
+                ))}
+              </NavList.Group>
+            ) : (
+              <NavItem href={item.url}>{item.title}</NavItem>
+            )}
+          </React.Fragment>
+        ))}
+        {repositoryUrl ? (
+          <>
+            <NavList.Divider />
+            <NavList.Item href={repositoryUrl}>
+              GitHub
+              <NavList.TrailingVisual>
+                <LinkExternalIcon />
+              </NavList.TrailingVisual>
+            </NavList.Item>
+          </>
+        ) : null}
+      </NavList>
+    </>
   )
 }
 

package/src/components/page-footer.js

@@ -1,11 +1,14 @@
-import {Box, Link, StyledOcticon} from '@primer/react'
 import {PencilIcon} from '@primer/octicons-react'
+import {Box, Link, StyledOcticon} from '@primer/react'
 import React from 'react'
 import Contributors from './contributors'
+import VisuallyHidden from './visually-hidden'
 
 function PageFooter({editUrl, contributors}) {
   return editUrl || contributors.length > 0 ? (
     <Box
+      as="footer"
+      aria-labelledby="footer-heading"
       sx={{
         borderWidth: 0,
         borderTopWidth: 1,
@@ -16,6 +19,9 @@ function PageFooter({editUrl, contributors}) {
         borderColor: 'border.default'
       }}
     >
+      <VisuallyHidden>
+        <h3 id="footer-heading">Page footer</h3>
+      </VisuallyHidden>
       <Box sx={{gridGap: 4, display: 'grid'}}>
         {editUrl ? (
           <Link href={editUrl}>

package/src/components/search.js

@@ -1,3 +1,4 @@
+import {SearchIcon} from '@primer/octicons-react'
 import {Box, ThemeProvider} from '@primer/react'
 import Downshift from 'downshift'
 import {navigate} from 'gatsby'
@@ -46,10 +47,11 @@ function Search() {
       {({getInputProps, getItemProps, getMenuProps, getRootProps, isOpen, highlightedIndex}) => (
         <Box {...getRootProps({position: 'relative'})}>
           <TextInput
+            leadingVisual={SearchIcon}
             {...getInputProps({
               placeholder: `Search ${siteMetadata.title}`,
               sx: {
-                width: 240
+                width: 300
               }
             })}
           />

package/src/components/text-input.js

@@ -6,6 +6,12 @@ const TextInput = styled(PrimerTextInput)`
    * Otherwise, iOS browsers will zoom in when the input is focused.
    * TODO: Update font-size of TextInput in @primer/react.
    */
-  font-size: ${themeGet('fontSizes.2')} !important;
+  input {
+    font-size: ${themeGet('fontSizes.2')} !important;
+  }
+
+  input::placeholder {
+    color: ${themeGet('colors.fg.muted')} !important;
+  }
 `
 export default TextInput

package/src/components/visually-hidden.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+/**  Visually hide an element, but keep it accessible to screen readers. */
+const VisuallyHidden = styled.div`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+`
+
+export default VisuallyHidden

package/src/primer-nav.yml

@@ -3,15 +3,13 @@
     - title: Interface guidelines
       url: https://primer.style/design
     - title: Octicons
-      url: https://primer.style/octicons
-    - title: Presentations
-      url: https://primer.style/presentations
-    - title: Command line
-      url: https://primer.style/cli
-    - title: Mobile
-      url: https://primer.style/mobile
+      url: https://primer.style/design/foundations/icons
     - title: Desktop
-      url: https://primer.style/desktop
+      url: https://primer.style/design/native/desktop
+    - title: Mobile
+      url: https://primer.style/design/native/mobile
+    - title: CLI
+      url: https://primer.style/design/native/cli
 - title: Build
   children:
     - title: CSS
@@ -23,6 +21,6 @@
     - title: ViewComponents
       url: https://primer.style/view-components
 - title: Contribute
-  url: https://primer.style/contribute
+  url: https://primer.style/design/guides/contribute
 - title: About
-  url: https://primer.style/team
+  url: https://primer.style/design/guides/about