Add wraparound tidepool keyboard navigation

README.md

@@ -1,3 +1,15 @@
-# tidepool-keyboard-demo
+# Tidepool Keyboard Demo
 
-An accessible tiny browser demo for exploring a tidepool
+A dependency-free browser demo for moving an explorer between tidepool zones.
+
+## Keyboard controls
+
+- ArrowRight and ArrowDown move to the next zone.
+- ArrowLeft and ArrowUp move to the previous zone.
+- Movement wraps at both ends.
+
+## Review checklist
+
+- Confirm every action has a visible keyboard focus state.
+- Confirm the active zone is announced in a live region.
+- Confirm wraparound behavior is understandable without a pointer.

src/tidepool.js

@@ -0,0 +1,12 @@
+export const zones = ['shore', 'rocks', 'pool'];
+
+export function nextZone(currentIndex, direction) {
+  const step = direction === 'previous' ? -1 : 1;
+  return (currentIndex + step + zones.length) % zones.length;
+}
+
+export function directionForKey(key) {
+  if (key === 'ArrowLeft' || key === 'ArrowUp') return 'previous';
+  if (key === 'ArrowRight' || key === 'ArrowDown') return 'next';
+  return null;
+}