mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
fix(site): allow tabbing through chat search results
This commit is contained in:
+26
-2
@@ -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",
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user