feat(ui): accessibility pass — WCAG 2.2 AA for login/lobby/shell (F2)
Add the a11y foundation and bring login, lobby, and the in-game shell to WCAG 2.2 AA: - Primitives: .sr-only + .skip-link (base.css), trapFocus (modal focus trap + restore) and restoreFocus (menu focus restore) actions, the --color-focus visible ring. - In-game shell: skip link + focusable main landmark; WAI-ARIA sidebar tabs (roving tabindex, arrow/Home/End, tabpanel wiring); menu Escape + focus restore (account / view / turn-navigator / map-toggles / bottom-tabs); mail compose as a role=dialog modal with a focus trap. - login / lobby / lobby-create: skip link + main landmark, field labels, role=alert / role=status live regions. - Map canvas: aria-label naming it a visual overview, with its data reachable by keyboard via the sidebar inspector and tables (accessible alternative; in-canvas keyboard nav deferred). Gates (chromium-desktop): tests/e2e/a11y-axe.spec.ts scans every top-level view for WCAG 2.2 AA violations (zero); a11y-keyboard.spec.ts covers the skip link, menu Escape+restore, and tab roving. Adds @axe-core/playwright. Docs: ui/docs/a11y.md (+ index). Marks F1 and F2 done in ui/PLAN-finalize.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,86 @@
|
||||
// F2 — automated WCAG 2.2 AA scans with axe-core across every
|
||||
// top-level view. Runs only on chromium-desktop (axe's colour-contrast
|
||||
// and computed-role checks need one real engine; repeating across the
|
||||
// webkit/mobile projects adds cost without new signal).
|
||||
//
|
||||
// Auth is bootstrapped through `/__debug/store` exactly as the
|
||||
// game-shell specs do; the in-game layout tolerates a missing gateway
|
||||
// (ECONNREFUSED) and still renders the chrome + view shells, which is
|
||||
// what the structural a11y scan needs.
|
||||
|
||||
import AxeBuilder from "@axe-core/playwright";
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
|
||||
const SESSION_ID = "f2-a11y-axe-session";
|
||||
// A real UUID — the layout's auto-sync calls `uuidToHiLo` on it.
|
||||
const GAME_ID = "10101010-1010-1010-1010-101010101010";
|
||||
|
||||
const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
|
||||
|
||||
async function authenticate(page: Page): Promise<void> {
|
||||
await page.goto("/__debug/store");
|
||||
await expect(page.getByTestId("debug-store-ready")).toBeVisible();
|
||||
await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
|
||||
await page.evaluate(() => window.__galaxyDebug!.clearSession());
|
||||
await page.evaluate(
|
||||
(id) => window.__galaxyDebug!.setDeviceSessionId(id),
|
||||
SESSION_ID,
|
||||
);
|
||||
}
|
||||
|
||||
async function expectNoViolations(page: Page): Promise<void> {
|
||||
const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
|
||||
// Surface the rule ids in the assertion message for a fast triage.
|
||||
expect(
|
||||
results.violations,
|
||||
results.violations.map((v) => `${v.id} (${v.nodes.length})`).join(", "),
|
||||
).toEqual([]);
|
||||
}
|
||||
|
||||
test.describe("axe WCAG 2.2 AA", () => {
|
||||
test.beforeEach(({}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name !== "chromium-desktop",
|
||||
"axe scan runs once, on chromium-desktop",
|
||||
);
|
||||
});
|
||||
|
||||
test("login", async ({ page }) => {
|
||||
await page.goto("/login");
|
||||
await expect(page.locator("#main-content")).toBeVisible();
|
||||
await expectNoViolations(page);
|
||||
});
|
||||
|
||||
test("lobby", async ({ page }) => {
|
||||
await authenticate(page);
|
||||
await page.goto("/lobby");
|
||||
await expect(page.locator("#main-content")).toBeVisible();
|
||||
await expectNoViolations(page);
|
||||
});
|
||||
|
||||
test("lobby create", async ({ page }) => {
|
||||
await authenticate(page);
|
||||
await page.goto("/lobby/create");
|
||||
await expect(page.locator("#main-content")).toBeVisible();
|
||||
await expectNoViolations(page);
|
||||
});
|
||||
|
||||
const inGameViews: Array<[string, string]> = [
|
||||
["map", "active-view-map"],
|
||||
["report", "active-view-report"],
|
||||
["mail", "active-view-mail"],
|
||||
["battle", "active-view-battle"],
|
||||
["designer/science", "active-view-designer-science"],
|
||||
["table/planets", "active-view-table"],
|
||||
];
|
||||
|
||||
for (const [path, testId] of inGameViews) {
|
||||
test(`in-game: ${path}`, async ({ page }) => {
|
||||
await authenticate(page);
|
||||
await page.goto(`/games/${GAME_ID}/${path}`);
|
||||
await expect(page.getByTestId("game-shell")).toBeVisible();
|
||||
await expect(page.getByTestId(testId)).toBeVisible();
|
||||
await expectNoViolations(page);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
// F2 — keyboard-only navigation coverage for the in-game shell.
|
||||
// Runs on chromium-desktop (a stable ≥1024px viewport where the sidebar
|
||||
// is visible); the behaviours under test are engine-independent.
|
||||
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
|
||||
const SESSION_ID = "f2-a11y-keyboard-session";
|
||||
const GAME_ID = "10101010-1010-1010-1010-101010101010";
|
||||
|
||||
async function bootShell(page: Page): Promise<void> {
|
||||
await page.goto("/__debug/store");
|
||||
await expect(page.getByTestId("debug-store-ready")).toBeVisible();
|
||||
await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
|
||||
await page.evaluate(() => window.__galaxyDebug!.clearSession());
|
||||
await page.evaluate(
|
||||
(id) => window.__galaxyDebug!.setDeviceSessionId(id),
|
||||
SESSION_ID,
|
||||
);
|
||||
await page.goto(`/games/${GAME_ID}/map`);
|
||||
await expect(page.getByTestId("game-shell")).toBeVisible();
|
||||
await expect(page.getByTestId("active-view-map")).toBeVisible();
|
||||
}
|
||||
|
||||
test.describe("keyboard navigation", () => {
|
||||
test.beforeEach(({}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name !== "chromium-desktop",
|
||||
"keyboard specs run on chromium-desktop",
|
||||
);
|
||||
});
|
||||
|
||||
test("skip link is the first focusable and jumps to main content", async ({
|
||||
page,
|
||||
}) => {
|
||||
await bootShell(page);
|
||||
await page.keyboard.press("Tab");
|
||||
await expect(page.locator(".skip-link")).toBeFocused();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(page.locator("#active-view-host")).toBeFocused();
|
||||
});
|
||||
|
||||
test("Escape closes the account menu and returns focus to its trigger", async ({
|
||||
page,
|
||||
}) => {
|
||||
await bootShell(page);
|
||||
await page.getByTestId("account-menu-trigger").click();
|
||||
await expect(page.getByTestId("account-menu-list")).toBeVisible();
|
||||
// Move focus into the menu, then dismiss with Escape.
|
||||
await page.getByTestId("account-menu-theme-select").focus();
|
||||
await page.keyboard.press("Escape");
|
||||
await expect(page.getByTestId("account-menu-list")).toBeHidden();
|
||||
await expect(page.getByTestId("account-menu-trigger")).toBeFocused();
|
||||
});
|
||||
|
||||
test("sidebar tabs move with the arrow keys (roving)", async ({ page }) => {
|
||||
await bootShell(page);
|
||||
const calculator = page.getByTestId("sidebar-tab-calculator");
|
||||
const inspector = page.getByTestId("sidebar-tab-inspector");
|
||||
await calculator.click();
|
||||
await expect(calculator).toHaveAttribute("aria-selected", "true");
|
||||
await calculator.focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(inspector).toBeFocused();
|
||||
await expect(inspector).toHaveAttribute("aria-selected", "true");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user