Eigener Durchgang vor dem Livegang: drei Fehler, zwei Feinheiten

Umut: "schau selbst drueber, wuerdest du so online gehen?" Nein, so nicht.

Verborgener Text stand sichtbar auf der Seite: .visually-hidden gibt es in
admin.css, aber nicht in site.css. "Bewertung: 5 von 5" neben den Sternen
und "(Pflichtfeld)" hinter jedem Formularfeld waren zu lesen - seit dem
ersten Formular. axe meldet so etwas nicht, es prueft das Ansagen, nicht
das faelschliche Sichtbarsein.

Jede Spalte war ein Kasten: Rahmen, Ecken, 30px Innenabstand von
vornherein. Eine Spalte ist ein Layoutmittel; die Karte ist jetzt eine
Einstellung. Die Demoseite wirkt dadurch ruhiger.

Der Knopf im Aufruf-Band war Tinte auf Tinte, also auf dunklem Grund fast
unsichtbar - ausgerechnet beim Handlungsaufruf. Aufruf-Band und Formular
nehmen die Akzentfarbe.

Dazu: gestapelte Karten klebten aneinander (18px), und die linke Spalte im
Kontaktbereich war halb leer.

Geprueft: 393 Tests unter PHP 8.2 und 8.4, Editortest, Browserpruefung,
axe ohne Verstoss.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tests/CmsTest.php

@@ -2227,6 +2227,38 @@ final class CmsTest extends TestCase
         self::assertStringNotContainsString('outline:3px solid #b85c12', $site, 'Auch der Fokusring folgt der Palette.');
     }
 
+    public function testTextForScreenReadersStaysOutOfSight(): void
+    {
+        // Der peinlichste Fund der Reihe: die Klasse für ausschließlich vorgelesenen Text gab es
+        // in der Verwaltung, aber nicht auf den öffentlichen Seiten. Damit stand „Bewertung: 5
+        // von 5“ neben den Sternen und „(Pflichtfeld)“ hinter jedem Feld sichtbar auf der Seite.
+        // axe hat das nie gemeldet, weil es prüft, ob etwas angesagt wird - nicht, ob etwas
+        // fälschlich zu sehen ist.
+        $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('.visually-hidden{position:absolute', $css);
+        self::assertStringContainsString('clip-path:inset(50%)', $css);
+
+        // Und die Stellen, die sich darauf verlassen, gibt es wirklich.
+        $document = DemoContent::starter('Mit Stimme');
+        $document['schemaVersion'] = 17;
+        $document['blocks'][] = ['id' => 'stimme', 'type' => 'quote', 'props' => ['text' => 'Ein Satz.', 'author' => 'Name', 'role' => '', 'rating' => 5]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        self::assertStringContainsString('<span class="visually-hidden">Bewertung: 5 von 5</span>', $this->request('/')->getContent());
+    }
+
+    public function testAColumnIsALayoutDeviceAndNotABox(): void
+    {
+        // Eine Spalte brachte Rahmen, Ecken und 30 px Innenabstand mit. Wer zwei Texte
+        // nebeneinander stellte, bekam zwei Kästchen. Die Karte ist eine Einstellung, kein
+        // Standard - und der Knopf im Aufruf-Band nimmt die Akzentfarbe, weil er auf einem
+        // dunklen Band vorher Tinte auf Tinte war.
+        $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('.block-column{min-width:0}', $css);
+        self::assertStringNotContainsString('.block-column{border:1px solid', $css);
+        self::assertStringContainsString('.kant .block-cta .button{background:var(--accent)', $css);
+        self::assertStringContainsString('.block-iconcard + .block-iconcard', $css, 'Gestapelte Karten brauchen Abstand.');
+    }
+
     public function testHeadingsAreNotHyphenated(): void
     {
         // Beim Nachbau von kant-it.de stand in der Überschrift „di-gitale Exzellenz“: `hyphens:auto`