José Almeida
c93ced5129
* fix: stop iOS focus-zoom and casual pinch-zoom on mobile * fix: scope mobile 16px rule to editable controls, document zoom tradeoff * fix: keep code-block language picker compact on touch devices * test: pin viewport assertion to exact maximum-scale token * fix: keep code-block language select under mobile 16px zoom floor * fix: apply mobile 16px zoom floor on hybrid touch devices via any-pointer * fix: drop maximum-scale=1 viewport lock (no-op on iOS, fails a11y audit)
29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
import { test, expect } from "../fixtures/test-base";
|
|
import { MobileKanbanPage } from "../pages/mobile-kanban-page";
|
|
|
|
// Runs on the mobile-chrome Playwright project (Pixel 5 emulation, touch →
|
|
// any-pointer: coarse) — see e2e/playwright.config.ts. Guards the iOS focus-zoom
|
|
// fix: the 16px coarse-pointer form-control rule (globals.css) that stops Safari
|
|
// from auto-zooming when a sub-16px field is focused.
|
|
test.describe("Mobile zoom hardening", () => {
|
|
test("form fields render at >= 16px to prevent iOS focus-zoom", async ({ testPage }) => {
|
|
const mobile = new MobileKanbanPage(testPage);
|
|
await mobile.goto();
|
|
|
|
// Guard: the 16px rule is gated on `@media (any-pointer: coarse)`. The
|
|
// mobile-chrome project (Pixel 5) emulates touch, so the testPage context
|
|
// exposes a coarse pointer. Assert it here so a future fixture change that
|
|
// drops touch emulation fails loudly instead of silently skipping the rule
|
|
// under test.
|
|
const coarse = await testPage.evaluate(() => matchMedia("(any-pointer: coarse)").matches);
|
|
expect(coarse).toBe(true);
|
|
|
|
await mobile.openSearch();
|
|
const input = mobile.searchInput();
|
|
await input.focus();
|
|
|
|
const fontSize = await input.evaluate((el) => parseFloat(getComputedStyle(el).fontSize));
|
|
expect(fontSize).toBeGreaterThanOrEqual(16);
|
|
});
|
|
});
|