fix(a11y): make the JSON snapshot fallback payload keyboard-focusable and run the history and Mail chip e2e specs against Yii3. (#75)

Author: terabytesoftw

e2e/smoke.spec.js

@@ -226,7 +226,7 @@ for (const [appIndex, app] of debugApps().entries()) {
           await expectDebuggerLayout(page, entry, "light");
 
           if (entry.kind === "history") {
-            await expect(page.locator("tr[data-key]")).toHaveCount(2);
+            await expect(page.locator("tr[data-yii-debug-tag]")).toHaveCount(2);
           }
 
           await expectNoRuntimeDiagnostics(

e2e/support/environment.js

@@ -109,7 +109,8 @@ export function debugPageURL(app, entry, options = {}) {
   let path;
 
   if (entry.kind === "history") {
-    path = "/debug/index";
+    // Yii2 resolves the module default action at `/debug`; Yii3 serves the history only there.
+    path = "/debug";
   } else if (entry.kind === "compare") {
     path = "/debug/compare";
   } else if (entry.kind === "phpinfo") {

e2e/toolbar-mail.spec.js

@@ -16,16 +16,12 @@ for (const app of debugApps()) {
   test(`${app.name} Mail chip label opens the capture that sent the mail`, async ({
     page,
   }) => {
-    test.skip(
-      app.id === "yii3",
-      "Yii3 has no Mail panel until the Phase 5 port.",
-    );
-
     const diagnostics = collectRuntimeDiagnostics(page);
 
     // Serve the page toolbar from the seeded GET that follows the mail-sending POST; later AJAX loads are untouched.
+    // Yii2 serves the payload at `toolbar-data`, Yii3 at `toolbar`.
     await page.route(
-      /toolbar-data/,
+      /toolbar(?:-data)?[?&]/,
       (route) => {
         const url = new URL(route.request().url());
 

resources/views/snapshot.php

@@ -54,8 +54,10 @@
                 ->content('JSON snapshot'),
         )
         ->render();
+// The payload scrolls horizontally on narrow viewports, so it takes keyboard focus to stay reachable.
 $panelBody = $panelContent ?? Pre::tag()
     ->class('yii-debug-panel-payload')
+    ->addAttribute('tabindex', '0')
     ->html(Code::tag()->content($payload))
     ->render();
 ?>

tests/View/SnapshotViewTest.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PHPForge\Debug\Tests\View;
+
+use PHPUnit\Framework\Attributes\Group;
+use PHPUnit\Framework\TestCase;
+
+use function dirname;
+use function ob_get_clean;
+use function ob_start;
+
+/**
+ * Unit tests for the JSON fallback of the shared `snapshot.php` panel view.
+ */
+#[Group('view')]
+final class SnapshotViewTest extends TestCase
+{
+    public function testJsonFallbackPayloadIsKeyboardFocusable(): void
+    {
+        $failure = null;
+        $method = 'GET';
+        $panelContent = null;
+        $panelLabel = 'router';
+        $payload = '{&quot;routes&quot;: []}';
+        $renderError = null;
+        $url = 'https://example.test/';
+
+        ob_start();
+        require dirname(__DIR__, 2) . '/resources/views/snapshot.php';
+        $html = (string) ob_get_clean();
+
+        self::assertMatchesRegularExpression(
+            '~<pre\b(?=[^>]*\bclass="yii-debug-panel-payload")(?=[^>]*\btabindex="0")[^>]*>~',
+            $html,
+            'The scrollable payload must be reachable by keyboard.',
+        );
+    }
+}