From 7edb9c1bdb10e1c6b83230d05775db1c13ef9590 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Fri, 2 Oct 2026 04:56:52 +0200 Subject: [PATCH] Grosscheck: mit Finger messen -- und 0 px ist keine kleine Schrift MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AUFTRAG: „mach jetzt den prüf groß check." ERGEBNIS DES LAUFS: 206 Seiten, 122 551 Elemente, 3 870 bedienbare. Rechner (1280 px) alle vier Rollen sauber, 33 oeffentliche Seiten auf beiden Groessen sauber, alle fuenf Gegenproben schlagen an. Vier Beanstandungen, alle dieselbe Stelle -- und beide Ursachen lagen in der Pruefung, nicht am Produkt. 1. ER HAT OHNE FINGER GEMESSEN Die drei Browser-Kontexte setzten nur die Fenstergroesse. Ohne `hasTouch` meldet Chromium `pointer: fine`, und KEINE Regel aus `@media (pointer: coarse)` greift -- dort stehen im ganzen Haus die 44-Pixel-Beruehrziele. Ausgerechnet die Zeile `if (breite < 700 && r.klein.length)` misst genau diese Beruehrziele. Die Handy-Haelfte dieses Laufs hat also eine Seite vermessen, die es auf keinem Handy gibt. Dieselbe Luecke wie am 01.10. bei pruef-breiten, wo von sechs Befunden nach dem Nachruesten genau einer uebrig blieb; 57 andere Pruefdateien hatten es laengst, diese nicht. Jetzt `hasTouch: b <= 860, isMobile: b <= 860` an allen drei Stellen -- gleiche Schwelle, gleiche Schreibweise wie ueberall sonst. 2. „0px" IST KEINE KLEINE SCHRIFT, SONDERN GAR KEINE Gemeldet wurde viermal (einmal je Rolle) dasselbe: kalender.html zu klein: A.k-pille 0px | A.k-pille 0px | SPAN.k-anlass "🇩🇪 Tag der D" 0px Am echten Bildschirm nachgemessen statt der Zahl geglaubt: Kasten 8x8 · Schrift 0px · Zeilenhoehe 0px GEMALTER TEXT: Hoehe 0 -- kein einziger Textkasten pointer-events: none · alle Kinder display:none title="Tag der Deutschen Einheit — gesetzlicher Feiertag" Tagesdialog: „10:00 Uhr Ein absichtlich sehr langer Titel …" Im schmalen Monatsraster (Zelle 46 px breit) wird ein Termin absichtlich zu einem farbigen PUNKT. `font-size: 0` ist dort das Mittel, nicht der Mangel; kalender.css begruendet es ausfuehrlich, und den Namen nennt der Tagesdialog. Es wird nichts gemalt -- die Frage „ist dieser Text zu klein zum Lesen?" ist bei 0 px falsch gestellt. Die Messung fragt jetzt `0 < Groesse < Grenze`. Zwischen 1 und 11,5 px faellt alles weiterhin auf, und genau dort liegt der echte Mangel. WAS DAS NICHT IST: ein Freibrief. `font-size: 0` versteckt Text auch vor dem sehenden Auge -- aber das ist ein FEHLENDER Inhalt, kein zu kleiner, und mit `display: none` entkaeme er dieser Messung ohnehin genauso. 3. UND DIE AUSNAHME PRUEFT SICH IN BEIDE RICHTUNGEN Eine Ausnahme ohne Gegenprobe ist der Anfang einer Liste, die niemand pflegt. Deshalb zwei neue Gegenproben, direkt neben den fuenf vorhandenen: ein Absatz mit 6 px -> MUSS gemeldet werden ein Punkt mit 0 px -> darf NICHT gemeldet werden Ohne die erste waere die neue Regel auch dann gruen, wenn sie gar nichts mehr findet. AM PRODUKT IST NICHTS GEAENDERT -- eine einzige Pruefdatei. Kein Stempel, kein Neustart noetig. Co-Authored-By: Claude Opus 5 --- server/pruef-grosscheck.mjs | 103 +++++++++++++++++++++++++++++++++--- 1 file changed, 97 insertions(+), 6 deletions(-) diff --git a/server/pruef-grosscheck.mjs b/server/pruef-grosscheck.mjs index 709588f4..f4aeb98f 100644 --- a/server/pruef-grosscheck.mjs +++ b/server/pruef-grosscheck.mjs @@ -317,10 +317,42 @@ const messen = () => { Rollenmarke und jedes Kleinschild (10,5 bis 11,4 px), also Gestaltung und keinen Mangel. Am Rechner ist die Grenze deshalb 10 px; darunter wird es auch dort muehsam. */ + /* NULL IST KEINE KLEINE SCHRIFT, SONDERN GAR KEINE (02.10.2026). + + Dieser Lauf meldete auf dem Handy in kalender.html vier + Elemente mit `0px` als „zu klein" -- bei allen vier Rollen + dieselben. Nachgemessen am echten Bildschirm, nicht an der + Zahl: + + Kasten 8x8 · Schrift 0px · Zeilenhoehe 0px + GEMALTER TEXT: Hoehe 0 (kein einziger Textkasten) + pointer-events: none · alle Kinder display:none + title="Tag der Deutschen Einheit — gesetzlicher Feiertag" + und der Tagesdialog nennt den vollen Namen + + Im schmalen Monatsraster (Zelle 46 px) wird ein Termin + absichtlich zu einem farbigen PUNKT. `font-size: 0` ist dort + das Mittel, nicht der Mangel -- kalender.css begruendet es + ausfuehrlich, und der Name steht im Tagesdialog. + + Die Frage dieser Messung ist „ist Text zu klein zum LESEN?". + Bei 0 px wird nichts gemalt; da ist die Frage falsch gestellt. + Zwischen 1 und 11,5 px wird sie weiterhin gestellt -- genau + dort liegt der echte Mangel, und die Gegenprobe unten beweist + es in beide Richtungen. + + WAS DAS NICHT IST: ein Freibrief. `font-size: 0` versteckt + Text auch vor dem sehenden Auge -- aber das ist ein FEHLENDER + INHALT, kein zu kleiner, und mit `display: none` entkaeme er + dieser Messung ohnehin genauso. Hier wird gemessen, was + gemessen werden kann. */ winzig: [...document.querySelectorAll("p, span, li, a, label, small, h1, h2, h3, h4")] - .filter((e) => e.children.length === 0 && (e.textContent || "").trim().length > 3 - && sichtbar(e) - && parseFloat(getComputedStyle(e).fontSize) < (innerWidth < 700 ? 11.5 : 10)) + .filter((e) => { + if (e.children.length !== 0 || (e.textContent || "").trim().length <= 3) return false; + if (!sichtbar(e)) return false; + const gr = parseFloat(getComputedStyle(e).fontSize); + return gr > 0 && gr < (innerWidth < 700 ? 11.5 : 10); + }) .slice(0, 3).map((e) => `${name(e)} ${getComputedStyle(e).fontSize}`), }; }; @@ -343,10 +375,28 @@ const GERAETE = [[1280, 900, "Rechner"], [390, 844, "Handy"]]; let seitenGesamt = 0, elementeGesamt = 0, bedienbarGesamt = 0; const probleme = []; +/* MIT FINGER, WENN ES EIN FINGER WAERE (02.10.2026). + + Hier stand nur die Fenstergroesse. Ohne `hasTouch` meldet der + Browser `pointer: fine`, und KEINE Regel aus `@media (pointer: + coarse)` greift -- dort stehen im ganzen Haus die 44-Pixel- + Beruehrziele. Ausgerechnet die Zeile `if (breite < 700 && r.klein + .length)` weiter unten misst genau diese Beruehrziele. Die + Handy-Haelfte dieses Laufs hat also bisher gegen eine Seite + gemessen, die es auf keinem Handy gibt -- jeder Befund daraus war + ein Messfehler, so wie die sechs von pruef-breiten am 01.10., von + denen nach dem Nachruesten genau einer uebrig blieb. + + Dieselbe Schwelle und dieselbe Schreibweise wie in den 57 anderen + Pruefdateien, die es schon haben. */ +const fingerAb = (b) => b <= 860; + for (const [breite, hoehe, wie] of GERAETE) { console.log(`\n=================== ${wie} (${breite}px) ===================`); for (const [rolle, code, rollenName] of ROLLEN) { - const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } }); + const kontext = await browser.newContext({ + viewport: { width: breite, height: hoehe }, + hasTouch: fingerAb(breite), isMobile: fingerAb(breite) }); const konsole = []; const seite = await kontext.newPage(); seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 90)); }); @@ -437,7 +487,10 @@ ok(OEFFENTLICH.length >= 10, `${OEFFENTLICH.length} oeffentliche Seiten gefunden (unter 10 waere ein Fehler in dieser Pruefung selbst)`); for (const [breite, hoehe, wie] of GERAETE) { - const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } }); + /* Auch hier der Finger -- siehe die Begruendung oben. */ + const kontext = await browser.newContext({ + viewport: { width: breite, height: hoehe }, + hasTouch: fingerAb(breite), isMobile: fingerAb(breite) }); const seite = await kontext.newPage(); const konsole = []; seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 80)); }); @@ -475,7 +528,10 @@ for (const [breite, hoehe, wie] of GERAETE) { ================================================================ */ console.log("\n=================== Gegenprobe ==================="); { - const kontext = await browser.newContext({ viewport: { width: 390, height: 844 } }); + /* Die Gegenprobe misst auf 390 px -- also mit Finger, sonst + prueft sie eine andere Seite als der Lauf darueber. */ + const kontext = await browser.newContext({ + viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true }); const seite = await kontext.newPage(); await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" }); await seite.click('.rolle[data-rolle="admin"]'); @@ -507,6 +563,41 @@ console.log("\n=================== Gegenprobe ==================="); ok(kaputt.klein.length > 0, `ein absichtlich winziges Beruehrziel wird gefunden (${kaputt.klein.join(", ")})`); + /* DIE NULL-AUSNAHME IN BEIDE RICHTUNGEN (02.10.2026). + + Seit heute zaehlt `font-size: 0` nicht mehr als „zu kleine + Schrift" (Begruendung oben bei `winzig`). Eine Ausnahme ohne + Gegenprobe ist der Anfang einer Liste, die niemand pflegt -- + deshalb werden hier BEIDE Seiten gemessen: Sechs Pixel muessen + weiterhin auffallen, Null darf es nicht. */ + await seite.evaluate(() => { + const m = document.querySelector("main"); + const sechs = document.createElement("p"); + sechs.style.cssText = "font-size:6px"; + sechs.textContent = "sechs Pixel sind zu klein zum Lesen"; + sechs.id = "probe-sechs"; + m?.append(sechs); + }); + await seite.waitForTimeout(150); + const mitSechs = await seite.evaluate(messen); + ok(mitSechs.winzig.some((z) => /6px/.test(z)), + `6 px Schrift faellt weiterhin auf (${mitSechs.winzig.join(" | ")})`); + + await seite.evaluate(() => { + document.getElementById("probe-sechs")?.remove(); + const m = document.querySelector("main"); + const null0 = document.createElement("span"); + null0.style.cssText = "font-size:0;line-height:0;display:inline-block;" + + "width:8px;height:8px;background:#6aa9ff"; + null0.textContent = "ein Punkt, der nur Farbe ist"; + m?.append(null0); + }); + await seite.waitForTimeout(150); + const mitNull = await seite.evaluate(messen); + ok(!mitNull.winzig.some((z) => /\b0px/.test(z)), + `ein Punkt mit Schriftgroesse 0 wird NICHT mehr gemeldet (${ + mitNull.winzig.length ? mitNull.winzig.join(" | ") : "nichts gemeldet"})`); + /* DIE AUSNAHMEN DUERFEN NICHT ALLES VERSCHLUCKEN. Drei Ausnahmen sind eingebaut (absichtlich unsichtbare Elemente,