dogfather-universe/pruef-tastatur.mjs

/* =====================================================================
   Lässt sich die Seite ohne Maus bedienen?

   WARUM DAS ZÄHLT

   Wer eine Maus nicht führen kann, bedient eine Seite mit der
   Tabulatortaste. Das betrifft weit mehr Menschen als man denkt —
   Motorik, Tremor, temporäre Verletzungen, Bildschirmleser. Seit dem
   Barrierefreiheitsstärkungsgesetz (28.06.2025) ist es für Onlineshops
   und Dienstleistungen im elektronischen Geschäftsverkehr zudem
   verpflichtend.

   DIE DREI FEHLER, DIE MAN NICHT SIEHT

   1. Ein Bedienelement lässt sich nicht anspringen. Für die Maus ist
      es da, für die Tastatur existiert es nicht.

   2. Der Fokus ist unsichtbar. Man springt weiter, sieht aber nicht,
      wo man ist — als würde jemand den Mauszeiger ausblenden.

   3. Eine Falle: Man kommt hinein, aber nicht mehr heraus. Dann ist
      die Seite ab dort unbedienbar.

   Keiner dieser Fehler fällt beim normalen Benutzen auf. Man findet
   sie nur, wenn man es absichtlich versucht.
   ===================================================================== */
import { chromium } from "playwright";

const BASIS = "https://dogfather-universe.com";
const SEITEN = ["/", "/kontakt.html", "/supporter.html", "/abonnieren.html", "/stimmen.html"];

let ok = 0, fehl = 0;
const pruefe = (name, gut, info) => {
  if (gut) { ok++; console.log("  ok   " + name + (info ? "  -> " + info : "")); }
  else { fehl++; console.log("  FEHL " + name + (info ? "  -> " + info : "")); }
};

const browser = await chromium.launch();

for (const pfad of SEITEN) {
  console.log(`\n===== ${pfad} =====`);
  const seite = await browser.newPage({ viewport: { width: 1280, height: 900 } });
  await seite.goto(BASIS + pfad, { waitUntil: "networkidle", timeout: 45000 });
  await seite.waitForTimeout(800);

  /* 1. Wie viele Bedienelemente gibt es, und wie viele erreicht man? */
  const bedienbar = await seite.evaluate(() => {
    const auswahl = "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])";
    return [...document.querySelectorAll(auswahl)].filter((el) => {
      const r = el.getBoundingClientRect();
      const st = getComputedStyle(el);
      return r.width > 0 && r.height > 0 && st.visibility !== "hidden" &&
             st.display !== "none" && !el.disabled &&
             !el.closest('[aria-hidden="true"], [inert]');
    }).length;
  });

  /* Durchtabben und mitschreiben, wo man landet. */
  const weg = [];
  const MAX = Math.min(bedienbar + 15, 90);
  for (let i = 0; i < MAX; i++) {
    await seite.keyboard.press("Tab");
    const wo = await seite.evaluate(() => {
      const el = document.activeElement;
      if (!el || el === document.body) return null;
      const r = el.getBoundingClientRect();
      const st = getComputedStyle(el);
      return {
        kennung: el.tagName + (el.id ? "#" + el.id : "") +
                 (typeof el.className === "string" && el.className
                   ? "." + el.className.split(" ").filter(Boolean)[0] : ""),
        sichtbar: r.width > 0 && r.height > 0,
        /* Ein Fokusring kann als outline ODER als box-shadow gesetzt
           sein -- beides zählt. Fehlt beides, sieht man nichts. */
        ring: (st.outlineStyle !== "none" && parseFloat(st.outlineWidth) > 0) ||
              /inset|rgb/.test(st.boxShadow || ""),
        imBild: r.top >= -5 && r.bottom <= innerHeight + 5,
      };
    });
    if (!wo) break;
    weg.push(wo);
  }

  pruefe("  die Tastatur erreicht Bedienelemente", weg.length > 0,
    weg.length + " von " + bedienbar + " erreicht");

  /* 2. Ist der Fokus überall sichtbar? */
  const ohneRing = weg.filter((w) => w.sichtbar && !w.ring);
  pruefe("  der Fokus ist überall sichtbar", ohneRing.length === 0,
    ohneRing.length ? ohneRing.slice(0, 3).map((w) => w.kennung).join(", ") : "durchgehend");

  /* 3. Keine Falle: Der Weg darf nicht auf einem Element stehenbleiben. */
  const letzte = weg.slice(-6).map((w) => w.kennung);
  const haengt = letzte.length === 6 && new Set(letzte).size === 1;
  pruefe("  keine Tastaturfalle", !haengt, haengt ? "haengt auf " + letzte[0] : "kein Steckenbleiben");

  /* 4. Der Sprung zum Inhalt -- und zwar seine WIRKUNG.

     Zu prüfen, ob der Link dasteht, wäre zu wenig: Ein Sprunglink, der
     den Fokus nicht mitnimmt, sieht im Quelltext korrekt aus und ist in
     der Benutzung wertlos. Deshalb wird er hier wirklich betätigt und
     danach gemessen, wo der nächste Tab landet.

     Am 27.08.2026 gemessen und eingeordnet: Der Fokus liegt unmittelbar
     nach dem Sprung korrekt auf <main>, wandert rund 300 ms später aber
     auf <body>. Nachgewiesen NICHT verursacht durch die Seite -- ein
     Abfangen sämtlicher focus()- und blur()-Aufrufe ergab keinen
     einzigen Aufruf aus dem Seitencode; auch sanftes Scrollen und die
     Animationen wurden einzeln ausgeschlossen. Es ist browserinternes
     Verhalten und folgenlos, denn die Sprungmarke für die Tabulator-
     Reihenfolge bleibt gesetzt. Genau das wird unten gemessen. */
  await seite.evaluate(() => window.scrollTo(0, 0));
  await seite.keyboard.press("Tab");
  const sprung = await seite.evaluate(() => {
    const el = document.activeElement;
    return el && /skip/.test(el.className || "") ? el.textContent.trim() : null;
  });
  pruefe("  Sprung zum Inhalt ist der erste Halt", !!sprung, sprung || "fehlt");

  if (sprung) {
    await seite.keyboard.press("Enter");
    await seite.keyboard.press("Tab");
    const wirkung = await seite.evaluate(() => {
      const el = document.activeElement;
      const m = document.querySelector("main");
      /* Dieselbe Liste wie oben beim Zählen -- nur Links und Knöpfe zu
         durchsuchen wäre zu eng: Auf Seiten mit Formular ist das erste
         Element hinter dem Menü ein Eingabefeld, das dann als "nicht
         gefunden" (-1) herauskäme und die Ersparnis verfälscht. */
      const alle = [...document.querySelectorAll(
        "a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex='-1'])"
      )].filter((e) => { const r = e.getBoundingClientRect(); return r.width > 0 && r.height > 0; });
      return { drin: !!(m && m.contains(el)), platz: alle.indexOf(el) + 1, gesamt: alle.length };
    });
    pruefe("  der Sprung überspringt das Menü wirklich", wirkung.drin,
      wirkung.drin
        ? (wirkung.platz > 0
            ? `landet auf Nr. ${wirkung.platz} von ${wirkung.gesamt} — ${wirkung.platz - 1} Punkte gespart`
            : "landet im Inhalt")
        : "der nächste Tab ist wieder im Menü");
  }

  await seite.close();
}

await browser.close();
console.log(`\n===== ${ok} bestanden, ${fehl} fehlgeschlagen =====`);
process.exitCode = fehl ? 1 : 0;