feat(a11y): move language picker below Audio, globe inline-left

Adds the Reduce-motion toggle markup + i18n label in the same Output fieldset (wired in a later task). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 09:14:47 -07:00
parent a895e7139b
commit fe77677d4c
4 changed files with 40 additions and 3 deletions
@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+
+// Accessibility pass (feat/accessibility-pass) — non-kiosk public-web a11y.
+// Each block maps to a task in
+// docs/superpowers/plans/2026-06-30-accessibility-and-about-page.md.
+
+test.describe("Task 1 — Output panel layout", () => {
+  test("language picker sits below the Audio control", async ({ page }) => {
+    await page.goto("/");
+    const audio = page.locator("#audio");
+    const lang = page.locator("#lang-select");
+    await expect(audio).toBeVisible();
+    await expect(lang).toBeVisible();
+    const aBox = await audio.boundingBox();
+    const lBox = await lang.boundingBox();
+    expect(lBox!.y).toBeGreaterThan(aBox!.y); // lang renders lower than audio
+  });
+
+  test("globe icon is inline-left of the language select (same row)", async ({ page }) => {
+    await page.goto("/");
+    const pick = page.locator(".lang-pick");
+    const select = page.locator("#lang-select");
+    const pBox = await pick.boundingBox();
+    const sBox = await select.boundingBox();
+    expect(sBox!.x).toBeGreaterThan(pBox!.x); // select right of the label's left edge
+    expect(pBox!.height).toBeLessThan(40);    // one row, not stacked
+  });
+});