{draftIndicator}
@@ -2008,6 +2035,12 @@ const SidebarSearchResultRow = memo(function SidebarSearchResultRow(props: {
onFileDropThreads: (threadRef: ScopedThreadRef, files: File[]) => void;
}) {
const { thread } = props;
+ const accessibility = resolveSidebarRowAccessibility({
+ title: thread.title,
+ statusLabel: null,
+ projectDisplayName: props.projectDisplayName,
+ isActive: props.isRouteActive,
+ });
const threadRef = useMemo(
() => scopeThreadRef(thread.environmentId, thread.id),
[thread.environmentId, thread.id],
@@ -2084,12 +2117,8 @@ const SidebarSearchResultRow = memo(function SidebarSearchResultRow(props: {
// which owns all keyboard interaction for the listbox.
tabIndex={-1}
aria-selected={props.isHighlighted}
- aria-current={props.isRouteActive ? "page" : undefined}
- aria-label={
- props.projectDisplayName
- ? `${thread.title}, ${props.projectDisplayName}`
- : thread.title
- }
+ aria-current={accessibility.current}
+ aria-label={accessibility.label}
onMouseMove={props.onHighlight}
onClick={props.onSelect}
className={cn(
@@ -4573,7 +4602,7 @@ export default function Sidebar() {
}
>
-
+
{isSearchingThreads ? (
threadSearchResults.length > 0 ? (
0 && "flex-1",
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 7792b9606e41c49381e44daee611d17c1b9e8778..ce9d41edaa5d0a5079425a1424b4e953b8c42512 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -30,6 +30,7 @@ function ScrollArea({
hideScrollbars = false,
chainVerticalScroll = false,
radius = "inherit",
+ viewportTabIndex,
...props
}: ScrollAreaPrimitive.Root.Props & {
scrollFade?: boolean;
@@ -41,6 +42,8 @@ function ScrollArea({
chainVerticalScroll?: boolean;
/** The viewport clips to the parent's radius; "none" for a region flush to an edge. */
radius?: "inherit" | "none";
+ /** Override Base UI's focusable viewport when focusable descendants provide scroll access. */
+ viewportTabIndex?: number;
}) {
return (
-
+
{children}
@@ -597,6 +598,10 @@ function SidebarContent({
hideScrollbars
scrollFade
scrollFadePadding={false}
+ // Thread rows provide keyboard access to this scroll region. Keeping
+ // Base UI's viewport out of the tab order lets its presentational role
+ // flatten in WebKit instead of becoming a VoiceOver interaction group.
+ viewportTabIndex={-1}
className="h-auto min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]]:[--fade-size:0.75rem]"
>
[0]>) {
- const html = renderToStaticMarkup();
- return html.match(/]*role="switch"[^>]*>/)?.[0] ?? "";
+let root: Root;
+let container: HTMLDivElement;
+
+beforeEach(() => {
+ vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+ container = document.createElement("div");
+ document.body.append(container);
+ root = createRoot(container);
+});
+
+afterEach(async () => {
+ await act(async () => root.unmount());
+ container.remove();
+ vi.unstubAllGlobals();
+});
+
+function ControlledSwitch({
+ initialChecked,
+ initialMixed = false,
+}: {
+ initialChecked: boolean;
+ initialMixed?: boolean;
+}) {
+ const [checked, setChecked] = useState(initialChecked);
+ const [mixed, setMixed] = useState(initialMixed);
+
+ return (
+ {
+ setMixed(false);
+ setChecked(nextChecked);
+ }}
+ />
+ );
+}
+
+function switchRoot() {
+ const element = container.querySelector('[role="switch"]');
+ if (!element) throw new Error("Switch was not rendered");
+ return element;
+}
+
+async function clickSwitch() {
+ await act(async () => switchRoot().click());
+}
+
+async function renderSwitch(initialChecked: boolean, initialMixed = false) {
+ await act(async () => {
+ root.render();
+ });
}
describe("Switch accessibility", () => {
- it("exposes the checked state to assistive tech", () => {
- expect(renderSwitchRoot({ checked: true })).toContain('aria-checked="true"');
- expect(renderSwitchRoot({ checked: false })).toContain('aria-checked="false"');
- });
+ it.each([
+ { initialChecked: false, initialMixed: false, before: false, after: true },
+ { initialChecked: true, initialMixed: false, before: true, after: false },
+ { initialChecked: false, initialMixed: true, before: "mixed", after: true },
+ ])("exposes $before before activation and $after after activation", async (state) => {
+ await renderSwitch(state.initialChecked, state.initialMixed);
+ expect(switchRoot().getAttribute("aria-checked")).toBe(String(state.before));
- it("exposes the mixed state", () => {
- expect(renderSwitchRoot({ checked: false, mixed: true })).toContain('aria-checked="mixed"');
+ await clickSwitch();
+
+ expect(switchRoot().getAttribute("aria-checked")).toBe(String(state.after));
+ expect(container.querySelector('input[type="checkbox"]')?.checked).toBe(
+ state.after,
+ );
});
});