fix(web): screen readers can reach sidebar row actions

apps/web/src/components/Sidebar.pointer.browser.test.tsx

@@ -1,6 +1,11 @@
 import type { SensorProps } from "@dnd-kit/core";
 import { describe, expect, it, vi } from "vite-plus/test";
-import { fakeTimers } from "../../test/render";
+import { userEvent } from "vite-plus/test/browser";
+import { scopeProjectRef } from "@t3tools/client-runtime/environment";
+import { EnvironmentId, ProjectId } from "@t3tools/contracts";
+import { DraftId, useComposerDraftStore } from "../composerDraftStore";
+import { SidebarDraftBlock } from "./sidebar/SidebarDraftBlock";
+import { act, render, fakeTimers } from "../../test/render";
 import { SidebarPointerSensor } from "./Sidebar.pointer";
 
 const sensors: SidebarPointerSensor[] = [];
@@ -86,3 +91,66 @@ describe("sidebar pointer lifecycle", () => {
     expect(drag.onFinish).toHaveBeenCalledExactlyOnceWith(true);
   });
 });
+
+it("keeps draft actions separate from keyboard navigation and anchors keyboard menus to the row", async () => {
+  const draftId = DraftId.make("accessible-draft");
+  const environmentId = EnvironmentId.make("sidebar-test");
+  const projectId = ProjectId.make("project-test");
+  const store = useComposerDraftStore.getState();
+  store.setProjectDraftThreadId(scopeProjectRef(environmentId, projectId), draftId);
+  store.setPrompt(draftId, "Fix tests");
+  using _cleanup = {
+    [Symbol.dispose]: () => useComposerDraftStore.getState().clearDraftThread(draftId),
+  };
+  const onNavigate = vi.fn();
+  const onContextMenu = vi.fn();
+  await using screen = await render(
+    <ul>
+      <SidebarDraftBlock
+        projectByKey={new Map()}
+        projectDisplayNameByKey={new Map()}
+        scopedProjectKeys={null}
+        routeDraftId={null}
+        onNavigateToDraft={onNavigate}
+        onDraftContextMenu={onContextMenu}
+      />
+    </ul>,
+  );
+  const primary = screen.getByRole("button", { name: "Fix tests, Unsent draft", exact: true });
+  const discard = screen.getByRole("button", { name: "Discard draft", exact: true });
+  expect(primary.element()).toBeInstanceOf(HTMLButtonElement);
+  expect(discard.element().parentElement?.closest('button, [role="button"]')).toBeNull();
+  await act(() => (primary.element() as HTMLElement).focus());
+  await userEvent.keyboard("{Enter}");
+  expect(onNavigate).toHaveBeenCalledExactlyOnceWith(draftId);
+  await userEvent.tab();
+  expect(discard.element()).toHaveFocus();
+  await act(() => (primary.element() as HTMLElement).focus());
+  await userEvent.keyboard("{Shift>}{F10}{/Shift}");
+  const row = screen.container.querySelector('[data-testid="sidebar-draft-row"]')!;
+  const bounds = row.getBoundingClientRect();
+  expect(onContextMenu).toHaveBeenCalledExactlyOnceWith(draftId, {
+    x: bounds.left,
+    y: bounds.bottom,
+  });
+  onContextMenu.mockClear();
+  await userEvent.keyboard("{ContextMenu}");
+  expect(onContextMenu).toHaveBeenCalledExactlyOnceWith(draftId, {
+    x: bounds.left,
+    y: bounds.bottom,
+  });
+  onContextMenu.mockClear();
+  await act(() =>
+    primary
+      .element()
+      .dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true })),
+  );
+  expect(onContextMenu).toHaveBeenCalledExactlyOnceWith(draftId, {
+    x: bounds.left,
+    y: bounds.bottom,
+  });
+  await act(() => (discard.element() as HTMLElement).focus());
+  await userEvent.keyboard(" ");
+  expect(useComposerDraftStore.getState().getDraftSession(draftId)).toBeNull();
+  expect(onNavigate).toHaveBeenCalledExactlyOnceWith(draftId);
+});

apps/web/src/components/Sidebar.tsx

@@ -2936,9 +2936,8 @@ export default function Sidebar({ routeReveal }: { routeReveal: SidebarRouteReve
                 <SortableContext items={sortableIds} strategy={sidebarSortingStrategy}>
                   <ul
                     ref={attachListMotionRef}
-                    // Presentation flattens VoiceOver's list interaction boundary while preserving descendant
-                    // controls.
-                    role="presentation"
+                    // Safari drops list semantics from lists styled without markers.
+                    role="list"
                     className={cn(
                       "relative flex flex-col gap-px",
                       sidebarListItems.length > 0 && "flex-1",

apps/web/src/components/sidebar/SidebarDraftBlock.tsx

@@ -19,7 +19,13 @@ import {
   type ComposerThreadDraftState,
   type DraftSessionState,
 } from "../../composerDraftStore";
-import { draftPenClassName, draftSurfaceClassName } from "./SidebarThreadRow";
+import {
+  draftPenClassName,
+  draftSurfaceClassName,
+  SidebarRowPrimaryAction,
+  focusSidebarRowPrimaryAction,
+  SIDEBAR_ROW_SECONDARY_CONTROL_SELECTOR,
+} from "./SidebarThreadRow";
 
 const SidebarDraftRow = memo(function SidebarDraftRow(props: {
   draftId: DraftId;
@@ -56,22 +62,21 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
   });
   const handleActivate = () => onNavigate(draftId);
   const handleKeyDown = (event: ReactKeyboardEvent) => {
-    // Keys targeting the nested discard button belong to the button:
-    // preventDefault here would swallow Space's synthesized click and
-    // navigate instead of discarding.
-    if ((event.target as HTMLElement).closest("button")) return;
-    if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
-      event.preventDefault();
-      const rect = event.currentTarget.getBoundingClientRect();
-      onContextMenu(draftId, { x: rect.left, y: rect.bottom });
-    } else if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      onNavigate(draftId);
-    }
+    if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
+    if ((event.target as HTMLElement).closest(SIDEBAR_ROW_SECONDARY_CONTROL_SELECTOR)) return;
+    event.preventDefault();
+    const rect = event.currentTarget.getBoundingClientRect();
+    onContextMenu(draftId, { x: rect.left, y: rect.bottom });
   };
   const handleContextMenu = (event: ReactMouseEvent) => {
     event.preventDefault();
-    onContextMenu(draftId, { x: event.clientX, y: event.clientY });
+    const bounds = event.currentTarget.getBoundingClientRect();
+    onContextMenu(
+      draftId,
+      event.clientX === 0 && event.clientY === 0
+        ? { x: bounds.left, y: bounds.bottom }
+        : { x: event.clientX, y: event.clientY },
+    );
   };
   const handleDiscard = (event: ReactMouseEvent) => {
     event.preventDefault();
@@ -81,20 +86,17 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
   return (
     <li className="list-none py-0.5">
       <div
-        role="button"
-        tabIndex={0}
-        aria-label={accessibility.label}
-        aria-current={accessibility.current}
         data-testid="sidebar-draft-row"
         className={cn(
-          "group/sidebar-row relative w-full cursor-pointer overflow-hidden rounded-md text-left text-sidebar-foreground outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "group/sidebar-row relative isolate w-full cursor-pointer overflow-hidden rounded-md text-left text-sidebar-foreground select-none",
           props.isActive ? "bg-sidebar-row-active" : draftSurfaceClassName,
         )}
+        onMouseDown={focusSidebarRowPrimaryAction}
         onClick={handleActivate}
         onContextMenu={handleContextMenu}
         onKeyDown={handleKeyDown}
       >
-        <span className="sr-only">{preview}</span>
+        <SidebarRowPrimaryAction name={accessibility.label} isActive={props.isActive} />
         <div className="relative z-10 h-[4.875rem] px-(--sidebar-row-content-inset) py-(--sidebar-content-inset)">
           <div className="flex h-5 min-w-0 items-center gap-1.5">
             <SquarePenIcon aria-hidden className={draftPenClassName} />

apps/web/src/components/sidebar/SidebarThreadRow.tsx

@@ -510,6 +510,40 @@ const dropVerbBadge: Record<SidebarDropVerb, ReactNode> = {
   ),
 };
 
+export const SIDEBAR_ROW_SECONDARY_CONTROL_SELECTOR =
+  "button:not([data-sidebar-row-primary]), a, input";
+
+// Visible row content covers the primary button, so presses must transfer focus.
+export function focusSidebarRowPrimaryAction(event: ReactMouseEvent<HTMLElement>) {
+  if (!event.currentTarget.contains(event.target as Node)) return;
+  if ((event.target as HTMLElement).closest(SIDEBAR_ROW_SECONDARY_CONTROL_SELECTOR)) return;
+  const primaryAction = event.currentTarget.querySelector<HTMLButtonElement>(
+    "[data-sidebar-row-primary]",
+  );
+  if (!primaryAction) return;
+  event.preventDefault();
+  primaryAction.focus({ preventScroll: true });
+}
+
+// Keep actions outside the named button so screen readers expose them. Row
+// isolation keeps this button above its background and behind its visible content.
+export function SidebarRowPrimaryAction(props: {
+  name: string;
+  isActive: boolean;
+  isBusy?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      data-sidebar-row-primary
+      aria-label={props.name}
+      aria-current={props.isActive ? "page" : undefined}
+      aria-busy={props.isBusy || undefined}
+      className="absolute inset-0 -z-1 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+    />
+  );
+}
+
 type SidebarThreadRowProps = {
   thread: SidebarThreadSummary;
   variant: "card" | "slim";
@@ -808,12 +842,6 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
     event.preventDefault();
     onContextMenu(threadRef, { x: event.clientX, y: event.clientY });
   };
-  const handleKeyDown = (event: ReactKeyboardEvent) => {
-    if (event.target !== event.currentTarget) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onThreadActivate(threadRef);
-  };
   const handleDoubleClick = (event: ReactMouseEvent) => {
     if (
       !readEnvironmentScope(threadRef.environmentId, AuthOrchestrationOperateScope) ||
@@ -825,7 +853,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
     ) {
       return;
     }
-    if ((event.target as HTMLElement).closest("button, a, input")) return;
+    if ((event.target as HTMLElement).closest(SIDEBAR_ROW_SECONDARY_CONTROL_SELECTOR)) return;
     event.preventDefault();
     onStartRename(threadRef, thread.title);
   };
@@ -909,7 +937,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
   };
 
   const rowSurfaceClassName = cn(
-    "group/sidebar-row relative w-full cursor-pointer overflow-hidden rounded-md text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+    "group/sidebar-row relative isolate w-full cursor-pointer overflow-hidden rounded-md text-left select-none",
     variantAction === "unsettle" &&
       !props.isActive &&
       "[&:not(:hover):not(:focus-within)_*]:text-secondary-label/70 redesign:[&:not(:hover):not(:focus-within)_*]:text-secondary-label",
@@ -1010,7 +1038,13 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
       {thread.title}
     </span>
   );
-  const accessibleTitle = isRenaming ? null : <span className="sr-only">{thread.title}</span>;
+  const primaryAction = (
+    <SidebarRowPrimaryAction
+      name={accessibility.label}
+      isActive={props.isActive}
+      isBusy={isRegeneratingTitle}
+    />
+  );
 
   const prBadgeShape = supportsMultiplePullRequests
     ? resolveThreadPullRequestBadge(thread.pullRequests)
@@ -1107,21 +1141,16 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
             render={
               <div
                 ref={rowRef}
-                role="button"
-                tabIndex={0}
-                aria-label={accessibility.label}
-                aria-current={accessibility.current}
                 data-testid="sidebar-row-slim"
-                aria-busy={isRegeneratingTitle || undefined}
                 className={cn(rowSurfaceClassName, "flex h-9 items-center gap-2.5 px-2.5")}
+                onMouseDown={focusSidebarRowPrimaryAction}
                 onClick={handleClick}
                 onDoubleClick={handleDoubleClick}
-                onKeyDown={handleKeyDown}
                 onContextMenu={handleContextMenu}
               />
             }
           >
-            {accessibleTitle}
+            {primaryAction}
             <span
               className={cn(
                 "flex shrink-0 items-center transition-opacity",
@@ -1278,21 +1307,16 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
           render={
             <div
               ref={rowRef}
-              role="button"
-              tabIndex={0}
-              aria-label={accessibility.label}
-              aria-current={accessibility.current}
               data-testid="sidebar-row-card"
-              aria-busy={isRegeneratingTitle || undefined}
               className={rowSurfaceClassName}
+              onMouseDown={focusSidebarRowPrimaryAction}
               onClick={handleClick}
               onDoubleClick={handleDoubleClick}
-              onKeyDown={handleKeyDown}
               onContextMenu={handleContextMenu}
             />
           }
         >
-          {accessibleTitle}
+          {primaryAction}
           <div
             className={cn(
               "relative z-10 h-[4.875rem] px-(--sidebar-row-content-inset) py-(--sidebar-content-inset)",