fix(site): allow tabbing through chat search results

This commit is contained in:
Danielle Maywood
2026-06-01 09:09:14 +00:00
parent 76d3181aba
commit 00a0452705
2 changed files with 28 additions and 4 deletions
@@ -295,8 +295,8 @@ export const KeyboardNavigation: Story = {
}
await expect(resultsViewport).toHaveAttribute("tabindex", "-1");
await expect(firstResult).toHaveAttribute("tabindex", "-1");
await expect(secondResult).toHaveAttribute("tabindex", "-1");
await expect(firstResult).toHaveAttribute("tabindex", "0");
await expect(secondResult).toHaveAttribute("tabindex", "0");
await userEvent.keyboard("{ArrowUp}");
await expect(secondResult).toHaveAttribute("aria-selected", "true");
@@ -432,6 +432,30 @@ export const BooleanFilterPill: Story = {
},
};
export const SearchResultsAreTabbable: Story = {
play: async () => {
const body = within(document.body);
const searchInput = body.getByRole("combobox", { name: "Search chats" });
await userEvent.type(searchInput, "Fix");
const firstResult = await body.findByRole("option", {
name: /Fix race condition in auth middleware/,
});
const secondResult = await body.findByRole("option", {
name: /Fix flaky workspace search story/,
});
await expect(firstResult).toHaveAttribute("tabindex", "0");
await expect(secondResult).toHaveAttribute("tabindex", "0");
await userEvent.tab();
await userEvent.tab();
await expect(firstResult).toHaveFocus();
await userEvent.tab();
await expect(secondResult).toHaveFocus();
},
};
export const ParameterizedFilterPill: Story = {
beforeEach: () => {
spyOn(API.experimental, "getChats").mockResolvedValue(mockChats);
@@ -263,11 +263,11 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
id={id}
role="option"
aria-selected={isSelected}
tabIndex={-1}
tabIndex={0}
to={{ pathname: `/agents/${chat.id}`, search: location.search }}
onClick={onSelect}
className={cn(
"grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-2 rounded-md px-1.5 py-1 text-content-secondary no-underline hover:bg-surface-tertiary/40 hover:text-content-primary",
"grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-2 rounded-md px-1.5 py-1 text-content-secondary no-underline hover:bg-surface-tertiary/40 hover:text-content-primary focus-visible:outline focus-visible:-outline-offset-2 focus-visible:outline-2 focus-visible:outline-content-link",
isSelected && "bg-surface-tertiary/40 text-content-primary",
)}
>