Problem Description

Currently, the Block Palette and Workspace rely heavily on mouse interactions (drag-and-drop). This makes the application difficult or impossible to use for users relying on keyboard navigation or screen readers (a11y), which is a key goal for Sugar Labs.

Proposed Solution

I would like to propose and implement a comprehensive Keyboard Navigation strategy for the Block Palette.

Key Objectives:

1. Focus Management: Ensure all palette blocks are focusable (tabIndex="0") and visually distinct when active.
2. Keyboard Events:
   • Arrow Keys: Navigate selection between blocks in the palette.
   • Enter / Space: "Pick up" a block or insert it into the center of the workspace.
   • Esc: Cancel selection.
3. ARIA Compliance: Add appropriate aria-label and aria-description to blocks so screen readers identify them correctly (e.g., "Loop Block, Control Flow").

Implementation Details

• I plan to use React Refs to manage focus programmatically.
• I will create a custom hook (e.g., useKeyboardNavigation) to abstract the event listeners from the UI components.
• I will ensure this aligns with the existing Drag-and-Drop library (dnd-kit or similar) used in the project.

Request for Assignment

I have set up the environment locally and analyzed the Palette component structure. I am ready to start working on this immediately.

Could you assign this to me or provide feedback on this approach?