feat(a11y): Implement Keyboard Accessibility for Palette Navigation (Phase 2)

[zealot-zew]

Description

This PR implements Phase 2 of the accessibility (A11y) roadmap for Music Blocks, introducing full keyboard navigation within the Palette.

Previously, the palette was only accessible via mouse interactions. With this update, users can now enter a "focus mode" on the palette and navigate through all sections (e.g., Graphics, Pen, Media) and individual blocks using the arrow keys. This is a critical step towards making the platform WCAG compliant and accessible to power users and those relying on assistive technology.

Key Changes

• Focus Mode: Clicking on the palette now triggers a focus state, allowing the DOM to capture keyboard events specific to the palette.
• Arrow Key Navigation: Once focused, users can utilize the arrow keys to traverse:
  • Up / Down: Move vertically between palette categories (Search, Graphics, Pen, etc.).
  • Left / Right: Enter a category and move horizontally/vertically to access specific blocks within that category.

Regression Checks

• Mouse Functionality: Explicitly verified that none of the existing mouse functionality has changed. Users can still click, drag, and interact with the palette using a mouse exactly as before without interference from the new keyboard event listeners.

Video:

Screen.Recording.2026-01-26.at.4.08.43.PM.mov

Future Work (Phase 3)

This PR focuses strictly on intra-palette navigation. The next iteration (Phase 3) will introduce Tab key functionality to allow users to move focus across high-level interface regions, specifically navigating between the Palette, Toolbar, and Workspace.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[zealot-zew]

Hey @walterbender since the #5260 got merged, can you review the palette navigation so i can add the tab feature to switch from palette to toolbar.

[zealot-zew]

@walterbender sorry for the notification sound, but this PR is been sitting here for so long. Please review