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.
|
||||
|
||||
## 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.
|
||||
An accessible tiny browser demo for exploring a tidepool
|
||||
@ -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