diff --git a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts index 6918ade..8347da8 100644 --- a/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts +++ b/felsokning/app/src/felsokning/__tests__/alva-yta.test.ts @@ -232,6 +232,19 @@ describe("ALVA-ytan bär sin egen typografi", () => { it("siffror sätts med fast bredd så beteckningar går att jämföra", () => { expect(css).toContain("tabular-nums"); }); + + it("formulärfält är minst 16 px på pekskärm — annars autozoomar iOS och fastnar", () => { + // Buggen som rapporterades från en telefon: inloggningens fält är + // 14 px, iOS zoomar in vid fokus och zoomar aldrig ut, och portalens + // första sida möts i inzoomat läge. Botemedlet är textstorleken, + // inte maximum-scale — nypzoomen är ett tillgänglighetsverktyg och + // får inte offras. + const regel = css.match(/@media \(hover: none\) and \(pointer: coarse\)[\s\S]*?\n\}/)?.[0] ?? ""; + expect(regel).toContain(".alva-yta input"); + expect(regel).toContain(".alva-yta textarea"); + expect(regel).toContain(".alva-yta select"); + expect(regel).toContain("font-size: 16px"); + }); }); // ---- Snittet måste följa med i bygget ---------------------------------- diff --git a/felsokning/app/src/index.css b/felsokning/app/src/index.css index ecc1a03..79c75ca 100644 --- a/felsokning/app/src/index.css +++ b/felsokning/app/src/index.css @@ -199,6 +199,23 @@ font-variant-numeric: tabular-nums; } +/* iOS Safari zoomar in på ett formulärfält vars text är mindre än 16 px + — och zoomar inte ut igen efter navigeringen. Den som loggade in på en + telefon fastnade därför i inzoomat läge på portalens första sida. + + Botemedlet är fältets textstorlek, inte viewport-metataggen: + `maximum-scale=1` hade också stoppat inzoomningen men samtidigt tagit + ifrån användaren nypzoomen, och ett tillgänglighetsverktyg ska inte + offras för att slippa en CSS-rad. Regeln gäller bara pekskärmar — + på skrivbordet finns ingen autozoom och 13 px är rätt täthet. */ +@media (hover: none) and (pointer: coarse) { + .alva-yta input:not([type="checkbox"]):not([type="radio"]), + .alva-yta select, + .alva-yta textarea { + font-size: 16px; + } +} + .alva-yta .font-mono { font-family: ui-monospace,