diff --git a/README.md b/README.md index 262409d..202f83e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ -# tidepool-keyboard-demo +# Tidepool Keyboard Demo -An accessible tiny browser demo for exploring a tidepool \ No newline at end of file +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. diff --git a/src/tidepool.js b/src/tidepool.js new file mode 100644 index 0000000..716664a --- /dev/null +++ b/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; +}