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>

craft/src/components/sections/Tabs.toHtml.test.ts

@@ -0,0 +1,53 @@
+import { describe, test, expect } from 'vitest';
+import { Tabs } from './Tabs';
+
+const toHtml = (Tabs as any).toHtml;
+
+const tabs = [
+  { label: 'Overview', content: 'Overview content' },
+  { label: 'Features', content: 'Features content' },
+  { label: 'Support', content: 'Support content' },
+];
+
+describe('Tabs.toHtml accessibility (F1.2)', () => {
+  test('tab button container has role="tablist"', () => {
+    const { html } = toHtml({ tabs }, '');
+    expect(html).toMatch(/role="tablist"/);
+  });
+
+  test('each tab button has role="tab", aria-selected, aria-controls', () => {
+    const { html } = toHtml({ tabs }, '');
+    const buttonMatches = html.match(/<button[^>]*role="tab"[^>]*>/g) || [];
+    expect(buttonMatches.length).toBe(3);
+    expect(html).toMatch(/aria-selected="true"/);
+    expect(html).toMatch(/aria-selected="false"/);
+    expect(html).toMatch(/role="tab"[^>]*aria-controls="[^"]+"/);
+  });
+
+  test('each panel has role="tabpanel" and aria-labelledby matching a tab id', () => {
+    const { html } = toHtml({ tabs }, '');
+    const panelMatches = html.match(/role="tabpanel"/g) || [];
+    expect(panelMatches.length).toBe(3);
+
+    // aria-controls on the first tab button should point at an id that
+    // actually exists as a panel's id.
+    const controlsMatch = html.match(/role="tab"[^>]*aria-controls="([^"]+)"/);
+    expect(controlsMatch).toBeTruthy();
+    const controlledId = controlsMatch![1];
+    expect(html).toContain(`id="${controlledId}"`);
+  });
+
+  test('ids linking tab<->panel are deterministic (stable across repeated calls, no randomness)', () => {
+    const { html: html1 } = toHtml({ tabs }, '');
+    const { html: html2 } = toHtml({ tabs }, '');
+    const id1 = html1.match(/role="tab"[^>]*aria-controls="([^"]+)"/)![1];
+    const id2 = html2.match(/role="tab"[^>]*aria-controls="([^"]+)"/)![1];
+    expect(id1).toBe(id2);
+  });
+
+  test('arrow-key navigation is wired in the inline script', () => {
+    const { html } = toHtml({ tabs }, '');
+    expect(html).toMatch(/ArrowRight/);
+    expect(html).toMatch(/ArrowLeft/);
+  });
+});