Skip to content

Commit 137aced

Browse files
committed
fix(webapp): put the watch chip's tooltip back in the tab order
`SimpleTooltip` drops its trigger from the tab order unless `tabbable` is set, and the chip's label tooltip is the only place its status, cadence and expiry are written. The cancel tooltip beside it already passed the prop.
1 parent 8069b42 commit 137aced

2 files changed

Lines changed: 18 additions & 0 deletions

File tree

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { readFileSync } from "node:fs";
2+
import { describe, expect, it } from "vitest";
3+
4+
/**
5+
* There is no rendering harness here, so this pins the prop that decides the tab order
6+
* rather than the tab order itself: `SimpleTooltip` sets `tabIndex={-1}` unless `tabbable`
7+
* is passed. What it does not prove is that focus actually opens the tooltip.
8+
*/
9+
describe("the watch chip's tooltips are reachable by keyboard", () => {
10+
const source = readFileSync(new URL("./WatchChips.tsx", import.meta.url), "utf8");
11+
12+
it("marks both tabbable — the label one carries status, cadence and expiry", () => {
13+
expect(source.match(/<SimpleTooltip/g) ?? []).toHaveLength(2);
14+
expect(source.match(/\btabbable\b/g) ?? []).toHaveLength(2);
15+
});
16+
});

apps/webapp/app/components/dashboard-agent/WatchChips.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ export function WatchChips({
8383
>
8484
<StatusIcon watch={watch} />
8585
<SimpleTooltip
86+
// Status, cadence and expiry live only here, so it needs a tab stop.
87+
tabbable
8688
side="bottom"
8789
content={watchChipTooltip(watch)}
8890
button={<span className="max-w-[12rem] truncate">{label}</span>}

0 commit comments

Comments
 (0)