feat(a11y): keyboard + ARIA slider semantics for the Altitude dial
role=slider + tabindex on the dial; Arrow/Home/End stepping; labels become Enter/Space buttons; aria-valuenow/valuetext track the committed altitude via renderDial. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -60,3 +60,21 @@ test.describe("Task 5 — Reduced motion", () => {
|
||||
.toBe(true); // reduced motion → frozen
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Task 6 — Keyboard + ARIA dial", () => {
|
||||
test("altitude dial is a keyboard-operable slider", async ({ page }) => {
|
||||
await page.goto("/");
|
||||
const dial = page.locator("#dial");
|
||||
await expect(dial).toHaveAttribute("role", "slider");
|
||||
await expect(dial).toHaveAttribute("tabindex", "0");
|
||||
await dial.focus();
|
||||
const before = await page.locator("#scale-name").textContent();
|
||||
await dial.press("ArrowDown"); // descend one altitude
|
||||
await expect
|
||||
.poll(async () => page.locator("#scale-name").textContent())
|
||||
.not.toBe(before);
|
||||
await dial.press("Home"); // jump to the top scale (cosmos)
|
||||
await expect(page.locator("#scale-name")).toHaveText(/cosmos|宇宙/i);
|
||||
await expect(dial).toHaveAttribute("aria-valuenow", "0");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user