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. Gibt es einen Sprung zum Inhalt? Ohne ihn muss man sich durch
        das ganze Menü tabben, auf jeder einzelnen Seite. */
  const sprung = await seite.evaluate(() => {
    const a = document.querySelector('a[href^="#"]');
    if (!a) return null;
    const t = (a.textContent || "").toLowerCase();
    return /inhalt|content|springen|skip/.test(t) ? a.textContent.trim() : null;
  });
  pruefe("  Sprung zum Inhalt vorhanden", !!sprung, sprung || "fehlt");

  await seite.close();
}

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