From ab8fbbecca941c5609cbbe1f07b068d1996a7bae Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sun, 1 Jan 2023 16:39:15 +1100
Subject: [PATCH] website: Add basic keyboard support for ranking items to
 improve accessibility

---
 website/src/components/Sortable/Sortable.tsx | 23 +++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
index 7ca761df..1ac95bf7 100644
--- a/website/src/components/Sortable/Sortable.tsx
+++ b/website/src/components/Sortable/Sortable.tsx
@@ -1,7 +1,20 @@
 import { Flex } from "@chakra-ui/react";
-import { closestCenter, DndContext, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  TouchSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
 import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
-import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { ReactNode, useEffect, useState } from "react";
 
@@ -31,7 +44,11 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
     );
   }, [items]);
 
-  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor));
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
 
   return (
     <DndContext