@owlmeans/web-consent 0.1.18-rc.24 → 0.1.18-rc.26

package/README.md

@@ -6,7 +6,7 @@ This package ships embedded agent skills under `agent-meta/`. After installing y
 your project's skill store (`.agents/skills/`):
 
 ```sh
-npx @owlmeans/agent-skills@^0.1.18-rc.31
+npx @owlmeans/agent-skills@^0.1.18-rc.32
 ```
 
 The embedded files are version-matched to this package release. Do not edit them

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-consent",
-  "version": "0.1.18-rc.24",
-  "generatedAt": "2026-09-21T21:54:22.962Z",
+  "version": "0.1.18-rc.26",
+  "generatedAt": "2026-09-22T12:36:21.844Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-consent/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-consent
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-consent": "^0.1.18-rc.24"` in `dependencies`
+**Install:** `"@owlmeans/web-consent": "^0.1.18-rc.26"` in `dependencies`
 
 The browser components of the consent set. The model — categories, storage, migration, the store,
 Consent Mode signalling — is `@owlmeans/consent`, and this package re-exports a **named selection**
@@ -96,6 +96,18 @@ Every control shows a 3px `outline-ring` focus outline 3px off the element (`out
 outline-offset-3`; the switch draws it on its track through `peer-focus-visible`). An outline, not
 a ring, so a host that zeroes shadows keeps it. Never reintroduce a decorative class here — the
 package tests fail on `bg-gradient`, `backdrop-`, `blur`, `shadow` or `ring-primary` in the dialog.
+
+**Each switch is named by reference.** The `<label>` around a switch's checkbox holds only the
+drawn track, and the category's words sit in a sibling column it cannot reach, so the checkbox
+carries `aria-labelledby="<id>-label"` (the category label) and `aria-describedby` pointing at
+`<id>-required` and `<id>-desc`. Drop those and axe reports three unnamed checkboxes (`label`,
+critical). A required category stays `disabled` and keeps its name.
+
+`tests/a11y.spec.ts` runs axe-core (a dev dependency) against the open dialog in both schemes, the
+re-open button, and the policy page with services, and fails on any serious or critical
+violation. It loads the harness with `?styled=1` (plus `&theme=dark`), which compiles the package
+sources with a generated app's neutral tokens — contrast cannot be judged on the unstyled harness
+the other specs need.
 - `silent` skips every `dataLayer` and global write. It is for tests and for an app that runs no
   tags at all.
 - The draft is **re-seeded from storage every time the dialog opens**, not from the last render — a

package/build/consent/toggle.d.ts

@@ -17,6 +17,12 @@ export interface ConsentToggleProps {
  * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
  * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
  * drawn on the track through `peer-focus-visible`).
+ *
+ * The checkbox takes its NAME from the category label and its description from the `Required`
+ * marker and the description text, by id. The `<label>` around it holds only the drawn track, so
+ * without those references a screen reader announces an unnamed checkbox three times over — the
+ * visible words sit in a sibling column the label cannot reach. A required category keeps its name
+ * while disabled: it is still disclosed, only not a choice.
  */
 export declare const ConsentToggle: FC<ConsentToggleProps>;
 //# sourceMappingURL=toggle.d.ts.map

package/build/consent/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAG/B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAoChD,CAAA"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAG/B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+ChD,CAAA"}

package/build/consent/toggle.js

@@ -8,6 +8,18 @@ import { cn } from '../lib/utils.js';
  * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
  * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
  * drawn on the track through `peer-focus-visible`).
+ *
+ * The checkbox takes its NAME from the category label and its description from the `Required`
+ * marker and the description text, by id. The `<label>` around it holds only the drawn track, so
+ * without those references a screen reader announces an unnamed checkbox three times over — the
+ * visible words sit in a sibling column the label cannot reach. A required category keeps its name
+ * while disabled: it is still disclosed, only not a choice.
  */
-export const ConsentToggle = ({ id, label, description, checked, required, requiredLabel, onChange }) => (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-2xl border border-border p-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground", children: [label, required === true && _jsx("span", { className: "text-xs font-bold uppercase tracking-wide text-muted-foreground", children: requiredLabel })] }), _jsx("p", { className: "text-pretty text-xs leading-relaxed text-muted-foreground", children: description })] }), _jsxs("label", { className: cn('relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center', required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: checked || required === true, disabled: required === true, onChange: event => onChange(event.target.checked) }), _jsx("span", { className: cn('relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring', checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'), children: _jsx("span", { className: cn('absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300', checked || required === true ? 'translate-x-5' : 'translate-x-0.5') }) })] })] }));
+export const ConsentToggle = ({ id, label, description, checked, required, requiredLabel, onChange }) => {
+    const described = [
+        ...(required === true ? [`${id}-required`] : []),
+        ...(description !== '' ? [`${id}-desc`] : []),
+    ];
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-2xl border border-border p-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground", children: [_jsx("span", { id: `${id}-label`, children: label }), required === true && _jsx("span", { id: `${id}-required`, className: "text-xs font-bold uppercase tracking-wide text-muted-foreground", children: requiredLabel })] }), description !== '' && _jsx("p", { id: `${id}-desc`, className: "text-pretty text-xs leading-relaxed text-muted-foreground", children: description })] }), _jsxs("label", { className: cn('relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center', required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), children: [_jsx("input", { id: id, type: "checkbox", "aria-labelledby": `${id}-label`, ...(described.length > 0 ? { 'aria-describedby': described.join(' ') } : {}), className: "peer sr-only", checked: checked || required === true, disabled: required === true, onChange: event => onChange(event.target.checked) }), _jsx("span", { className: cn('relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring', checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'), children: _jsx("span", { className: cn('absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300', checked || required === true ? 'translate-x-5' : 'translate-x-0.5') }) })] })] }));
+};
 //# sourceMappingURL=toggle.js.map

package/build/consent/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAapC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CACnD,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtE,EAAE,CAAC,CACH,eAAK,SAAS,EAAC,8EAA8E,aAC3F,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,8EAA8E,aAC1F,KAAK,EACL,QAAQ,KAAK,IAAI,IAAI,eAAM,SAAS,EAAC,iEAAiE,YACpG,aAAa,GACT,IACH,EACN,YAAG,SAAS,EAAC,2DAA2D,YAAE,WAAW,GAAK,IACtF,EACN,iBAAO,SAAS,EAAE,EAAE,CAClB,0EAA0E,EAC1E,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,CACvE,aACC,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,KAAK,IAAI,EACrC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACjD,EACF,eAAM,SAAS,EAAE,EAAE,CACjB,gKAAgK,EAChK,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CACvE,YACC,eAAM,SAAS,EAAE,EAAE,CACjB,yFAAyF,EACzF,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CACnE,GAAI,GACA,IACD,IACJ,CACP,CAAA"}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/consent/toggle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAapC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CACnD,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EACtE,EAAE;IACF,MAAM,SAAS,GAAG;QAChB,GAAG,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,GAAG,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9C,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAC,8EAA8E,aAC3F,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,8EAA8E,aAC3F,eAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,KAAK,GAAQ,EACtC,QAAQ,KAAK,IAAI,IAAI,eACpB,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,iEAAiE,YACjG,aAAa,GAAQ,IACnB,EACL,WAAW,KAAK,EAAE,IAAI,YACrB,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,2DAA2D,YACvF,WAAW,GAAK,IACd,EACN,iBAAO,SAAS,EAAE,EAAE,CAClB,0EAA0E,EAC1E,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,CACvE,aACC,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,qBACE,GAAG,EAAE,QAAQ,KAC1B,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7E,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,KAAK,IAAI,EACrC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACjD,EACF,eAAM,SAAS,EAAE,EAAE,CACjB,gKAAgK,EAChK,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CACvE,YACC,eAAM,SAAS,EAAE,EAAE,CACjB,yFAAyF,EACzF,OAAO,IAAI,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CACnE,GAAI,GACA,IACD,IACJ,CACP,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-consent",
-  "version": "0.1.18-rc.24",
+  "version": "0.1.18-rc.26",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,12 +33,13 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.32",
+    "@owlmeans/test-ui": "^0.1.18-rc.33",
     "@tailwindcss/vite": "^4.0.0",
     "@types/bun": "^1.4.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
+    "axe-core": "^4.13.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.550.0",
     "nodemon": "^3.1.14",

package/src/consent/toggle.tsx

@@ -20,41 +20,58 @@ export interface ConsentToggleProps {
  * switch's hit area is 44px square around the visible 24×44 track, and it shows the dialog's 3px
  * focus ring when reached from the keyboard (the real checkbox is visually hidden, so the ring is
  * drawn on the track through `peer-focus-visible`).
+ *
+ * The checkbox takes its NAME from the category label and its description from the `Required`
+ * marker and the description text, by id. The `<label>` around it holds only the drawn track, so
+ * without those references a screen reader announces an unnamed checkbox three times over — the
+ * visible words sit in a sibling column the label cannot reach. A required category keeps its name
+ * while disabled: it is still disclosed, only not a choice.
  */
 export const ConsentToggle: FC<ConsentToggleProps> = (
   { id, label, description, checked, required, requiredLabel, onChange }
-) => (
-  <div className="flex items-center justify-between gap-4 rounded-2xl border border-border p-4">
-    <div className="min-w-0 flex-1">
-      <div className="mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground">
-        {label}
-        {required === true && <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
-          {requiredLabel}
-        </span>}
+) => {
+  const described = [
+    ...(required === true ? [`${id}-required`] : []),
+    ...(description !== '' ? [`${id}-desc`] : []),
+  ]
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-2xl border border-border p-4">
+      <div className="min-w-0 flex-1">
+        <div className="mb-0.5 flex flex-wrap items-center gap-x-2 text-sm font-bold text-foreground">
+          <span id={`${id}-label`}>{label}</span>
+          {required === true && <span
+            id={`${id}-required`} className="text-xs font-bold uppercase tracking-wide text-muted-foreground"
+          >{requiredLabel}</span>}
+        </div>
+        {description !== '' && <p
+          id={`${id}-desc`} className="text-pretty text-xs leading-relaxed text-muted-foreground"
+        >{description}</p>}
       </div>
-      <p className="text-pretty text-xs leading-relaxed text-muted-foreground">{description}</p>
-    </div>
-    <label className={cn(
-      'relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center',
-      required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-    )}>
-      <input
-        id={id}
-        type="checkbox"
-        className="peer sr-only"
-        checked={checked || required === true}
-        disabled={required === true}
-        onChange={event => onChange(event.target.checked)}
-      />
-      <span className={cn(
-        'relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring',
-        checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'
+      <label className={cn(
+        'relative inline-flex h-11 w-14 flex-shrink-0 items-center justify-center',
+        required === true ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
       )}>
+        <input
+          id={id}
+          type="checkbox"
+          aria-labelledby={`${id}-label`}
+          {...(described.length > 0 ? { 'aria-describedby': described.join(' ') } : {})}
+          className="peer sr-only"
+          checked={checked || required === true}
+          disabled={required === true}
+          onChange={event => onChange(event.target.checked)}
+        />
         <span className={cn(
-          'absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300',
-          checked || required === true ? 'translate-x-5' : 'translate-x-0.5'
-        )} />
-      </span>
-    </label>
-  </div>
-)
+          'relative h-6 w-11 rounded-full transition-colors duration-300 peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-ring',
+          checked || required === true ? 'bg-primary' : 'bg-muted-foreground/40'
+        )}>
+          <span className={cn(
+            'absolute top-0.5 left-0 h-5 w-5 rounded-full bg-white transition-transform duration-300',
+            checked || required === true ? 'translate-x-5' : 'translate-x-0.5'
+          )} />
+        </span>
+      </label>
+    </div>
+  )
+}

package/tests/a11y.spec.ts

@@ -0,0 +1,117 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { createRequire } from 'node:module'
+import type { Page } from 'playwright'
+import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+import { CONSENT_KEY, CONSENT_SCHEMA_VERSION } from '@owlmeans/consent'
+import { HARNESS_URL } from './context.js'
+
+const TIMEOUT = 60_000
+
+afterAll(async () => {
+  await closeBrowser()
+})
+
+const base = HARNESS_URL.replace(/\/$/, '')
+const AXE = createRequire(import.meta.url).resolve('axe-core/axe.min.js')
+
+interface Violation { id: string, impact: string | null, help: string, targets: string[] }
+
+/**
+ * Every serious or critical axe violation on the page as it stands.
+ *
+ * Run against the THEMED harness (`styled=1`), because the rule that matters most after naming —
+ * colour contrast — means nothing on an unstyled page, where every text is black on white.
+ */
+const serious = async (page: Page): Promise<Violation[]> => {
+  await page.addScriptTag({ path: AXE })
+  const violations = await page.evaluate(async () => {
+    const axe = (window as never as {
+      axe: { run: (context: Document) => Promise<{ violations: {
+        id: string, impact: string | null, help: string, nodes: { target: string[] }[]
+      }[] }> }
+    }).axe
+    const result = await axe.run(document)
+
+    return result.violations.map(violation => ({
+      id: violation.id,
+      impact: violation.impact,
+      help: violation.help,
+      targets: violation.nodes.map(node => node.target.join(' ')),
+    }))
+  })
+
+  return violations.filter(violation => violation.impact === 'serious' || violation.impact === 'critical')
+}
+
+describe('@owlmeans/web-consent — accessibility', () => {
+  for (const theme of ['light', 'dark']) {
+    test(`the open dialog has no serious or critical axe violation (${theme})`, async () => {
+      // A first visit, so the dialog is open — which is what every new visitor of a generated app
+      // meets before anything else on the page.
+      const { page, close } = await mountComponent({ url: `${base}/?styled=1&theme=${theme}` })
+      try {
+        await page.waitForSelector('[data-consent-dialog]')
+
+        expect(await serious(page)).toEqual([])
+      } finally {
+        await close()
+      }
+    }, TIMEOUT)
+  }
+
+  test('each switch is named by its category and described by its text', async () => {
+    // The label element around a switch holds only the drawn track, so its NAME has to come from
+    // the category label by reference — the defect this pins was three unnamed checkboxes.
+    const { page, close } = await mountComponent({ url: `${base}/?styled=1` })
+    try {
+      await page.waitForSelector('[data-consent-dialog]')
+
+      const essential = page.getByRole('checkbox', { name: 'Essential Cookies' })
+      expect(await essential.isDisabled()).toBe(true)
+      expect(await essential.isChecked()).toBe(true)
+      expect(await essential.getAttribute('aria-describedby')).toBe('cc-essential-required cc-essential-desc')
+
+      const analytics = page.getByRole('checkbox', { name: 'Analytics Cookies' })
+      expect(await analytics.isDisabled()).toBe(false)
+      expect(await analytics.getAttribute('aria-describedby')).toBe('cc-analytics-desc')
+      await page.getByRole('checkbox', { name: 'Marketing Cookies' }).waitFor({ state: 'attached' })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the re-open button has no serious or critical axe violation', async () => {
+    const { page, close } = await mountComponent({ url: `${base}/?styled=1`, waitUntil: 'commit' })
+    try {
+      await page.evaluate(([key, value]) => window.localStorage.setItem(key, value), [
+        CONSENT_KEY,
+        JSON.stringify({ essential: true, analytics: false, marketing: false, v: CONSENT_SCHEMA_VERSION }),
+      ] as [string, string])
+      await page.goto(`${base}/?styled=1`, { waitUntil: 'domcontentloaded' })
+      await page.waitForSelector('[data-consent-reopen]')
+
+      expect(await serious(page)).toEqual([])
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  for (const theme of ['light', 'dark']) {
+    test(`the policy page with services has no serious or critical axe violation (${theme})`, async () => {
+      const { page, close } = await mountComponent({ url: `${base}/?styled=1&theme=${theme}`, waitUntil: 'commit' })
+      try {
+        // With a decision stored, so the dialog does not cover the page being checked.
+        await page.evaluate(([key, value]) => window.localStorage.setItem(key, value), [
+          CONSENT_KEY,
+          JSON.stringify({ essential: true, analytics: true, marketing: false, v: CONSENT_SCHEMA_VERSION }),
+        ] as [string, string])
+        await page.goto(`${base}/?view=policy&services=1&styled=1&theme=${theme}`, { waitUntil: 'domcontentloaded' })
+        await page.waitForSelector('[data-cookie-policy-service]')
+
+        expect(await serious(page)).toEqual([])
+      } finally {
+        await close()
+      }
+    }, TIMEOUT)
+  }
+})

package/tests/harness/mount.tsx

@@ -12,9 +12,18 @@ import type { ConsentCategory, ConsentService } from '../../src/index.js'
  * - `?categories=custom` — a category set that is NOT the default, with its own global var.
  * - `?view=policy` — the cookie-policy page instead of the dialog.
  * - `?services=1` — with `view=policy`, disclose {@link SERVICES} on it.
+ * - `?styled=1` — compile a real theme (`styled.css`), for the accessibility spec only.
+ * - `?theme=dark` — with `styled=1`, the dark scheme.
  */
 const params = new URLSearchParams(window.location.search)
 
+if (params.get('styled') != null) {
+  await import('./styled.css')
+  if (params.get('theme') === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+}
+
 /**
  * A deliberately non-default set: a different key, a different global var, and a signal list that
  * does not match the built-in one. A component that quietly fell back to the defaults would still

package/tests/harness/styled.css

@@ -0,0 +1,54 @@
+/*
+  A real theme for the accessibility spec, loaded only when the URL asks for it (`?styled=1`).
+
+  Every other spec asserts on class lists and needs the page unstyled: a styled dialog is a fixed,
+  full-screen overlay, and the specs that click past it would be clicking through it. Contrast,
+  on the other hand, cannot be judged on an unstyled page — so this sheet compiles the package's
+  own sources with the neutral tokens a generated app ships (ground, ink, muted, hairline, tile,
+  one accent) in both schemes.
+*/
+@import "tailwindcss";
+
+@source "../../src";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --background: #ffffff;
+  --foreground: #0a2540;
+  --muted: #f5f7fa;
+  --muted-foreground: #51606f;
+  --border: #e6e6ea;
+  --primary: #8a3f1c;
+  --primary-foreground: #ffffff;
+  --ring: #0a2540;
+  color-scheme: light;
+}
+
+.dark {
+  --background: #000000;
+  --foreground: #f5f7fa;
+  --muted: #0e1318;
+  --muted-foreground: #9aa7b4;
+  --border: #1f2630;
+  --primary: #d9895f;
+  --primary-foreground: #000000;
+  --ring: #f5f7fa;
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-ring: var(--ring);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}