Skip to content

Add keyboard navigation and accessible insertion for block palette (a11y)#520

Open
Dev10-sys wants to merge 1 commit into
sugarlabs:developfrom
Dev10-sys:feat/keyboard-navigation-palette
Open

Add keyboard navigation and accessible insertion for block palette (a11y)#520
Dev10-sys wants to merge 1 commit into
sugarlabs:developfrom
Dev10-sys:feat/keyboard-navigation-palette

Conversation

@Dev10-sys

@Dev10-sys Dev10-sys commented Feb 26, 2026

Copy link
Copy Markdown

Summary

This PR introduces keyboard navigation support for the Block Palette to improve accessibility (a11y) and reduce reliance on mouse-only interactions.

Users can now navigate blocks using arrow keys and insert them into the workspace using the keyboard.


What’s Added

1. Focus Management

  • All palette blocks are focusable via tabIndex={0}
  • Clear focus order based on rendered category grouping

2. Keyboard Controls

  • ↑ / ↓ → Navigate between blocks in the palette
  • Enter / Space → Insert selected block into workspace (center position)
  • Escape → Remove focus

3. Workspace Integration

  • Added a Recoil atom (keyboardInsertStateAtom) for controlled communication between palette and workspace
  • Workspace listens for keyboard-triggered insertions and reuses existing brick factory logic
  • No changes to drag-and-drop behavior

What Was NOT Changed

  • Drag-and-drop behavior remains untouched
  • Pointer-based brick movement remains unchanged
  • Category grouping and search logic unchanged
  • No architectural refactoring

Implementation Notes

  • Insertion logic is reused via existing brick factory methods
  • Keyboard insertion defaults to center of visible workspace
  • Atom state resets after insertion to avoid stale triggers
  • No global event listeners were introduced

Why This Matters

Improves accessibility for:

  • Keyboard-only users
  • Users with motor impairments
  • Screen reader workflows

Aligns with Sugar Labs accessibility goals.


Testing

  • Verified arrow navigation across filtered and grouped bricks
  • Verified Enter/Space inserts correct block type
  • Verified drag-and-drop still works
  • Verified no regressions in workspace behavior

Fixes #498

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Proposal: Implement Keyboard Navigation for Block Palette (Accessibility)

1 participant