[Bug]: Narrow-window right panel dialog has no accessible name #36080

Summary#

When a thread's right panel opens as a sheet in a narrow web or desktop window, its dialog has an empty accessible name. The dialog should have a name identifying the panel so screen reader users know what opened. A focused Chromium browser test reproduced the empty name; a sheet with a title was named in the same test.

Before submitting#

• I searched existing issues and did not find a duplicate.
• I included enough detail to reproduce or investigate the problem.

Area#

apps/web

Steps to reproduce#

1. From a checkout with the stated commit, installed workspace dependencies, and the project's Chromium browser-test binary, save the script below as repro.sh in the checkout's parent directory.
2. From the checkout, run sh ../repro.sh ..

The focused browser test reproduced the failure on one run. It tests a named sheet as a control, then mounts the actual open right-panel wrapper and requires a non-empty dialog name. The script isolates HOME, TMPDIR, and T3CODE_HOME; creates only a uniquely named temporary test inside the checkout; removes it on exit; prints the Node and Vite+ versions; and ends with RESULT: defect reproduced (exit 1), RESULT: expected behavior (exit 0), or RESULT: inconclusive (exit 2).

#!/bin/sh
set -u
checkout=${1:?pass checkout path}
case "$checkout" in /*) ;; *) checkout=$(cd "$checkout" && pwd) ;; esac
node --version
(cd "$checkout" && vp --version | head -1)
browser_cache=${PLAYWRIGHT_BROWSERS_PATH:-$HOME/Library/Caches/ms-playwright}
scratch=$(mktemp -d)
test_file="$checkout/apps/web/src/components/RightPanelSheet.y10-01.browser.test.tsx"
if [ -e "$test_file" ]; then
  echo 'RESULT: inconclusive'
  exit 2
fi
cleanup() { rm -f "$test_file"; rm -rf "$scratch"; }
trap cleanup EXIT HUP INT TERM
cat > "$test_file" <<'TEST'
import { expect, it } from "vite-plus/test";
import { page } from "vite-plus/test/browser";
import { render } from "../../test/render";
import { RightPanelSheet } from "./RightPanelSheet";
import { Sheet, SheetPopup, SheetTitle } from "./ui/sheet";

it("gives the open right-panel dialog an accessible name", async () => {
  {
    await using control = await render(
      <Sheet open>
        <SheetPopup><SheetTitle>Named control</SheetTitle></SheetPopup>
      </Sheet>,
    );
    await expect.element(page.getByRole("dialog")).toHaveAccessibleName("Named control");
  }
  console.log("CONTROL_OK");
  await using screen = await render(
    <RightPanelSheet open animationDurationMs={0} onClose={() => {}}>
      <div>Panel content</div>
    </RightPanelSheet>,
  );
  const dialog = page.getByRole("dialog");
  await expect.element(dialog).toBeVisible();
  await expect.element(dialog).not.toHaveAccessibleName("");
});
TEST
export HOME="$scratch/home" TMPDIR="$scratch/tmp" T3CODE_HOME="$scratch/state" PLAYWRIGHT_BROWSERS_PATH="$browser_cache"
mkdir -p "$HOME" "$TMPDIR" "$T3CODE_HOME"
(cd "$checkout" && vp test run apps/web/src/components/RightPanelSheet.y10-01.browser.test.tsx) > "$scratch/test-output" 2>&1
status=$?
cat "$scratch/test-output"
if ! grep -q CONTROL_OK "$scratch/test-output"; then
  echo 'RESULT: inconclusive'
  exit 2
fi
if [ "$status" -eq 0 ]; then
  echo 'RESULT: expected behavior'
  exit 0
fi
if grep -q 'toHaveAccessibleName' "$scratch/test-output"; then
  echo 'RESULT: defect reproduced'
  exit 1
fi
echo 'RESULT: inconclusive'
exit 2

Expected behavior#

The open sheet's dialog should have a non-empty accessible name so assistive technology can identify the right panel when it opens. This follows the app's existing sheet pattern: the mobile sidebar supplies a SheetTitle to its popup in apps/web/src/components/ui/sidebar.tsx#L353-L356. The right-panel wrapper is a SheetPopup, backed by the Base UI dialog popup, in apps/web/src/components/RightPanelSheet.tsx#L11-L29 and apps/web/src/components/ui/sheet.tsx#L90-L123.

Actual behavior#

A focused browser test mounted the open RightPanelSheet and checked the element with role="dialog". Its accessible name was empty. In the same browser run, the shared Sheet and SheetPopup with a SheetTitle produced the accessible name "Named control". The supported chat entry path selects this wrapper for an open, non-maximized right panel at viewport widths of 980px or less: apps/web/src/rightPanelLayout.ts#L1, apps/web/src/components/ChatView.tsx#L712, apps/web/src/components/ChatView.tsx#L1052-L1055, and apps/web/src/components/ChatView.tsx#L3954-L3961.

Impact and scope#

Impact: P2 - the dialog loses its identifying name for assistive technology on a supported narrow-window panel path, while its content remains available.

This applies when an open right panel uses sheet mode at 980px or less and is not maximized; the same wrapper holds each surface. A user can navigate into the separately named workspace region to discover the active surface, but that does not name the outer dialog. The browser test verifies the accessibility name, not spoken output from a particular screen reader. Web and desktop share this component; mobile uses a separate client.

Earliest failure stage#

Output or presentation

Analysis or suspected cause#

Source: RightPanelSheet passes neither an ARIA name nor a SheetTitle into SheetPopup; ChatRightPanel supplies only RightPanelTabs as children. The browser test confirms that the Base UI dialog popup does not derive a name from those children.

Additional context#

apps/web/src/components/chat/ChatRightPanel.tsx#L34-L49 places RightPanelTabs inside RightPanelSheet. The tabs give their own nested workspace region a label in apps/web/src/components/RightPanelTabs.tsx#L1326-L1335 and apps/web/src/lib/workspaceFocus.ts#L12-L20; that nested label does not provide an accessible name for its ancestor dialog, as the browser test confirms.

Evidence provenance: observed in the focused Chromium test and supported by the linked source. Local verification: reproduced. Reproduction completeness: complete for the dialog's accessible name; spoken output from a particular screen reader was not measured. Restoration check: the script exits 0 only when the open right-panel dialog has a non-empty accessible name after the named control passes.

Impact#

Minor bug or occasional failure

Version or commit#

main @ c00a373491

Environment#

macOS 27.2, arm64; Node v26.12.1; Vite+ v1.6.0; Vitest v5.0.5; Chromium through the project's browser-test runner.

Logs or stack traces#

The focused test printed the following after its named control passed; the excerpt removes local test-runner paths and ANSI color codes:

CONTROL_OK
Expected element not to have accessible name:
[empty]
Received:
[empty]
Test Files  1 failed (1)
Tests  1 failed (1)
RESULT: defect reproduced

Screenshots, recordings, or supporting files#

No response

Workaround#

No response

References#

• https://github.com/pingdotgg/t3code/pull/32791 — named the right-panel resize handle; the narrow-window sheet dialog is a different element and remains unnamed.