Compare commits
No commits in common. "keyboard-controls-3d2e91f2dc" and "main" have entirely different histories.
keyboard-c
...
main
16
README.md
16
README.md
@ -1,15 +1,3 @@
|
|||||||
# Tidepool Keyboard Demo
|
# tidepool-keyboard-demo
|
||||||
|
|
||||||
A dependency-free browser demo for moving an explorer between tidepool zones.
|
An accessible tiny browser demo for exploring a tidepool
|
||||||
|
|
||||||
## 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.
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user