calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vzxipsule: Silence the carousel live region while it rotates and pause it on keyboard focus

Browse Source
This commit is contained in:
calcazar
2026-10-19 22:31:56 -06:00
parent ce1a3e2eaa
commit cf45072f27
4 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/featured-carousel.test.ts
+17 -3
View File
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { FeaturedCarousel } from "@/components/FeaturedCarousel";
import { FEATURED_INTERVAL_MS, featuredSlot, startFeaturedAutoplay } from "@/components/featured-carousel-model";
import { FEATURED_INTERVAL_MS, featuredLiveMode, featuredSlot, startFeaturedAutoplay } from "@/components/featured-carousel-model";
import type { DiscoverExpert } from "@/lib/discover";
const expert = (i: number): DiscoverExpert => ({
@@ -72,9 +72,9 @@ describe("startFeaturedAutoplay", () => {
});
describe("FeaturedCarousel markup", () => {
it("has a polite live region, hides non-center items and shows the counter and dots", () => {
it("starts with the live region off while it rotates, and hides non-center items and shows the counter and dots", () => {
const out = renderToStaticMarkup(createElement(FeaturedCarousel, { experts: experts(8) }));
expect(out).toContain('aria-live="polite"');
expect(out).toContain('aria-live="off"');
expect(out.match(/data-testid="featured-item"/g)).toHaveLength(8);
expect(out.match(/aria-hidden="true" data-testid="featured-item"/g)).toHaveLength(7);
expect(out).toContain("featured-c0");
@@ -91,5 +91,19 @@ describe("FeaturedCarousel markup", () => {
const out = renderToStaticMarkup(createElement(FeaturedCarousel, { experts: experts(1) }));
expect(out).not.toContain("featured-dot ");
expect(out).toContain(">1 / 1<");
expect(out).toContain('aria-live="polite"');
});
});
describe("featuredLiveMode (WAI-ARIA carousel live region)", () => {
it("is off while autoplay rotates", () => {
expect(featuredLiveMode({ rotating: true, paused: false })).toBe("off");
});
it("is polite while paused by hover or focus", () => {
expect(featuredLiveMode({ rotating: true, paused: true })).toBe("polite");
});
it("is polite when rotation is stopped (reduced motion or one expert)", () => {
expect(featuredLiveMode({ rotating: false, paused: false })).toBe("polite");
expect(featuredLiveMode({ rotating: false, paused: true })).toBe("polite");
});
});