a11y: exported widget ARIA (slider/tabs/gallery)

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>
This commit is contained in:
2026-07-12 14:18:49 -07:00
parent c83db99ae4
commit 9b532e36e8
6 changed files with 188 additions and 13 deletions
@@ -31,3 +31,33 @@ describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclic
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"');
});
});