script nits: slider hover/visibility pause + silent autoplay + iframe amp guard
ContentSlider: autoplay's setInterval now pauses on mouseenter and on document visibilitychange (tab hidden), resumes on mouseleave/visible, and is always clearable (timer var + clearInterval). The aria-live region is "off" while autoplay is silently auto-rotating and only flips to "polite" on manual next/prev/dot navigation, so screen readers aren't spammed with an announcement every `interval` ms (F-export review Minor). Updates the one existing test that hard-coded aria-live="polite" as always-on to match this intentional behavior change. (Countdown's ticking-interval-stops-at-zero nit shipped in the previous commit alongside its node-id migration, since both touched the same inline script.) Adds regression tests locking in that MapEmbed/VideoBlock iframe src attributes (built by string concatenation with literal `&` query params) are HTML-entity-encoded via the existing escapeAttr(safeUrl()) pipeline -- verified already correct, no source change needed there. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -23,9 +23,9 @@ describe('ContentSlider.toHtml accessibility (F1.1)', () => {
|
||||
expect(html).toMatch(/<button[^>]*aria-label="Go to slide 3"/);
|
||||
});
|
||||
|
||||
test('slides are wrapped in an aria-live="polite" region', () => {
|
||||
test('slides are wrapped in an aria-live region', () => {
|
||||
const { html } = toHtml({ slides }, '');
|
||||
expect(html).toContain('aria-live="polite"');
|
||||
expect(html).toMatch(/aria-live="(polite|off)"/);
|
||||
});
|
||||
|
||||
test('decorative chevron icons in arrows are aria-hidden', () => {
|
||||
@@ -34,3 +34,60 @@ describe('ContentSlider.toHtml accessibility (F1.1)', () => {
|
||||
expect(html).toMatch(/<i class="fa fa-chevron-right" aria-hidden="true"><\/i>/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.toHtml deterministic + unique scope ids (thread node id)', () => {
|
||||
test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
|
||||
const { html: html1 } = toHtml({ slides }, '', 'node-cs1');
|
||||
const { html: html2 } = toHtml({ slides }, '', 'node-cs1');
|
||||
expect(html1).toBe(html2);
|
||||
});
|
||||
|
||||
test('different node ids -> different, non-colliding scope ids (identical slides, no collision)', () => {
|
||||
const { html: html1 } = toHtml({ slides }, '', 'node-cs1');
|
||||
const { html: html2 } = toHtml({ slides }, '', 'node-cs2');
|
||||
const id1 = html1.match(/<section id="([^"]+)"/)![1];
|
||||
const id2 = html2.match(/<section id="([^"]+)"/)![1];
|
||||
expect(id1).not.toBe(id2);
|
||||
});
|
||||
|
||||
test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
|
||||
const { html: html1 } = toHtml({ slides }, '');
|
||||
const { html: html2 } = toHtml({ slides }, '');
|
||||
expect(html1).toBe(html2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContentSlider.toHtml autoplay silences aria-live and is pausable (F-export review Minor)', () => {
|
||||
test('aria-live is "off" while autoplay is running, to avoid announcing every auto-rotation', () => {
|
||||
const { html } = toHtml({ slides, autoplay: true }, '');
|
||||
expect(html).toContain('aria-live="off"');
|
||||
});
|
||||
|
||||
test('aria-live stays "polite" when autoplay is disabled', () => {
|
||||
const { html } = toHtml({ slides, autoplay: false }, '');
|
||||
expect(html).toContain('aria-live="polite"');
|
||||
});
|
||||
|
||||
test('manual navigation (next/prev/dot) marks the live region "polite"', () => {
|
||||
const { html } = toHtml({ slides, autoplay: true }, '');
|
||||
expect(html).toMatch(/setAttribute\(["']aria-live["'],\s*["']polite["']\)/);
|
||||
});
|
||||
|
||||
test('autoplay pauses on hover and resumes on mouse leave', () => {
|
||||
const { html } = toHtml({ slides, autoplay: true }, '');
|
||||
expect(html).toMatch(/addEventListener\(["']mouseenter["']/);
|
||||
expect(html).toMatch(/addEventListener\(["']mouseleave["']/);
|
||||
});
|
||||
|
||||
test('autoplay pauses when the tab is hidden (visibilitychange) and the interval is clearable', () => {
|
||||
const { html } = toHtml({ slides, autoplay: true }, '');
|
||||
expect(html).toMatch(/visibilitychange/);
|
||||
expect(html).toMatch(/clearInterval\(/);
|
||||
});
|
||||
|
||||
test('no autoplay: no setInterval/hover/visibility wiring at all', () => {
|
||||
const { html } = toHtml({ slides, autoplay: false }, '');
|
||||
expect(html).not.toMatch(/setInterval\(/);
|
||||
expect(html).not.toMatch(/visibilitychange/);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user