Website fixes (#6076)

* navigation and accessibility fixes - mobile nav * fixed header styles * fixed css * eslint Co-authored-by: Matt Barron <longhaul12@gmail.com> Co-authored-by: Thomas Walker <bladey@me.com>
keystonejs · Jul 9, 2021 · 8327398 · 8327398 · vercel · Jul 9, 2021
1 parent c5b16b5
commit 8327398
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/docs/components/Header.tsx b/docs/components/Header.tsx
@@ -32,6 +32,7 @@ function Logo() {
       css={mq({
         marginRight: [0, null, null, null, '1rem'],
         marginTop: '0.1rem',
+        whiteSpace: 'nowrap',
       })}
     >
       <Link href="/" passHref>
@@ -91,7 +92,13 @@ function LinkItem({ children, href }: { children: ReactNode; href: string }) {
 
   return (
     <span css={mq({ display: ['none', 'inline'], fontWeight: 600 })}>
-      <NavItem isActive={isActive} href={href} css={mq({ padding: ['0', null, '0 0.2rem'] })}>
+      <NavItem
+        isActive={isActive}
+        href={href}
+        css={{
+          padding: '0 !important',
+        }}
+      >
         {children}
       </NavItem>
     </span>
@@ -146,6 +153,7 @@ export function Header() {
       delete keysPressed[event.key];
     });
   }, []);
+
   const handleOpen = useCallback(() => {
     setMobileNavIsOpen(true);
     document.body.style.overflow = 'hidden';
@@ -177,7 +185,13 @@ export function Header() {
             'max-content auto max-content max-content max-content max-content max-content max-content',
             '15rem auto max-content max-content max-content max-content max-content max-content',
           ],
-          gap: ['var(--space-medium)', null, null, 'var(--space-large)', 'var(--space-xlarge)'],
+          gap: [
+            'var(--space-medium)',
+            'var(--space-large)',
+            'var(--space-medium)',
+            'var(--space-large)',
+            'var(--space-xlarge)',
+          ],
           justifyItems: 'start',
           alignItems: 'center',
           paddingTop: 'var(--space-xlarge)',
@@ -188,9 +202,7 @@ export function Header() {
           },
         })}
       >
-        <div>
-          <Logo />
-        </div>
+        <Logo />
 
         <div
           id="search-field-container"
@@ -256,13 +268,17 @@ export function Header() {
           <GitHub css={{ height: '1.5em' }} />
         </a>
         <HeaderContext.Provider value={{ mobileNavIsOpen }}>
-          <div ref={menuRef}>
+          <div
+            ref={menuRef}
+            css={mq({
+              display: ['inline-block', null, 'none'],
+            })}
+          >
             <button
               onClick={handleOpen}
               id="skip-link-navigation-btn"
               tabIndex={0}
               css={mq({
-                display: ['inline-block', null, 'none'],
                 appearance: 'none',
                 border: '0 none',
                 boxShadow: 'none',

diff --git a/docs/components/docs/Navigation.tsx b/docs/components/docs/Navigation.tsx
@@ -1,16 +1,15 @@
 /** @jsx jsx */
+import { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import parseISO from 'date-fns/parseISO';
 import { useRouter } from 'next/router';
 import { jsx } from '@emotion/react';
 import format from 'date-fns/format';
-import { HTMLAttributes, ReactNode } from 'react';
 import Link from 'next/link';
 
-import { AnchorHTMLAttributes } from 'react';
+import { useMediaQuery } from '../../lib/media';
 import { useHeaderContext } from '../Header';
 import { Badge } from '../primitives/Badge';
 import { Type } from '../primitives/Type';
-import { useMediaQuery } from '../../lib/media';
 
 type SectionProps = { label: string; children: ReactNode };
 export function Section({ label, children }: SectionProps) {
@@ -25,9 +24,11 @@ export function Section({ label, children }: SectionProps) {
         as="h3"
         look="body16bold"
         margin="var(--space-xlarge) 0 var(--space-large) 0"
-        font-weight="700"
         color="var(--text-heading)"
-        css={{ textTransform: 'uppercase' }}
+        css={{
+          textTransform: 'uppercase',
+          fontWeight: 700,
+        }}
       >
         {label}
       </Type>
@@ -78,9 +79,13 @@ type PrimaryNavItemProps = {
 export function PrimaryNavItem({ href, children }: PrimaryNavItemProps) {
   const { pathname } = useRouter();
   let isActive = pathname === href;
+  const ctx = useHeaderContext();
+  const isOpen = ctx ? ctx.mobileNavIsOpen : true;
+
   return (
     <Link href={href} passHref>
       <a
+        tabIndex={isOpen ? 0 : -1}
         css={{
           display: 'block',
           fontSize: '1rem',

diff --git a/docs/components/primitives/Highlight.tsx b/docs/components/primitives/Highlight.tsx
@@ -40,7 +40,7 @@ export function Highlight({ look = 'grad1', as: Tag = 'span', ...props }: Highli
         color: 'transparent',
         // Fixes the "gradient text gets clipped when wrapping across lines" bug in Safari
         // Thanks to https://forum.webflow.com/t/multi-line-gradient-text-safari-ios-fix-i-e-prevent-disappearing-text/135029
-        '-webkit-box-decoration-break': 'clone',
+        WebkitBoxDecorationBreak: 'clone',
       }}
       {...props}
     />

diff --git a/docs/lib/TOKENS.ts b/docs/lib/TOKENS.ts
@@ -90,7 +90,6 @@ export const COLORS = {
     '--text-heading': '#f7f9fc',
     '--text-disabled': '#627693',
     '--code': '#cbd5e0',
-    // '--code-bg': '#2d3748',
     '--code-bg': '#1f2631',
     '--shadow': 'rgba(0, 0, 0, 0.2)',