- globals.css: eine Basisregel :where(:focus-visible) mit --focus-width und --focus-offset (Sonne 3 px), Firefox-:-moz-focusring gleichgezogen; --text-xs 0.8125rem. - Fokus-Codemod (scripts/codemod-t5-focus.mjs): eigene Ringe und outline-none raus, sm:h-/sm:size- zu pointer-fine:, Label-Zeilen mit focus-ring-within; Skript-Fokus (Lücken-Liste, „Gespeichert“) bleibt. - Button/Input 44 px, kompakt nur mit Maus; Icon-Knöpfe mit unsichtbarer 44-px-Trefferfläche bei Touch, Nachbarn mit genug Abstand. - 16 px in Feldern, Labels, Auswahl, Leerzuständen, Listentiteln. - .holo-stage auf allen Beute-Bühnen, .stage-card holt den Seitenring. - Baukasten-Wächter (src/styles/baukasten-guard.spec.ts) mit den Regeln aus A3–A5, Ausnahmen mit Grund; Kalender-Auswahl als Inset-Ring. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
22 lines
579 B
TypeScript
22 lines
579 B
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { TabSwitcher } from "./tab-switcher";
|
|
|
|
describe("TabSwitcher", () => {
|
|
it("makes every tab at least 44 px high for a thumb", () => {
|
|
render(
|
|
<TabSwitcher
|
|
tabs={[
|
|
{ value: "a", label: "A" },
|
|
{ value: "b", label: "B" },
|
|
]}
|
|
value="a"
|
|
onChange={() => {}}
|
|
/>,
|
|
);
|
|
for (const tab of screen.getAllByRole("tab")) {
|
|
expect(tab).toHaveClass("min-h-11", "pointer-fine:min-h-9");
|
|
}
|
|
});
|
|
});
|