peter
30fbdc52b2
A FocusSafeButton that holds the focus is disabled by aria-disabled, not the native attribute, so every hover gated on `:disabled` / `enabled:` alone still fired on it — the glass lift, the primary / danger / warn dim, and eight `enabled:hover:` chains (saved views, the player's list buttons, the undo toolbar). Measured on localdev: the Pager's Next, focused at the last page, now keeps its resting border and shadow under the pointer. The CSS selectors and the chains also exclude `[aria-disabled="true"]`, and a lint rule refuses a bare `enabled:hover:` from now on.
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
import { fileURLToPath } from "node:url";
|
|
|
|
import { ESLint } from "eslint";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
// Two lint rules about controls: no native <select> (the canonical "FE control" row in CLAUDE.md;
|
|
// six had drifted in before the rule existed), and no hover gated on `enabled:` alone. A selector
|
|
// that matches nothing looks exactly like a clean codebase, so this pins that each fires.
|
|
const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
|
|
|
|
async function refused(source: string): Promise<number> {
|
|
const eslint = new ESLint({ cwd: FRONTEND });
|
|
const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" });
|
|
return (result?.messages ?? []).filter((m) => m.message.startsWith("No native <select>")).length;
|
|
}
|
|
|
|
describe("a native select", () => {
|
|
it("is refused; the house controls are not", async () => {
|
|
expect(await refused("export const A = () => <select />;\n")).toBe(1);
|
|
expect(await refused("export const B = () => <SegmentedToggle />;\n")).toBe(0);
|
|
});
|
|
});
|
|
|
|
// `enabled:hover:` is blind to a focused FocusSafeButton (aria-disabled, not the native attribute),
|
|
// which then lit up on hover as if a click would work.
|
|
describe("a hover gated on `enabled:` alone", () => {
|
|
it("is refused; the aria-aware gate is not", async () => {
|
|
const eslint = new ESLint({ cwd: FRONTEND });
|
|
const lint = async (cls: string) =>
|
|
(
|
|
await eslint.lintText(
|
|
`export const c = "p-1 ${cls}:text-fg";
|
|
`,
|
|
{
|
|
filePath: "src/components/__probe.tsx",
|
|
},
|
|
)
|
|
)[0]?.messages.filter((m) => m.message.startsWith("`enabled:hover:`")).length;
|
|
expect(await lint("enabled:hover")).toBe(1);
|
|
expect(await lint("enabled:not-aria-disabled:hover")).toBe(0);
|
|
});
|
|
});
|