From 41b279d604025737b21d20e55e8908d1d6355879 Mon Sep 17 00:00:00 2001
From: Per Jansson <per.jansson@embark-studios.com>
Date: Tue, 11 Jan 2022 21:36:38 +0200
Subject: [PATCH 1/3] No focus styles on mobile

---
 stitches.config.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/stitches.config.ts b/stitches.config.ts
index 9a3c431..7444c11 100644
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -177,7 +177,7 @@ export const globalStyles = globalCss({
   },
 
   a: {
-    display: 'flex',
+    display: 'inline-block',
     color: '$colorful3',
     textDecoration: 'none',
   },
@@ -191,5 +191,7 @@ export const globalStyles = globalCss({
     minHeight: '100vh',
   },
 
-  ...focusStyles,
+  '@bp2': {
+    ...focusStyles,
+  },
 })

From dbccf8cd52edaff5c702d6257b51a09f7cfaef95 Mon Sep 17 00:00:00 2001
From: Per Jansson <per.jansson@embark-studios.com>
Date: Tue, 11 Jan 2022 21:48:19 +0200
Subject: [PATCH 2/3] Fix for project links

---
 src/components/projects.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/projects.tsx b/src/components/projects.tsx
index 8107105..09e4d74 100644
--- a/src/components/projects.tsx
+++ b/src/components/projects.tsx
@@ -212,6 +212,7 @@ const Asset = styled(ContentfulImage, {
 })
 
 const Anchor = styled('a', {
+  display: 'flex',
   borderRadius: '$radii5',
 })
 

From e398949356e87286226ba45d248777b6f389ff58 Mon Sep 17 00:00:00 2001
From: Per Jansson <per.jansson@embark-studios.com>
Date: Tue, 11 Jan 2022 22:02:38 +0200
Subject: [PATCH 3/3] Keyboard navigation in project list

---
 src/components/projects.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/projects.tsx b/src/components/projects.tsx
index 09e4d74..c2f0ea1 100644
--- a/src/components/projects.tsx
+++ b/src/components/projects.tsx
@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react'
+import React, { KeyboardEvent, useEffect } from 'react'
 import Link from 'next/link'
 import { motion, useAnimation } from 'framer-motion'
 import { useInView } from 'react-intersection-observer'
 import useDimensions from 'react-cool-dimensions'
+import { FocusScope, useFocusManager } from '@react-aria/focus'
 
 import { styled } from '../../stitches.config'
 import { useIndexPageData } from '../providers/IndexPageDataProvider'
@@ -59,14 +60,16 @@ export const Projects: React.FC = () => {
         Check out some projects I&apos;ve done as a consultant or freelancer
       </SectionTitle>
       <Spacer size="large" />
-      <section data-cy="projects">
-        {data?.projects.items.map((project) => (
-          <React.Fragment key={project.titleShort + project.client}>
-            <Project project={project} onSelect={handleOnSelect} />
-            <Spacer size="medium" />
-          </React.Fragment>
-        ))}
-      </section>
+      <FocusScope>
+        <section data-cy="projects">
+          {data?.projects.items.map((project) => (
+            <React.Fragment key={project.titleShort + project.client}>
+              <Project project={project} onSelect={handleOnSelect} />
+              <Spacer size="medium" />
+            </React.Fragment>
+          ))}
+        </section>
+      </FocusScope>
     </>
   )
 }
@@ -241,6 +244,7 @@ const Project: React.FC<ProjectProps> = ({ project, onSelect }) => {
   const { observe, width, height } = useDimensions<HTMLDivElement | null>()
   const controls = useAnimation()
   const [ref, inView] = useInView()
+  const focusManager = useFocusManager()
 
   useEffect(() => {
     if (inView) {
@@ -252,13 +256,24 @@ const Project: React.FC<ProjectProps> = ({ project, onSelect }) => {
     onSelect(project)
   }
 
+  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {
+    switch (event.key) {
+      case 'ArrowDown':
+        focusManager.focusNext()
+        break
+      case 'ArrowUp':
+        focusManager.focusPrevious()
+        break
+    }
+  }
+
   const placeholderProps: any = assetPlaceholder
     ? { placeholder: 'blur', blurDataURL: assetPlaceholder }
     : {}
 
   return (
     <Link href={`/projects/${project.sys.id}`} passHref>
-      <Anchor>
+      <Anchor onKeyDown={onKeyDown}>
         <ProjectContainer
           ref={ref}
           animate={controls}