dogfather-universe/server/pruef-barrierefrei-workspace.mjs

/* BARRIEREFREIHEIT IM WORKSPACE — jede Seite, jede Rolle.

   Auftrag vom 04.09.2026 (vollstaendiger Audit), Abschnitt 12:
   semantisches HTML, Ueberschriftenstruktur, Alt-Texte,
   Tastaturnavigation, Focus States, Form Labels, ARIA, sinnvolle
   Tab-Reihenfolge.

   WAS ES SCHON GAB UND WAS NICHT. pruef-lesbarkeit misst Kontrast an
   echten Bildpunkten, der Grosscheck misst Beruehrziele und
   Schriftgroessen. Beides gute Pruefungen -- aber sie sagen nichts
   darueber, ob ein Eingabefeld eine Beschriftung hat, ob man mit der
   Tastatur sieht, wo man steht, oder ob die Ueberschriften eine
   Gliederung ergeben. Genau das misst diese hier.

   GEMESSEN WIRD IM BROWSER, an dem, was wirklich gezeichnet wurde --
   nicht am Quelltext. Ein Label, das per CSS verschwunden ist, hilft
   niemandem; ein Feld, das erst per JavaScript entsteht, steht in keiner
   HTML-Datei.

   DIE ANZAHL GEHOERT IN DIE BEDINGUNG. Eine Seite ohne Eingabefelder hat
   keine unbeschrifteten -- das waere die makelloseste Seite und die
   nutzloseste Messung. Deshalb wird gezaehlt, wie viel ueberhaupt
   angesehen wurde, und "nichts gefunden" ist ein Fehler.

   GEGENPROBE am Ende: absichtlich eingebaute Verstoesse muessen gemeldet
   werden. Eine Pruefung, die immer bestaetigt, bestaetigt nichts. */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";

const ordner = mkdtempSync(join(tmpdir(), "ws-a11y-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* Der Port muss frei sein -- sonst wird gegen einen fremden Server
   gemessen. Begruendung in helfer-port.mjs. */
const { portMussFreiSein } = await import("./helfer-port.mjs");
await portMussFreiSein(4253, "die Barrierefreiheitspruefung");

process.env.PORT = "4253";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
await new Promise((r) => setTimeout(r, 900));
const BASIS = "http://127.0.0.1:4253";

let fehler = 0;
const ok = (b, t) => { console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

/* ---- Bestand ------------------------------------------------------------ */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
   `jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
   zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idMara = anlegen("Mara Schmidt-Hohenberg", "manager", "CODE-MANA-0001");
const idPat = anlegen("Patrick von Hohenstein", "scout", "CODE-SCOU-0001");
const idLuna = anlegen("Luna", "creator", "CODE-CREA-0001");
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idPat, jetzt);
d.prepare("INSERT INTO scout_zuteilung (scout_id, manager_id, seit) VALUES (?,?,?)").run(idPat, idMara, jetzt);
for (const [titel, st] of [["Eine offene Aufgabe", "offen"], ["In Arbeit", "arbeit"],
  ["Im Review", "review"], ["Erledigt", "erledigt"]]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
    creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,'hoch',?,?,?,?,?)`)
    .run(titel, "Beschreibung.", st, heute, idLuna, idPat, jetzt, idDogi);
}
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, erstellt, erstellt_von)
  VALUES ('Ein Call','call',?,30,?,?,?)`).run(heute + "T10:00", idLuna, jetzt, idDogi);
for (const b of ["live", "community", "technik", "schutz", "content"]) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, status, dringlichkeit,
    datum, creator_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?,?)`)
    .run(b, b === "content" ? "idee" : "vorbereitung", "Ein Eintrag", "Text dazu.",
         "offen", "hoch", heute, idLuna, jetzt, idPat);
}
d.prepare(`INSERT INTO leads (name, plattform, handle, status, prioritaet, scout_id, erstellt)
  VALUES ('Ein Lead','tiktok','@a','neu','hoch',?,?)`).run(idPat, jetzt);
d.close();

/* ---- Browser ------------------------------------------------------------ */
const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();

const SEITEN = [
  "start.html", "uebersicht.html", "aufgaben.html", "kalender.html", "calls.html",
  "dateien.html", "content.html", "bereich.html?b=live", "profil.html",
  "startcheck.html", "report.html", "scouting.html", "personen.html",
  "wissen.html", "automation.html", "steckbrief.html",
];
const ROLLEN = [
  ["admin", "CODE-DOGI-0001", "DogFather"],
  ["manager", "CODE-MANA-0001", "Manager"],
  ["scout", "CODE-SCOU-0001", "Scout"],
  ["creator", "CODE-CREA-0001", "Creator"],
];

/* Die Messung laeuft IM Browser. */
const messen = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    if (r.width <= 0 || r.height <= 0) return false;
    const st = getComputedStyle(e);
    return st.visibility !== "hidden" && st.display !== "none" && Number(st.opacity) > 0.05;
  };
  const name = (e) => `${e.tagName}${e.id ? "#" + e.id : ""}`
    + `${e.className && typeof e.className === "string" ? "." + e.className.split(" ")[0] : ""}`;

  /* --- Beschriftete Eingabefelder --------------------------------------
     Ein Feld ohne Beschriftung ist fuer ein Vorleseprogramm ein Feld
     ohne Namen -- man hoert "Eingabe" und weiss nicht, wofuer. */
  const felder = [...document.querySelectorAll("input, select, textarea")]
    .filter((e) => e.type !== "hidden" && sichtbar(e));
  const ohneName = felder.filter((e) => {
    if (e.getAttribute("aria-label")?.trim()) return false;
    if (e.getAttribute("aria-labelledby")) {
      const z = e.getAttribute("aria-labelledby").split(/\s+/)
        .map((i) => document.getElementById(i)?.textContent?.trim()).filter(Boolean);
      if (z.length) return false;
    }
    if (e.id && document.querySelector(`label[for="${CSS.escape(e.id)}"]`)) return false;
    if (e.closest("label")) return false;
    if (e.getAttribute("title")?.trim()) return false;
    /* Ein Knopf traegt seine Beschriftung im Wert. */
    if (e.tagName === "INPUT" && ["submit", "button", "reset"].includes(e.type) && e.value) return false;
    return true;
  }).map(name);

  /* --- Knoepfe mit Namen ------------------------------------------------
     Ein Knopf, in dem nur ein Zeichen steht, heisst fuer ein
     Vorleseprogramm gar nichts. */
  const knoepfe = [...document.querySelectorAll("button, [role=button]")].filter(sichtbar);
  const stummeKnoepfe = knoepfe.filter((e) => {
    if (e.getAttribute("aria-label")?.trim()) return false;
    if (e.getAttribute("title")?.trim()) return false;
    const text = (e.textContent || "").replace(/\s+/g, "").trim();
    /* Reine Symbole (Pfeile, Kreuze, Stifte) zaehlen nicht als Text. */
    return text.length === 0 || !/[\p{L}\p{N}]/u.test(text);
  }).map(name);

  /* --- Verweise mit Ziel und Namen -------------------------------------- */
  const verweise = [...document.querySelectorAll("a")].filter(sichtbar);
  const stummeVerweise = verweise.filter((e) => {
    if (e.getAttribute("aria-label")?.trim()) return false;
    if (e.getAttribute("title")?.trim()) return false;
    return !/[\p{L}\p{N}]/u.test((e.textContent || ""));
  }).map(name);

  /* --- Bilder mit Alt-Text ---------------------------------------------- */
  const bilder = [...document.querySelectorAll("img")].filter(sichtbar);
  const ohneAlt = bilder.filter((e) => !e.hasAttribute("alt")).map(name);

  /* --- Ueberschriftengliederung -----------------------------------------
     Genau eine h1, und keine uebersprungene Stufe (h2 -> h4). */
  const ueber = [...document.querySelectorAll("h1,h2,h3,h4,h5,h6")].filter(sichtbar);
  const stufen = ueber.map((e) => Number(e.tagName[1]));
  const spruenge = [];
  for (let i = 1; i < stufen.length; i++) {
    if (stufen[i] - stufen[i - 1] > 1) {
      spruenge.push(`h${stufen[i - 1]} -> h${stufen[i]} bei "${ueber[i].textContent.trim().slice(0, 24)}"`);
    }
  }
  const leereUeber = ueber.filter((e) => !(e.textContent || "").trim()).map(name);

  /* --- Sprache und Titel ------------------------------------------------- */
  const sprache = document.documentElement.getAttribute("lang") || "";
  const titel = (document.title || "").trim();

  /* --- Doppelte Kennungen ------------------------------------------------
     Zwei Elemente mit derselben id: label[for] trifft dann das falsche. */
  const ids = [...document.querySelectorAll("[id]")].map((e) => e.id);
  const doppelteIds = [...new Set(ids.filter((x, i) => ids.indexOf(x) !== i))];

  /* --- Bedienbares mit positivem tabindex --------------------------------
     Ein positiver tabindex reisst die Reihenfolge aus dem Dokument und
     ist praktisch immer ein Fehler. */
  const positiverTab = [...document.querySelectorAll("[tabindex]")]
    .filter((e) => Number(e.getAttribute("tabindex")) > 0).map(name);

  /* --- Bedienbares, das kein Knopf ist ------------------------------------
     Ein <div> mit onclick ist mit der Tastatur nicht erreichbar. */
  const klickbareDivs = [...document.querySelectorAll("div[onclick], span[onclick]")]
    .filter(sichtbar).map(name);

  return {
    felderGesamt: felder.length, ohneName,
    knoepfeGesamt: knoepfe.length, stummeKnoepfe,
    verweiseGesamt: verweise.length, stummeVerweise,
    bilderGesamt: bilder.length, ohneAlt,
    ueberGesamt: ueber.length, h1: stufen.filter((s) => s === 1).length, spruenge, leereUeber,
    sprache, titel, doppelteIds, positiverTab, klickbareDivs,
  };
};

/* --- Sichtbarer Fokus ----------------------------------------------------
   Wer mit der Tastatur bedient, muss SEHEN, wo er steht.

   MIT DER ECHTEN TASTATUR GEMESSEN, nicht mit element.focus().
   Der erste Entwurf rief focus() aus JavaScript auf. Das loest in
   Chromium bei einem <button> :focus-visible NICHT aus -- gemessen wurde
   damit :focus, also eine ganz andere Regel als die, an der die
   Tastaturbedienung wirklich haengt. Die Messung hat den echten Fehler
   zwar gefunden, aber aus dem falschen Grund; sie haette genauso gut
   danebenliegen koennen.

   Dazu kommt der Uebergang: Direkt nach dem Tastendruck steht im
   berechneten Stil eine laufende Interpolation (oklab-Farben, mit
   Nullschatten aufgefuellte Listen). Wer da misst, liest einen
   Zwischenstand. Deshalb eine kurze Pause vor dem Ablesen.

   Gemessen werden die ersten Ziele der Tab-Reihenfolge -- genau die,
   die ein Mensch zuerst erreicht. */
const fokusZieleSammeln = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    return r.width > 0 && r.height > 0 && getComputedStyle(e).visibility !== "hidden";
  };
  const ziele = [...document.querySelectorAll("a[href], button, input, select, textarea")]
    .filter((e) => sichtbar(e) && !e.disabled).slice(0, 18);
  const stil = (e) => {
    const c = getComputedStyle(e);
    return [c.outlineStyle, c.outlineWidth, c.outlineColor, c.boxShadow,
      c.borderColor, c.backgroundColor, c.textDecorationLine].join("|");
  };
  /* Alte Markierungen weg, BEVOR neue gesetzt werden. Wird diese
     Funktion zweimal auf derselben Seite aufgerufen, zeigte ein
     stehengebliebener Index sonst auf ein Ziel aus dem vorigen Lauf --
     und verglichen wuerde gegen den Ruhewert eines ganz anderen
     Elements. */
  for (const alt of document.querySelectorAll("[data-fokusmess]")) {
    alt.removeAttribute("data-fokusmess");
  }
  ziele.forEach((e, i) => e.setAttribute("data-fokusmess", String(i)));
  return ziele.map((e) => {
    const klasse = typeof e.className === "string" && e.className
      ? "." + e.className.split(" ")[0] : "";
    const text = (e.textContent || e.value || e.getAttribute("aria-label") || "").trim().slice(0, 24);
    return { ruhe: stil(e), name: `${e.tagName}${e.id ? "#" + e.id : ""}${klasse}${text ? ` "${text}"` : ""}` };
  });
};

/** Tabbt durch die Seite und meldet, wer beim Fokussieren gleich aussieht. */
async function fokusMitTastatur(seite) {
  const ziele = await seite.evaluate(fokusZieleSammeln);
  if (!ziele.length) return { geprueft: 0, ohneFokus: [] };

  const ohneFokus = [];
  let erreicht = 0;
  await seite.evaluate(() => document.body.focus?.());
  for (let schritt = 0; schritt < ziele.length + 12 && erreicht < ziele.length; schritt++) {
    await seite.keyboard.press("Tab");
    /* Kurz warten: sonst liest man einen laufenden Uebergang ab. */
    await seite.waitForTimeout(120);
    const jetzt = await seite.evaluate(() => {
      const e = document.activeElement;
      const i = e?.getAttribute?.("data-fokusmess");
      if (i === null || i === undefined) return null;
      const c = getComputedStyle(e);
      return { i: Number(i), stil: [c.outlineStyle, c.outlineWidth, c.outlineColor, c.boxShadow,
        c.borderColor, c.backgroundColor, c.textDecorationLine].join("|") };
    });
    if (!jetzt) continue;
    erreicht++;
    if (jetzt.stil === ziele[jetzt.i].ruhe) ohneFokus.push(ziele[jetzt.i].name);
  }
  return { geprueft: erreicht, ohneFokus };
}

let seitenGesamt = 0, felderGesamt = 0, knoepfeGesamt = 0, verweiseGesamt = 0, ueberGesamt = 0;
let fokusGesamt = 0;
const maengel = [];

for (const [rolle, code, rollenName] of ROLLEN) {
  const kontext = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await kontext.newPage();
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click(`.rolle[data-rolle="${rolle}"]`);
  await seite.fill("#code", code);
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 20000 });

  let schlecht = 0;
  for (const datei of SEITEN) {
    const antwort = await seite.goto(BASIS + "/workspace/" + datei, { waitUntil: "networkidle" });
    /* Seiten, die diese Rolle nicht sehen darf, landen per Umleitung auf
       start.html -- das ist richtig so und keine Messung wert. */
    if (!seite.url().includes(datei.split("?")[0])) continue;
    if (antwort && antwort.status() >= 400) continue;
    await seite.waitForTimeout(400);

    const r = await seite.evaluate(messen);
    seitenGesamt++;
    felderGesamt += r.felderGesamt;
    knoepfeGesamt += r.knoepfeGesamt;
    verweiseGesamt += r.verweiseGesamt;
    ueberGesamt += r.ueberGesamt;

    const m = [];
    if (r.ohneName.length) m.push(`Feld ohne Beschriftung: ${r.ohneName.slice(0, 3).join(", ")}`);
    if (r.stummeKnoepfe.length) m.push(`Knopf ohne Namen: ${r.stummeKnoepfe.slice(0, 3).join(", ")}`);
    if (r.stummeVerweise.length) m.push(`Verweis ohne Namen: ${r.stummeVerweise.slice(0, 3).join(", ")}`);
    if (r.ohneAlt.length) m.push(`Bild ohne alt: ${r.ohneAlt.slice(0, 3).join(", ")}`);
    if (r.h1 !== 1) m.push(`${r.h1} Ueberschriften erster Stufe (genau 1 erwartet)`);
    if (r.spruenge.length) m.push(`Stufensprung: ${r.spruenge.slice(0, 2).join(", ")}`);
    if (r.leereUeber.length) m.push(`leere Ueberschrift: ${r.leereUeber.slice(0, 2).join(", ")}`);
    if (!r.sprache) m.push("kein lang am <html>");
    if (!r.titel) m.push("kein Seitentitel");
    if (r.doppelteIds.length) m.push(`doppelte id: ${r.doppelteIds.slice(0, 3).join(", ")}`);
    if (r.positiverTab.length) m.push(`positiver tabindex: ${r.positiverTab.slice(0, 3).join(", ")}`);
    if (r.klickbareDivs.length) m.push(`klickbares div: ${r.klickbareDivs.slice(0, 3).join(", ")}`);

    const f = await fokusMitTastatur(seite);
    fokusGesamt += f.geprueft;
    if (f.ohneFokus.length) m.push(`kein sichtbarer Fokus: ${f.ohneFokus.slice(0, 3).join(", ")}`);

    if (m.length) { schlecht++; maengel.push(`      ${rollenName} / ${datei.padEnd(22)} ${m.join("; ")}`); }
  }
  console.log(`  ${schlecht === 0 ? "ok  " : "FEHL"} ${rollenName.padEnd(10)} ${schlecht} Seiten mit Maengeln`);
  if (schlecht) fehler++;
  await kontext.close();
}

console.log("");
for (const z of maengel.slice(0, 40)) console.log(z);
if (maengel.length > 40) console.log(`      ... und ${maengel.length - 40} weitere`);

console.log(`\n=== Umfang der Messung ===`);
ok(seitenGesamt >= 40, `${seitenGesamt} Seitenaufrufe angesehen`);
ok(felderGesamt >= 50, `${felderGesamt} Eingabefelder auf Beschriftung geprueft`);
ok(knoepfeGesamt >= 100, `${knoepfeGesamt} Knoepfe auf einen Namen geprueft`);
ok(verweiseGesamt >= 100, `${verweiseGesamt} Verweise geprueft`);
ok(ueberGesamt >= 40, `${ueberGesamt} Ueberschriften auf Gliederung geprueft`);
ok(fokusGesamt >= 100, `${fokusGesamt} bedienbare Elemente auf sichtbaren Fokus geprueft`);

/* =======================================================================
   GEGENPROBE — findet diese Messung ueberhaupt etwas?
   ======================================================================= */
console.log(`\n=== Gegenprobe (muss anschlagen) ===`);
{
  const kontext = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await kontext.newPage();
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 20000 });
  await seite.waitForTimeout(700);

  const sauber = await seite.evaluate(messen);
  ok(sauber.ohneName.length === 0 && sauber.stummeKnoepfe.length === 0,
    "die Startseite ist unauffaellig");

  const kaputt = await seite.evaluate(() => {
    const f = document.createElement("input");
    f.type = "text"; f.id = "ohne-label-test";
    const k = document.createElement("button");
    k.textContent = "×";
    const b = document.createElement("img");
    b.src = "/workspace/assets/img/marke-husky.webp"; b.style.width = "40px";
    const u = document.createElement("h5");
    u.textContent = "Ueberspringt Stufen";
    const dv = document.createElement("div");
    dv.setAttribute("onclick", "void 0"); dv.textContent = "klick"; dv.style.padding = "10px";
    const zwei = document.createElement("span");
    zwei.id = document.querySelector("[id]")?.id || "doppelt";
    for (const e of [f, k, b, u, dv, zwei]) document.body.append(e);
    return true;
  });
  await seite.waitForTimeout(250);
  const r = await seite.evaluate(messen);
  ok(kaputt && r.ohneName.length > 0, `unbeschriftetes Feld wird gefunden (${r.ohneName.join(",")})`);
  ok(r.stummeKnoepfe.length > 0, `Knopf ohne Namen wird gefunden (${r.stummeKnoepfe.join(",")})`);
  ok(r.ohneAlt.length > 0, `Bild ohne alt wird gefunden (${r.ohneAlt.join(",")})`);
  ok(r.spruenge.length > 0, `Stufensprung wird gefunden (${r.spruenge.join(",")})`);
  ok(r.klickbareDivs.length > 0, `klickbares div wird gefunden (${r.klickbareDivs.join(",")})`);
  ok(r.doppelteIds.length > 0, `doppelte id wird gefunden (${r.doppelteIds.join(",")})`);

  /* DIE WICHTIGSTE GEGENPROBE — sie fehlte zuerst.
     Die Fokusmessung wurde von element.focus() auf echte Tastendruecke
     umgestellt. Danach meldete sie "0 Seiten mit Maengeln" -- was
     genauso gut heissen konnte, dass sie ueberhaupt nichts mehr findet
     (falsche Markierung, Tab-Reihenfolge verfehlt, zu frueh gemessen).
     Ohne diesen Beweis waere die Umstellung ein gruener Haken fuer
     nichts gewesen.

     Ein Knopf, dem jede Fokusanzeige verboten wird, MUSS auffallen. */
  await seite.evaluate(() => {
    /* Ruhe UND Fokus bekommen exakt dieselben Werte -- sonst ist der
       Knopf im Fokus zwar ohne Ring, aber sonst irgendwie anders, und
       die Messung wertet das (zu Recht) als Unterschied. Genau daran
       ist der erste Entwurf dieser Gegenprobe gescheitert: Er setzte
       `background: inherit`, was etwas anderes ergab als der
       Ruhezustand -- der Knopf sah im Fokus anders aus und galt
       deshalb als in Ordnung. */
    const stil = document.createElement("style");
    stil.textContent =
      "#ohne-fokus-test, #ohne-fokus-test:focus, #ohne-fokus-test:focus-visible {"
      + " outline: none !important; box-shadow: none !important;"
      + " border: 1px solid rgb(51,51,51) !important;"
      + " background: rgb(17,17,17) !important; color: rgb(238,238,238) !important;"
      + " text-decoration: none !important; }";
    document.head.append(stil);
    const k = document.createElement("button");
    k.id = "ohne-fokus-test"; k.type = "button"; k.textContent = "Kein Fokus zu sehen";
    /* Ganz nach vorn in die Tab-Reihenfolge, damit er sicher drankommt. */
    document.body.prepend(k);
  });
  await seite.waitForTimeout(200);
  const fp = await fokusMitTastatur(seite);
  ok(fp.ohneFokus.some((n) => n.includes("ohne-fokus-test")),
    `ein Knopf ohne Fokusanzeige wird per Tastatur gefunden `
    + `(${fp.geprueft} abgelaufen, gemeldet: ${fp.ohneFokus.join(", ") || "nichts"})`);

  await kontext.close();
}

await browser.close();
console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler ? 1 : 0);