Merge branch 'master' of https://github.com/rofrischmann/fela

robinweser · Dec 11, 2020 · 2def42e · 2def42e · vercel · Dec 11, 2020
2 parents c82ef69 + 936a125
commit 2def42e
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 33 deletions.
diff --git a/website/components/CodeBlock.js b/website/components/CodeBlock.js
@@ -5,6 +5,7 @@ import { useFela } from 'react-fela'
 import copyToClipboard from 'copy-to-clipboard'
 
 import nightOwl from 'prism-react-renderer/themes/github'
+import VisuallyHidden from './VisuallyHidden'
 
 export default function CodeBlock({
   children,
@@ -69,8 +70,9 @@ export default function CodeBlock({
                 transform: 'scale(0.95, 0.95)',
               },
             }}
-            aria-label="Copy code">
+            type="button">
             <i className={`far fa-${copied ? 'check' : 'copy'}`}></i>
+            <VisuallyHidden>Copy code</VisuallyHidden>
           </Box>
         </Box>
       )}

diff --git a/website/components/DocLayout.js b/website/components/DocLayout.js
@@ -12,6 +12,7 @@ import NavItem from './NavItem'
 import Template from './Template'
 import Layout from './Layout'
 import Heading from './Heading'
+import VisuallyHidden from './VisuallyHidden'
 
 import versions from '../data/versions.json'
 
@@ -49,6 +50,9 @@ function Headings({ headings }) {
 
   return (
     <Box
+      as="nav"
+      id="secondary-navigation"
+      aria-labelledby="toc-title"
       space={2}
       minWidth={200}
       display={['none', , , 'flex']}
@@ -71,8 +75,12 @@ function Headings({ headings }) {
           left: 'calc(100%  / 2 + 420px)',
         },
       }}>
-      <Box as="p" marginBottom={4} extend={{ fontWeight: 600, fontSize: 16 }}>
-        On This Page
+      <Box
+        as="h2"
+        marginBottom={4}
+        extend={{ fontWeight: 600, fontSize: 16 }}
+        id="toc-title">
+        Table of Contents
       </Box>
 
       {headings.map(([heading, id, level]) => (
@@ -299,7 +307,11 @@ export function Content({ navigationVisible, docsPath, children, ...props }) {
           ),
           hr: () => <Line />,
         }}>
-        <main style={{ display: navigationVisible ? 'none' : 'block' }}>
+        <main
+          role="main"
+          aria-label="Main content"
+          id="main"
+          style={{ display: navigationVisible ? 'none' : 'block' }}>
           {children}
         </main>
       </MDXProvider>
@@ -311,11 +323,7 @@ export default function DocLayout({ children, toc, version, headings }) {
   const [navigationVisible, setNavigationVisible] = useState(false)
   const { theme } = useFela()
   const router = useRouter()
-
   const flatNav = getFlatNav(toc)
-
-  console.log(flatNav)
-
   const docsPath = `/docs/${version}/`
   const currentPage = flatNav[router.pathname.substr(docsPath.length)]
 
@@ -354,7 +362,7 @@ export default function DocLayout({ children, toc, version, headings }) {
           href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css"
         />
         <link rel="stylesheet" href="/fonts/dank/dmvendor.css" />
-        <title>Fela - {currentPage}</title>
+        <title>{currentPage} — Fela</title>
       </Head>
       <Box>
         <Box
@@ -375,12 +383,27 @@ export default function DocLayout({ children, toc, version, headings }) {
             right: 0,
           }}>
           <Box
+            as="button"
+            type="button"
+            aria-controls="main-navigation"
             onClick={() => setNavigationVisible(!navigationVisible)}
-            extend={{ cursor: 'pointer', height: '100%', width: 16 }}>
+            extend={{
+              cursor: 'pointer',
+              height: '100%',
+              width: 16,
+              background: 'transparent',
+              padding: 0,
+              border: 0,
+              font: 'inherit',
+            }}>
             <i className={'fas fa-' + (navigationVisible ? 'times' : 'bars')} />
+            <VisuallyHidden>
+              {navigationVisible ? 'Close menu' : 'Open menu'}
+            </VisuallyHidden>
           </Box>
 
           <Box
+            as="p"
             grow={1}
             shrink={1}
             extend={{
@@ -393,12 +416,15 @@ export default function DocLayout({ children, toc, version, headings }) {
           </Box>
           <Link
             href={`https://github.com/robinweser/fela/edit/master/website/pages${router.pathname}.mdx`}>
-            Edit
+            Edit <VisuallyHidden>on GitHub</VisuallyHidden>
           </Link>
         </Box>
       </Box>
 
       <Box
+        as="nav"
+        id="main-navigation"
+        aria-labelledby="nav-title"
         minWidth={['100%', , 250]}
         paddingTop={[4, , 8]}
         paddingLeft={5}
@@ -421,6 +447,9 @@ export default function DocLayout({ children, toc, version, headings }) {
             right: 'calc(100% / 2 + 400px + 10 * 4px)',
           },
         }}>
+        <VisuallyHidden as="h2" id="nav-title">
+          Main navigation
+        </VisuallyHidden>
         <Box space={2} direction="row" alignItems="center">
           <Box as="label" htmlFor="version" extend={{ fontSize: 14 }}>
             Version
@@ -478,6 +507,11 @@ export default function DocLayout({ children, toc, version, headings }) {
                                 passHref>
                                 <Box
                                   as="a"
+                                  aria-current={
+                                    router.pathname === docsPath + subPath
+                                      ? 'page'
+                                      : undefined
+                                  }
                                   extend={{
                                     textDecoration: 'none',
                                     color:
@@ -506,6 +540,11 @@ export default function DocLayout({ children, toc, version, headings }) {
                       passHref>
                       <Box
                         as="a"
+                        aria-current={
+                          router.pathname === docsPath + path
+                            ? 'page'
+                            : undefined
+                        }
                         extend={{
                           textDecoration: 'none',
                           color:
@@ -552,8 +591,8 @@ export default function DocLayout({ children, toc, version, headings }) {
           paddingTop={[4, , , 8]}
           display={['none', , 'flex']}
           extend={{ fontSize: 14 }}>
-          <Box>Docs / {currentPage}</Box>
-          <Box>
+          <Box as="p">Docs / {currentPage}</Box>
+          <Box as="p">
             <Link
               href={`https://github.com/robinweser/fela/edit/master/website/pages${router.pathname}.mdx`}>
               <i className="fa fa-edit" /> Edit on GitHub

diff --git a/website/components/Heading.js b/website/components/Heading.js
@@ -51,24 +51,15 @@ export default function Heading({ level, children }) {
         marginBottom: level === 1 ? 30 : 10,
         lineHeight: 1.0,
         fontWeight: level === 1 ? 700 : level === 2 ? 500 : 600,
+        scrollMarginTop: 125,
         '> a': {
           color: theme.colors.foreground,
         },
-      }}>
-      {!id ? null : (
-        <Box
-          as="span"
-          id={id}
-          extend={{
-            marginTop: -125,
-            paddingBottom: 125,
-            medium: {
-              marginTop: -65,
-              paddingBottom: 65,
-            },
-          }}
-        />
-      )}
+        medium: {
+          scrollMarginTop: 65,
+        },
+      }}
+      id={id}>
       {text}
     </Box>
   )

diff --git a/website/components/Link.js b/website/components/Link.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Box } from 'kilvin'
 import { useFela } from 'react-fela'
+import VisuallyHidden from './VisuallyHidden'
 
 export default function Link({ href, children, extern, extend }) {
   const { theme } = useFela()
@@ -9,7 +10,7 @@ export default function Link({ href, children, extern, extend }) {
     <Box
       as="a"
       target={extern ? '_blank' : undefined}
-      rel={extern ? 'noopener' : undefined}
+      rel={extern ? 'noreferrer noopener' : undefined}
       href={href}
       extend={{
         display: 'inline',
@@ -22,6 +23,28 @@ export default function Link({ href, children, extern, extend }) {
         extend,
       }}>
       {children}
+      {extern && (
+        <span title="Opens a new tab">
+          <Box
+            as="svg"
+            aria-hidden="true"
+            focusable="false"
+            xmlns="https://www.w3.org/2000/svg"
+            viewBox="0 0 32 32"
+            extend={{
+              verticalAlign: '-2px',
+              color: 'inherit',
+              width: 16,
+              height: 16,
+              stroke: 'currentcolor',
+              strokeWidth: '2px',
+              display: 'inline-block',
+            }}>
+            <path d="M22 11L10.5 22.5M10.44 11H22v11.56" fill="none"></path>
+          </Box>
+          <VisuallyHidden>(new tab)</VisuallyHidden>
+        </span>
+      )}
     </Box>
   )
 }
diff --git a/website/components/Logo.js b/website/components/Logo.js
@@ -4,6 +4,8 @@ import { Box } from 'kilvin'
 export default function Logo() {
   return (
     <Box
+      aria-hidden="true"
+      focusable="false"
       as="svg"
       width="100%"
       height="100%"

diff --git a/website/components/Template.js b/website/components/Template.js
@@ -7,6 +7,7 @@ import { useFela } from 'react-fela'
 import Layout from './Layout'
 import Link from './Link'
 import NavItem from './NavItem'
+import VisuallyHidden from './VisuallyHidden'
 
 export default function Template({ children }) {
   const { theme } = useFela()
@@ -19,6 +20,7 @@ export default function Template({ children }) {
         direction="row"
         height={[50, , 44]}
         alignItems="center"
+        role="banner"
         extend={{
           backgroundColor: theme.colors.blue,
           position: 'fixed',
@@ -28,7 +30,7 @@ export default function Template({ children }) {
           zIndex: 2,
         }}>
         <Layout>
-          <Box as="nav" direction="row" justifyContent="space-between">
+          <Box direction="row" justifyContent="space-between">
             <Box direction="row">
               <NavItem path="/">Home</NavItem>
               <NavItem path="/docs">Docs</NavItem>
@@ -43,6 +45,7 @@ export default function Template({ children }) {
                     lineHeight: 0.6,
                   }}
                 />
+                <VisuallyHidden>Twitter</VisuallyHidden>
               </NavItem>
 
               <NavItem path="https://github.com/robinweser/fela">
@@ -54,12 +57,13 @@ export default function Template({ children }) {
                     lineHeight: 0.6,
                   }}
                 />
+                <VisuallyHidden>GitHub</VisuallyHidden>
               </NavItem>
             </Box>
           </Box>
         </Layout>
       </Box>
-      <Box as="main" grow={1} paddingTop={[12.5, , 11]}>
+      <Box grow={1} paddingTop={[12.5, , 11]}>
         {children}
       </Box>
     </Box>

diff --git a/website/components/VisuallyHidden.js b/website/components/VisuallyHidden.js
@@ -0,0 +1,28 @@
+import { Box } from 'kilvin'
+
+const style = {
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  WebkitClipPath: 'inset(50%)',
+  clipPath: 'inset(50%)',
+  position: 'absolute',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  border: 0,
+  padding: 0,
+  height: 1,
+  width: 1,
+}
+
+function useScreenReaderOnly() {
+  return {
+    style,
+  }
+}
+
+const VisuallyHidden = (props) => {
+  const { style } = useScreenReaderOnly()
+
+  return <Box as="span" extend={style} {...props} />
+}
+
+export default VisuallyHidden
diff --git a/website/pages/index.js b/website/pages/index.js
@@ -9,12 +9,13 @@ import Button from '../components/Button'
 import Logo from '../components/Logo'
 
 import companies from '../data/companies.json'
+import VisuallyHidden from '../components/VisuallyHidden'
 
 export default function Page() {
   const { theme } = useFela()
 
   return (
-    <>
+    <main id="main" role="main" aria-label="Main content">
       <Head>
         <title>Fela</title>
         <meta
@@ -37,6 +38,7 @@ export default function Page() {
         extend={{ backgroundColor: theme.colors.background }}>
         <Box width="100%" alignSelf="center" maxWidth={[300, , 500, , 550]}>
           <Logo />
+          <VisuallyHidden as="h1">Fela</VisuallyHidden>
         </Box>
         <Box
           alignSelf="center"
@@ -227,6 +229,6 @@ export default function Page() {
           })}
         </Box>
       </Box>
-    </>
+    </main>
   )
 }