fix(design): the command palette's active row takes the menus' roving highlight, not an invisible bg-card; the Plex typeahead's hand copy of it goes (E28)

The palette row was ~1.07:1 on its glass (B3 names bg-card hovers a violation). ROVING_HIGHLIGHT is
exported from AnchoredPopover for the listboxes that are not PopoverItems; a contract holds that no file
paints the fill itself and every hand-built option row takes the recipe.
This commit is contained in:
2026-09-25 23:51:39 +02:00
parent ce171fa954
commit 6088e476a7
5 changed files with 65 additions and 9 deletions
@@ -124,6 +124,19 @@ describe("CommandPalette", () => {
).toContain("page:feed");
});
// E28 F35: the active row wore `bg-card`, ~1.07:1 on the palette's glass. It is the menus' row now.
it("marks the active row with the menus' roving highlight, and only that row", () => {
open();
const rows = screen.getAllByRole("option");
const active = rows.filter((r) => r.hasAttribute("data-active"));
expect(active).toHaveLength(1);
expect(active[0]!.getAttribute("aria-selected")).toBe("true");
for (const r of rows) {
expect(r.className).toContain("data-active:bg-accent/35");
expect(r.className).not.toMatch(/(^|\s)bg-card(\s|$)/);
}
});
// The arrows walk the flat result list, not the sections — crossing a group heading is invisible.
it("walks results with the arrows, across group boundaries", () => {
open();