Fix/keyboard accessibility

src/components/AIChatPanel.tsx

@@ -400,7 +400,17 @@ export const AIChatPanel = () => {
               <span className="text-xs text-gray-600 mr-1" style={{color: textColor}}>Context:</span>
               {/* TemplateMark Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle TemplateMark context"
+                aria-pressed={includeTemplateMarkContent}
                 onClick={() => handleTemplateMarkToggle(!includeTemplateMarkContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleTemplateMarkToggle(!includeTemplateMarkContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeTemplateMarkContent
@@ -435,7 +445,17 @@ export const AIChatPanel = () => {
               </div>
               {/* Concerto Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle Concerto context"
+                aria-pressed={includeConcertoModelContent}
                 onClick={() => handleConcertoModelToggle(!includeConcertoModelContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleConcertoModelToggle(!includeConcertoModelContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeConcertoModelContent
@@ -470,7 +490,17 @@ export const AIChatPanel = () => {
               </div>
               {/* Data Button */}
               <div
+                role="button"
+                tabIndex={0}
+                aria-label="Toggle Data context"
+                aria-pressed={includeDataContent}
                 onClick={() => handleDataToggle(!includeDataContent)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleDataToggle(!includeDataContent);
+                  }
+                }}
                 className={
                   `px-1 py-0.5 text-xs rounded-full flex items-center cursor-pointer border transition-colors
                   ${includeDataContent

src/components/FullScreenModal.tsx

@@ -38,8 +38,17 @@ const FullScreenModal: React.FC = () => {
     <>
       <MdFullscreen
         size={24}
+        role="button"
+        tabIndex={0}
+        aria-label="Open fullscreen preview"
         style={{ cursor: "pointer" }}
         onClick={() => setOpen(true)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
       />
       <Modal
         title="Output"

src/components/PlaygroundSidebar.tsx

@@ -163,6 +163,12 @@ const PlaygroundSidebar = () => {
             aria-label={title}
             tabIndex={0}
             onClick={onClick}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick?.();
+              }
+            }}
             className={`group playground-sidebar-nav-item ${
               active ? 'playground-sidebar-nav-item-active' : 'playground-sidebar-nav-item-inactive'
             } tour-${title.toLowerCase().replace(' ', '-')}`}
@@ -188,6 +194,12 @@ const PlaygroundSidebar = () => {
             aria-label={title}
             tabIndex={0}
             onClick={onClick}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            }}
             className={`group playground-sidebar-nav-bottom-item tour-${title.toLowerCase().replace(' ', '-')}`}
           >
             <Icon size={18} />

src/tests/components/KeyboardAccessibility.test.tsx

@@ -0,0 +1,124 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import PlaygroundSidebar from "../../components/PlaygroundSidebar";
+import { vi } from "vitest";
+
+// Mock the store
+const mockSetEditorsVisible = vi.fn();
+const mockSetPreviewVisible = vi.fn();
+const mockSetProblemPanelVisible = vi.fn();
+const mockSetAIChatOpen = vi.fn();
+const mockSetSettingsOpen = vi.fn();
+
+vi.mock("../../store/store", () => ({
+  default: () => ({
+    isEditorsVisible: true,
+    isPreviewVisible: true,
+    isProblemPanelVisible: false,
+    isAIChatOpen: false,
+    setEditorsVisible: mockSetEditorsVisible,
+    setPreviewVisible: mockSetPreviewVisible,
+    setProblemPanelVisible: mockSetProblemPanelVisible,
+    setAIChatOpen: mockSetAIChatOpen,
+    setSettingsOpen: mockSetSettingsOpen,
+    generateShareableLink: vi.fn(() => "https://example.com"),
+    textColor: "#000000",
+    backgroundColor: "#ffffff",
+  }),
+}));
+
+vi.mock("../../components/Tour", () => ({
+  default: { start: vi.fn() },
+}));
+
+vi.mock("../../components/FullScreenModal", () => ({
+  default: () => <div data-testid="fullscreen-modal">FullScreen</div>,
+}));
+
+vi.mock("../../components/SettingsModal", () => ({
+  default: () => <div data-testid="settings-modal">Settings</div>,
+}));
+
+describe("Keyboard Accessibility", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("PlaygroundSidebar - Top Nav", () => {
+    it("activates Editor button on Enter key", () => {
+      render(<PlaygroundSidebar />);
+      const editorButton = screen.getByRole("button", { name: /Editor/i });
+      fireEvent.keyDown(editorButton, { key: "Enter" });
+      expect(mockSetEditorsVisible).toHaveBeenCalled();
+    });
+
+    it("activates Editor button on Space key", () => {
+      render(<PlaygroundSidebar />);
+      const editorButton = screen.getByRole("button", { name: /Editor/i });
+      fireEvent.keyDown(editorButton, { key: " " });
+      expect(mockSetEditorsVisible).toHaveBeenCalled();
+    });
+
+    it("does not activate Editor button on other keys", () => {
+      render(<PlaygroundSidebar />);
+      const editorButton = screen.getByRole("button", { name: /Editor/i });
+      fireEvent.keyDown(editorButton, { key: "Tab" });
+      expect(mockSetEditorsVisible).not.toHaveBeenCalled();
+    });
+
+    it("activates Preview button on Enter key", () => {
+      render(<PlaygroundSidebar />);
+      const previewButton = screen.getByRole("button", { name: /Preview/i });
+      fireEvent.keyDown(previewButton, { key: "Enter" });
+      expect(mockSetPreviewVisible).toHaveBeenCalled();
+    });
+
+    it("activates Problems button on Space key", () => {
+      render(<PlaygroundSidebar />);
+      const problemsButton = screen.getByRole("button", { name: /Problems/i });
+      fireEvent.keyDown(problemsButton, { key: " " });
+      expect(mockSetProblemPanelVisible).toHaveBeenCalled();
+    });
+
+    it("activates AI Assistant button on Enter key", () => {
+      render(<PlaygroundSidebar />);
+      const aiButton = screen.getByRole("button", { name: /AI Assistant/i });
+      fireEvent.keyDown(aiButton, { key: "Enter" });
+      expect(mockSetAIChatOpen).toHaveBeenCalled();
+    });
+  });
+
+  describe("PlaygroundSidebar - Bottom Nav", () => {
+    it("activates Share button on Enter key", () => {
+      render(<PlaygroundSidebar />);
+      const shareButton = screen.getByRole("button", { name: /Share/i });
+      fireEvent.keyDown(shareButton, { key: "Enter" });
+      // Share calls handleShare which is async, just verify no error
+      expect(shareButton).toBeInTheDocument();
+    });
+
+    it("activates Settings button on Space key", () => {
+      render(<PlaygroundSidebar />);
+      const settingsButton = screen.getByRole("button", { name: /Settings/i });
+      fireEvent.keyDown(settingsButton, { key: " " });
+      expect(mockSetSettingsOpen).toHaveBeenCalledWith(true);
+    });
+
+    it("activates Start Tour button on Enter key", () => {
+      render(<PlaygroundSidebar />);
+      const tourButton = screen.getByRole("button", { name: /Start Tour/i });
+      fireEvent.keyDown(tourButton, { key: "Enter" });
+      expect(tourButton).toBeInTheDocument();
+    });
+  });
+
+  describe("PlaygroundSidebar - focusability", () => {
+    it("all nav items have tabIndex=0 for keyboard focus", () => {
+      render(<PlaygroundSidebar />);
+      const buttons = screen.getAllByRole("button");
+      buttons.forEach((button) => {
+        expect(button).toHaveAttribute("tabindex", "0");
+      });
+    });
+  });
+});