fix(ui): улучшить контраст и доступность прокрутки

tests/e2e/operational-a11y.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from "@playwright/test"
+import axe from "axe-core"
+import { emptyAlerts, emptyOutbox } from "./fixtures/alerts"
+import { certificateState } from "./fixtures/certificates"
+import { state as containerState } from "./fixtures/containers"
+import { server } from "./fixtures/users"
+
+for (const theme of ["dark", "light"] as const) for (const width of [1280, 320]) {
+  for (const path of ["alerts", "certificates", "containers", "filters", "filters-error", "uptime"]) {
+    test(`Operational accessibility ${path} ${theme} ${width}`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 1000 })
+      await page.addInitScript(theme => localStorage.setItem("rl-theme", theme), theme)
+      const writes: string[] = []
+      await page.route("**/health", route => route.fulfill({ json: { ok: true } }))
+      await page.route("**/api/**", route => {
+        const url = new URL(route.request().url()).pathname
+        if (route.request().method() !== "GET") writes.push(url)
+        if (path === "filters-error" && url === "/api/filters/rules") return route.fulfill({ status: 503, json: { error: "Fixture unavailable" } })
+        const json = url === "/api/auth/config" ? { required: false }
+          : url === "/api/servers" ? [{ ...server, type: "home-router" }]
+            : url === "/api/certificates/state" ? certificateState([])
+              : url === "/api/certificates/renew-settings" ? { enabled: true, intervalSec: 300, renewBeforeDays: 30 }
+                : url === "/api/containers/state" ? containerState([])
+                  : url === "/api/alerts" ? emptyAlerts
+                    : url === "/api/alerts/outbox" ? emptyOutbox
+                      : url === "/api/uptime/speed-probes" ? { probes: [] }
+                        : url === "/api/uptime/speed-test/runs" ? { runs: [] }
+                          : url === "/api/uptime/probes" ? { probes: [] }
+                            : url === "/api/filters/rules" ? { rulesets: [{ serverId: "1", rules: [] }], greTunnels: [], live: true }
+                              : url === "/api/filters/gre-tunnels" ? { tunnels: [] }
+                                : url === "/api/recursive-routes" ? { routes: [] }
+                                  : {}
+        return route.fulfill({ json })
+      })
+      await page.goto("/" + (path === "filters-error" ? "filters" : path))
+      await expect(page.locator("main").first()).toBeVisible()
+      if (path === "certificates") await expect(page.getByText("Включено", { exact: true })).toBeVisible()
+      if (path === "alerts") await expect(page.getByText("Правила не найдены", { exact: true })).toBeVisible()
+      if (path === "filters-error") await expect(page.getByRole("alert").filter({ hasText: "Не удалось загрузить Filters" })).toBeVisible()
+      await page.evaluate(() => document.fonts.ready)
+      // Audit settled colours, after provider hydration and transitions.
+      await page.waitForTimeout(900)
+      await page.addScriptTag({ content: axe.source })
+      const violations = await page.evaluate(async () => (window as unknown as { axe: typeof axe }).axe.run(document, {
+        runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21aa"] },
+      }))
+      expect(violations.violations).toEqual([])
+      expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+      if (path === "certificates") {
+        const blocks = page.getByRole("region", { name: /^Команды RouterOS:/ })
+        await expect(blocks).toHaveCount(3)
+        for (const block of await blocks.all()) {
+          await block.focus()
+          await expect(block).toBeFocused()
+          if (await block.evaluate(el => el.scrollWidth > el.clientWidth + 1)) {
+            await block.press("ArrowRight")
+            await expect.poll(() => block.evaluate(el => el.scrollLeft)).toBeGreaterThan(0)
+          }
+        }
+      }
+      expect(writes).toEqual([])
+    })
+  }
+}