Skip to content

feat: opt-in keyboard accessibility (#24) - #68

Merged
Spikeysanju merged 1 commit into
mainfrom
feat/keyboard-a11y-opt-in
Jul 19, 2026
Merged

feat: opt-in keyboard accessibility (#24)#68
Spikeysanju merged 1 commit into
mainfrom
feat/keyboard-a11y-opt-in

Conversation

@Spikeysanju

Copy link
Copy Markdown
Contributor

Summary

Implements #24 keyboard accessibility as an opt-in third input path (alongside HTML5 + pointer), without breaking existing mouse/touch behavior.

Usage

use:draggable={{ container: index.toString(), dragData: item, keyboard: true }}
Key Action
Tab Focus item (tabindex=0 only when enabled)
Space / Enter Grab or drop
↑↓ (←→ horizontal) Move drop preview among registered droppables
Escape Cancel (no onDrop)

Architecture

  • Droppable registry — mount/unmount registration; deepest-target preference (https://sveltednd.thisux.com/nested doesnt do anything other than reorder groups #27)
  • Keyboard session — grab / move / drop / cancel; same onDrop + finalizeDropSession as pointer
  • Live region — assertive announcements (grab/move/drop/cancel)
  • dndState.dragInput'html5' | 'pointer' | 'keyboard' | null (additive)
  • Default off → zero tabindex/listener changes for existing apps

Demo

  • /keyboard — sortable list with keyboard enabled

Follow-ups (not in this PR)

  • Cross-container Kanban navigation (navigation: 'containers')
  • Roving tabindex; default-on only in 1.0 if desired

Test plan

  • bun run test — 108 tests pass
  • bun run check / lint / package
  • Manual: /keyboard — Tab → Space → arrows → Space; Escape cancel
  • Manual: mouse/touch on other demos still work with no keyboard option
  • Optional: VoiceOver/NVDA announcements

Closes #24

Enable Space/Enter grab and drop, arrow-key target movement, and Escape
cancel via keyboard: true on draggable. Register droppables for geometry
navigation, announce status with an assertive live region, and keep the
existing onDrop contract for pointer and HTML5 paths.
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying sveltednd with  Cloudflare Pages  Cloudflare Pages

Latest commit: 24d13de
Status: ✅  Deploy successful!
Preview URL: https://15963998.sveltednd.pages.dev
Branch Preview URL: https://feat-keyboard-a11y-opt-in.sveltednd.pages.dev

View logs

@Spikeysanju Spikeysanju self-assigned this Jul 19, 2026
@Spikeysanju Spikeysanju added the enhancement New feature or request label Jul 19, 2026
@Spikeysanju
Spikeysanju merged commit e75485c into main Jul 19, 2026
3 checks passed
@Spikeysanju
Spikeysanju deleted the feat/keyboard-a11y-opt-in branch July 19, 2026 06:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Any plans to make this accessible?

1 participant