@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev135

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -17,6 +17,8 @@ export const FloatingOutline: React.FC = () => {
     findOutlineElements(items),
   );
   const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isVisible = isHovered || isFocused;
 
   // Hide if < 2 items
   // It's kinda useless to have an outline with only one item
@@ -29,6 +31,12 @@ export const FloatingOutline: React.FC = () => {
     <div
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setIsFocused(false);
+        }
+      }}
       className={cn(
         "fixed top-[25vh] right-8 z-10000 print:hidden",
         // Hide on small screens
@@ -36,9 +44,10 @@ export const FloatingOutline: React.FC = () => {
       )}
     >
       <OutlineList
+        inert={!isVisible}
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
+          isVisible ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}
@@ -62,17 +71,20 @@ export const MiniMap: React.FC<{
   const seen = new Map<string, number>();
   return (
     <div className="flex flex-col gap-4 items-end max-h-[70vh] overflow-hidden">
-      {items.map((item, idx) => {
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
         return (
-          <div
-            key={`${identifier}-${idx}`}
+          <button
+            type="button"
+            aria-label={item.name}
+            key={`${selector}-${occurrences}`}
             className={cn(
-              "h-[2px] bg-muted-foreground/60",
+              "h-[2px] bg-muted-foreground/60 focus-visible:outline focus-visible:outline-ring",
               item.level === 1 && "w-5",
               item.level === 2 && "w-4",
               item.level === 3 && "w-3",
@@ -91,24 +103,31 @@ export const MiniMap: React.FC<{
 
 export const OutlineList: React.FC<{
   className?: string;
+  inert?: boolean;
   items: OutlineItem[];
   activeHeaderId: string | undefined;
   activeOccurrences: number | undefined;
-}> = ({ items, activeHeaderId, activeOccurrences, className }) => {
+}> = ({ items, activeHeaderId, activeOccurrences, className, inert }) => {
   // Map of selector to its occurrences
   const seen = new Map<string, number>();
   return (
-    <div className={cn("flex flex-col overflow-auto py-4 pl-2", className)}>
-      {items.map((item, idx) => {
+    <div
+      inert={inert}
+      className={cn("flex flex-col overflow-auto py-4 pl-2", className)}
+    >
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
-        const key = `${identifier}-${idx}`;
+        const key = `${selector}-${occurrences}`;
         const sharedProps = {
+          role: "link",
+          tabIndex: 0,
           className: cn(
-            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
+            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l focus-visible:outline focus-visible:outline-ring",
             item.level === 1 && "font-semibold",
             item.level === 2 && "ml-3",
             item.level === 3 && "ml-6",
@@ -118,6 +137,12 @@ export const OutlineList: React.FC<{
               "text-accent-foreground",
           ),
           onClick: () => scrollToOutlineItem(item, occurrences),
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.target === e.currentTarget && e.key === "Enter") {
+              e.preventDefault();
+              scrollToOutlineItem(item, occurrences);
+            }
+          },
         };
 
         if (item.html) {

package/src/components/editor/chrome/panels/outline/useActiveOutline.tsx

@@ -113,9 +113,10 @@ export function findOutlineElements(items: OutlineItem[]) {
   return items
     .map((item) => {
       const identifier = "id" in item.by ? item.by.id : item.by.path;
+      const selector = JSON.stringify(item.by);
       // Keep track of how many times we've seen this selector
-      const occurrences = seen.get(identifier) ?? 0;
-      seen.set(identifier, occurrences + 1);
+      const occurrences = seen.get(selector) ?? 0;
+      seen.set(selector, occurrences + 1);
 
       const el = findOutlineItem(item, occurrences);
       if (!el) {

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -31,6 +31,7 @@ import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
 import { useInstallPackages } from "@/core/packages/useInstallPackage";
 import { isWasm } from "@/core/wasm/utils";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -440,15 +441,11 @@ const DependencyTree: React.FC<{
   error?: Error | null;
   sandboxBackend: "uv" | "pixi" | null;
 }> = ({ tree, error, sandboxBackend }) => {
-  const [expandedNodes, setExpandedNodes] = React.useState<Set<string>>(
-    new Set(),
+  const [expandedNodes, setExpandedNodes] = useStateForKey(
+    tree,
+    () => new Set<string>(),
   );
 
-  // Reset tree to collapsed state when tree data changes (including refetches)
-  React.useEffect(() => {
-    setExpandedNodes(new Set());
-  }, [tree]);
-
   if (error) {
     return <ErrorBanner error={error} />;
   }

package/src/components/editor/chrome/panels/secrets-panel.tsx

@@ -66,6 +66,7 @@ const SecretsPanel: React.FC = () => {
           <div className="flex justify-start h-8 border-b">
             <button
               type="button"
+              aria-label="Add environment variable"
               className="border-r px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
               onClick={() =>
                 openModal(

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -71,7 +71,11 @@ const SnippetsPanel: React.FC = () => {
                 rootClassName="flex-1 border-r"
               />
               <ContributeSnippetButton>
-                <button className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+                <button
+                  type="button"
+                  aria-label="Contribute snippet"
+                  className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
+                >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </ContributeSnippetButton>

package/src/components/editor/chrome/wrapper/__tests__/attachment-status.test.tsx

@@ -8,27 +8,31 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
+import { atom, createStore, Provider } from "jotai";
 import { userEvent } from "storybook/test";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
+import type { Attachment } from "@/core/attachments/state";
 import { pairConfigAtom } from "@/core/config/pair";
+import { createNotebookReplica } from "@/core/host/replica";
 import {
   type StableSessionId,
   stableSessionIdAtom,
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { notebookReplicaAtom } from "@/core/websocket/state";
+import { ConnectionState } from "@/core/websocket/types";
 import { Deferred } from "@/utils/Deferred";
 import { AttachmentStatus } from "../footer-items/attachment-status";
 
 vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
 vi.mock("@/core/network/api", () => ({ API: { post: vi.fn() } }));
 
+const attachmentsAtom = atom<Attachment[]>([]);
+
 const AGENT: Attachment = {
   id: "a1",
   kind: "agent",
@@ -41,6 +45,11 @@ function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
+  store.set(notebookReplicaAtom, {
+    ...createNotebookReplica(store),
+    connectionAtom: atom({ state: ConnectionState.OPEN }),
+    attachmentsAtom,
+  });
   store.set(attachmentsAtom, attachments);
   store.set(stableSessionIdAtom, "stable/test" as StableSessionId);
   return {
@@ -342,21 +351,6 @@ describe("AttachmentStatus", () => {
     ).toBeDisabled();
   });
 
-  it.each([
-    { state: ConnectionState.CONNECTING },
-    { state: ConnectionState.CLOSING },
-    { state: ConnectionState.NOT_STARTED },
-    {
-      state: ConnectionState.CLOSED,
-      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-      reason: "offline",
-    },
-  ])("hides connected claims while the browser is %j", (connection) => {
-    const { store, container } = renderStatus();
-    act(() => store.set(connectionAtom, connection));
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it("removes detached agents when the list is replaced", () => {
     const { store, container } = renderStatus([
       AGENT,

package/src/components/editor/chrome/wrapper/__tests__/pending-ai-cells.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { stagedAICellsAtom, visibleForTesting } from "@/core/ai/staged-cells";
+import { scrollAndHighlightCell } from "../../../links/cell-link";
 import { PendingAICells } from "../pending-ai-cells";
 
 vi.mock("@/components/editor/cell/useDeleteCell", () => ({
@@ -29,6 +30,62 @@ vi.mock("@/components/editor/links/cell-link", () => ({
 }));
 
 describe("PendingAICells", () => {
+  it("navigates between pending cells through named controls", () => {
+    const store = createStore();
+    const first = cellId("first-pending-cell");
+    const second = cellId("second-pending-cell");
+    const third = cellId("third-pending-cell");
+    store.set(
+      stagedAICellsAtom,
+      new Map([
+        [first, { type: "add_cell" }],
+        [second, { type: "add_cell" }],
+        [third, { type: "add_cell" }],
+      ]),
+    );
+
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PendingAICells />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    const next = screen.getByRole("button", { name: "Next pending AI cell" });
+    const previous = screen.getByRole("button", {
+      name: "Previous pending AI cell",
+    });
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+  });
+
   it("disables bulk actions while cells are still generating", () => {
     const store = createStore();
     const generationId = Symbol("staged-cell-generation");

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -79,7 +79,12 @@ export const PendingAICells: React.FC = () => {
       <SparklesIcon className="h-4 w-4 text-primary" />
 
       <div className="flex items-center">
-        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+        <Button
+          aria-label="Previous pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("down")}
+        >
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
         <span className="text-xs font-mono min-w-14 text-center">
@@ -87,7 +92,12 @@ export const PendingAICells: React.FC = () => {
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}
         </span>
-        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+        <Button
+          aria-label="Next pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("up")}
+        >
           <ChevronDown className="h-3.5 w-3.5" />
         </Button>
       </div>

package/src/components/editor/chrome/wrapper/storage.ts

@@ -15,7 +15,7 @@ let storedValue: string | null = null;
  */
 export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
   return {
-    getItem(name) {
+    getItem(_name) {
       if (!storedValue) {
         return storedValue ?? null;
       }

package/src/components/editor/connections/components.tsx

@@ -48,7 +48,7 @@ export const SelectorButton: React.FC<{
 }> = ({ name, color, icon, onSelect }) => (
   <button
     type="button"
-    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-[scale,filter,box-shadow] hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
     style={{ backgroundColor: color }}
     onClick={onSelect}
   >

package/src/components/editor/controls/__tests__/command-palette.test.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { useNotebookActions } from "../../actions/useNotebookActions";
+import CommandPalette from "../command-palette";
+
+vi.mock("../../actions/useNotebookActions", () => ({
+  useNotebookActions: vi.fn(),
+}));
+vi.mock("../../actions/useCellActionButton", () => ({
+  useCellActionButtons: () => [],
+}));
+vi.mock("../../actions/useConfigActions", () => ({
+  useConfigActions: () => [],
+}));
+
+it("builds current actions only while open and keeps the opening shortcut active", async () => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  const firstAction = vi.fn();
+  const nextAction = vi.fn();
+  vi.mocked(useNotebookActions).mockReturnValue([
+    { label: "First action", handle: firstAction },
+  ]);
+  render(
+    <Provider store={createStore()}>
+      <CommandPalette />
+    </Provider>,
+  );
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  fireEvent.click(screen.getByText("First action"));
+  await waitFor(() => expect(firstAction).toHaveBeenCalledOnce());
+  await waitFor(() =>
+    expect(screen.queryByPlaceholderText("Type to search...")).toBeNull(),
+  );
+
+  vi.mocked(useNotebookActions)
+    .mockClear()
+    .mockReturnValue([{ label: "Updated action", handle: nextAction }]);
+  fireEvent.keyDown(document, { key: "x" });
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  expect(screen.queryByText("First action")).toBeNull();
+  fireEvent.click(screen.getByText("Updated action"));
+  await waitFor(() => expect(nextAction).toHaveBeenCalledOnce());
+  expect(firstAction).toHaveBeenCalledOnce();
+});

package/src/components/editor/controls/__tests__/keyboard-shortcuts.test.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { getDefaultHotkey } from "@/core/hotkeys/hotkeys";
+import {
+  KeyboardShortcuts,
+  keyboardShortcutsAtom,
+} from "../keyboard-shortcuts";
+
+const saveUserConfig = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ saveUserConfig }),
+}));
+
+describe("shortcut recorder keyboard navigation", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("allows Tab navigation and Reset without saving a shortcut", async () => {
+    const store = createStore();
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      keymap: { ...config.keymap, overrides: { "cell.run": "Ctrl-9" } },
+    });
+    store.set(keyboardShortcutsAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <KeyboardShortcuts />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const edit = screen.getByRole("button", {
+      name: `Edit shortcut: ${getDefaultHotkey("cell.run").name}`,
+    });
+    act(() => edit.focus());
+    fireEvent.click(edit, { detail: 0 });
+    const recorder = screen.getByPlaceholderText(
+      getDefaultHotkey("cell.run").name,
+    );
+    expect(recorder).toHaveFocus();
+    expect(fireEvent.keyDown(recorder, { key: "Tab" })).toBe(true);
+    expect(fireEvent.keyDown(recorder, { key: "Tab", shiftKey: true })).toBe(
+      true,
+    );
+    expect(recorder).toBeInTheDocument();
+    expect(saveUserConfig).not.toHaveBeenCalled();
+    const reset = screen.getByRole("button", { name: /^Reset to default:/ });
+    act(() => reset.focus());
+    expect(reset).toHaveFocus();
+    await act(async () => fireEvent.click(reset, { detail: 0 }));
+    expect(saveUserConfig).toHaveBeenCalledExactlyOnceWith({
+      config: { keymap: { ...config.keymap, overrides: {} } },
+    });
+  });
+});

package/src/components/editor/controls/command-palette.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   CommandDialog,
   CommandEmpty,
@@ -32,6 +32,25 @@ import { commandPaletteAtom } from "./state";
 
 const CommandPalette = () => {
   const [open, setOpen] = useAtom(commandPaletteAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+
+  useEventListener(document, "keydown", (e) => {
+    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
+      e.preventDefault();
+      setOpen((open) => !open);
+    }
+  });
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandPaletteContent />
+    </CommandDialog>
+  );
+};
+
+// The dialog mounts these subscriptions only while its content is present.
+const CommandPaletteContent = () => {
+  const setOpen = useSetAtom(commandPaletteAtom);
   const registeredActions = useRegisteredActions();
   const lastFocusedCell = useAtomValue(lastFocusedCellAtom);
   const hotkeys = useAtomValue(hotkeysAtom);
@@ -55,13 +74,6 @@ const CommandPalette = () => {
   const { recentCommands, addRecentCommand } = useRecentCommands();
   const recentCommandsSet = new Set(recentCommands);
 
-  useEventListener(document, "keydown", (e) => {
-    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
-      e.preventDefault();
-      setOpen((open) => !open);
-    }
-  });
-
   const renderShortcutCommandItem = (
     shortcut: HotkeyAction,
     props: {
@@ -142,7 +154,7 @@ const CommandPalette = () => {
   };
 
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <>
       <CommandInput placeholder="Type to search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
@@ -211,7 +223,7 @@ const CommandPalette = () => {
           })}
         </CommandGroup>
       </CommandList>
-    </CommandDialog>
+    </>
   );
 };
 

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -134,6 +134,9 @@ export const KeyboardShortcuts: React.FC = () => {
             defaultValue={newShortcut.join("+")}
             placeholder={hotkey.name}
             onKeyDown={(e) => {
+              if (e.key === "Tab" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                return;
+              }
               e.preventDefault();
               const next: string[] = [];
 
@@ -189,6 +192,7 @@ export const KeyboardShortcuts: React.FC = () => {
             autoFocus={true}
             endAdornment={
               <Button
+                aria-label="Cancel shortcut recording"
                 variant="text"
                 size="xs"
                 className="mb-0"
@@ -206,13 +210,14 @@ export const KeyboardShortcuts: React.FC = () => {
               Press a key combination
             </span>
             {defaultHotkey.key !== hotkey.key && (
-              <span
+              <button
+                type="button"
                 className="text-xs cursor-pointer text-primary"
                 onClick={handleResetShortcut}
               >
                 Reset to default:{" "}
                 <span className="font-mono">{defaultHotkey.key}</span>
-              </span>
+              </button>
             )}
           </div>
         </div>
@@ -228,13 +233,17 @@ export const KeyboardShortcuts: React.FC = () => {
         className="grid grid-cols-[auto_2fr_3fr] gap-2 items-center"
       >
         {hotkeys.isEditable(action) ? (
-          <EditIcon
-            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3"
+          <button
+            type="button"
+            aria-label={`Edit shortcut: ${hotkey.name}`}
+            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3 focus-visible:outline focus-visible:outline-ring"
             onClick={() => {
               setNewShortcut([]);
               setEditingShortcut(action);
             }}
-          />
+          >
+            <EditIcon className="w-3 h-3" />
+          </button>
         ) : (
           <div className="w-3 h-3" />
         )}