feat(a11y): Implement keyboard navigation for Main Toolbar and Aux Navigation (Phase 1) (#5260)

This PR introduces full keyboard accessibility to the top navigation bars (Main Toolbar and Aux Nav), marking Phase 1 of the Music Blocks accessibility.

The goal is to allow users to navigate and interact with the interface entirely without a mouse, while preserving existing mouse functionality. This implementation focuses on the header section, allowing traversal between buttons using arrow keys and activation via the Enter key.

Author: zealot-zew

dist/css/style.css

@@ -104,4 +104,30 @@ input[type="range"]:focus::-ms-fill-upper {
   position: absolute;
   cursor: pointer;
 }
+
+/* Keyboard navigation focus state for toolbar buttons */
+.toolbar-btn-focused {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+/* Dark mode focus - brighten the background */
+body.dark .toolbar-btn-focused,
+.dark-theme .toolbar-btn-focused {
+  background-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* Keyboard navigation focus state for dropdown menu items */
+.dropdown-item-focused {
+  background-color: rgba(0, 150, 136, 0.2) !important;
+}
+
+/* Keyboard navigation focus state for modal dialog buttons */
+.modal-btn-focused {
+  outline: 3px solid #009688 !important;
+  outline-offset: 2px;
+  box-shadow: 0 0 8px rgba(0, 150, 136, 0.5) !important;
+}
+
 html, body { overscroll-behavior-x: none; }

js/__tests__/toolbar.test.js

@@ -37,30 +37,37 @@ global.window = {
     navigator: { language: "en-US" },
     document: {
         getElementById: jest.fn(() => ({ style: {} }))
-    }
+    },
+    getComputedStyle: jest.fn(() => ({ display: "block", visibility: "visible" }))
 };
 
 global.localStorage = window.localStorage;
 
 const Toolbar = require("../toolbar");
 
-global.document.getElementById = jest.fn(id => ({
+const createMockElement = id => ({
     id,
     style: {},
     setAttribute: jest.fn(),
+    getAttribute: jest.fn(),
     innerHTML: "",
-    classList: { add: jest.fn() },
-    appendChild: jest.fn()
-}));
+    classList: {
+        add: jest.fn(),
+        remove: jest.fn(),
+        contains: jest.fn()
+    },
+    appendChild: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    querySelectorAll: jest.fn(() => []),
+    querySelector: jest.fn(() => null),
+    focus: jest.fn(),
+    click: jest.fn(),
+    getBoundingClientRect: jest.fn(() => ({ top: 0, left: 0, width: 10, height: 10 }))
+});
 
-global.docById = jest.fn(id => ({
-    id,
-    setAttribute: jest.fn(),
-    innerHTML: "",
-    style: {},
-    classList: { add: jest.fn() },
-    appendChild: jest.fn()
-}));
+global.document.getElementById = jest.fn(createMockElement);
+global.docById = jest.fn(createMockElement);
 
 global._ = jest.fn(str => str);
 
@@ -136,7 +143,10 @@ describe("Toolbar Class", () => {
             return {
                 setAttribute: jest.fn(),
                 style: {},
-                classList: { add: jest.fn() }
+                classList: { add: jest.fn() },
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn(),
+                querySelectorAll: jest.fn(() => [])
             };
         });
 
@@ -179,7 +189,9 @@ describe("Toolbar Class", () => {
             }
         };
 
-        global.docById = jest.fn(id => elements[id]);
+        global.docById = jest.fn(
+            id => elements[id] || { addEventListener: jest.fn(), querySelectorAll: jest.fn() }
+        );
         global.document = {
             body: {
                 style: {
@@ -235,7 +247,9 @@ describe("Toolbar Class", () => {
             }
         };
 
-        global.docById.mockImplementation(id => elements[id] || {});
+        global.docById.mockImplementation(
+            id => elements[id] || { addEventListener: jest.fn(), querySelectorAll: jest.fn() }
+        );
 
         const mockActivity = {
             hideMsgs: jest.fn(),
@@ -268,7 +282,11 @@ describe("Toolbar Class", () => {
         const recordButton = { className: "recording" };
 
         global.docById.mockImplementation(id =>
-            id === "stop" ? stopIcon : id === "record" ? recordButton : {}
+            id === "stop"
+                ? stopIcon
+                : id === "record"
+                ? recordButton
+                : { addEventListener: jest.fn(), querySelectorAll: jest.fn() }
         );
 
         const mockOnClick = jest.fn();
@@ -288,14 +306,19 @@ describe("Toolbar Class", () => {
     test("renderNewProjectIcon displays modal and handles confirmation", () => {
         const elements = {
             "modal-container": {
-                style: { display: "" }
+                style: { display: "" },
+                setAttribute: jest.fn(),
+                addEventListener: jest.fn(),
+                removeEventListener: jest.fn()
             },
             "newdropdown": {
                 innerHTML: "",
                 appendChild: jest.fn()
             }
         };
-        global.docById = jest.fn(id => elements[id]);
+        global.docById.mockImplementation(
+            id => elements[id] || { addEventListener: jest.fn(), querySelectorAll: jest.fn() }
+        );
         global.document = {
             createElement: jest.fn(tagName => ({
                 tagName,