shadowdao
9b532e36e8
ContentSlider, Tabs, and Gallery toHtml exports and their inline scripts now carry ARIA semantics and keyboard support: - ContentSlider: prev/next arrows and dot buttons get aria-labels, the slide stack is wrapped in an aria-live="polite" region, and the decorative chevron icons are aria-hidden. - Tabs: tablist/tab/tabpanel roles, aria-selected/aria-controls/ aria-labelledby, and Left/Right/Home/End arrow-key navigation in the inline script. The tab<->panel id scope is now derived from a deterministic hash of anchorId/labels instead of Math.random, since the ARIA linking ids must be stable across export runs. - Gallery: the lightbox overlay gets role="dialog"/aria-modal/aria-label, Escape closes it, and thumbnails are keyboard-operable (role="button" tabindex="0" plus Enter/Space handling in the existing delegated listener). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { Gallery } from './Gallery';
|
|
|
|
const toHtml = (Gallery as any).toHtml;
|
|
|
|
describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclick (A4.3)', () => {
|
|
test('no per-item inline onclick with interpolated src', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
|
expect(html).not.toMatch(/onclick="[^"]*_open\(/);
|
|
expect(html).toContain('data-lb-src="/a.jpg"');
|
|
});
|
|
|
|
test('a single-quote in src cannot break the handler (no per-item onclick at all)', () => {
|
|
const { html } = toHtml({ images: [{ src: "/a'.jpg", alt: 'a' }], lightbox: true }, '');
|
|
// no per-item onclick handler exists at all (delegated listener only)
|
|
expect(html).not.toMatch(/onclick="[^"]*_open\(/);
|
|
// the quote in src is entity-escaped in the data attribute, not raw
|
|
expect(html).toContain('data-lb-src="/a'.jpg"');
|
|
expect(html).not.toContain(`data-lb-src="/a'.jpg"`);
|
|
});
|
|
|
|
test('emits exactly one delegated click listener', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg' }, { src: '/b.jpg' }], lightbox: true }, '');
|
|
const matches = html.match(/addEventListener\(['"]click['"]/g) || [];
|
|
expect(matches.length).toBe(1);
|
|
});
|
|
|
|
test('lightbox=false: no data-lb-src, no script', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg' }], lightbox: false }, '');
|
|
expect(html).not.toContain('data-lb-src');
|
|
expect(html).not.toContain('<script>');
|
|
});
|
|
});
|
|
|
|
describe('Gallery.toHtml lightbox accessibility (F1.3)', () => {
|
|
test('lightbox overlay has role="dialog", aria-modal, and aria-label', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
|
expect(html).toMatch(/role="dialog"/);
|
|
expect(html).toMatch(/aria-modal="true"/);
|
|
expect(html).toMatch(/aria-label="[^"]+"/);
|
|
});
|
|
|
|
test('Escape closes the lightbox via the inline script', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
|
expect(html).toMatch(/Escape/);
|
|
});
|
|
|
|
test('thumbnails are keyboard-operable when lightbox is enabled (role=button + tabindex=0)', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
|
|
expect(html).toMatch(/data-lb-src="[^"]*"[^>]*role="button"[^>]*tabindex="0"/);
|
|
});
|
|
|
|
test('delegated listener handles Enter/Space for keyboard activation', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg' }, { src: '/b.jpg' }], lightbox: true }, '');
|
|
expect(html).toMatch(/addEventListener\(['"]keydown['"]/);
|
|
});
|
|
|
|
test('lightbox=false: no role="dialog", no role="button" thumbnails', () => {
|
|
const { html } = toHtml({ images: [{ src: '/a.jpg' }], lightbox: false }, '');
|
|
expect(html).not.toContain('role="dialog"');
|
|
expect(html).not.toContain('role="button"');
|
|
});
|
|
});
|