@techsio/storybook-better-a11y 0.0.1

package/AGENTS.MD

@@ -0,0 +1,12 @@
+# AGENTS
+
+## Upstream sync policy
+This addon is derived from Storybook's official `@storybook/addon-a11y`.
+
+When Storybook releases updates to the upstream addon, we must merge or rebase:
+1. Pull upstream changes from `storybookjs/storybook` (or the tracked fork).
+2. Re-apply APCA-specific patches on top of upstream changes.
+3. Re-run unit tests and update proof screenshots.
+4. Document the upstream version in the release notes.
+
+Keep the diff with upstream minimal to make future merges straightforward.

package/README.md

@@ -0,0 +1,40 @@
+# @techsio/storybook-better-a11y
+
+Storybook Accessibility addon with APCA (WCAG 3) contrast checks, tuned for RsBuild/RsLib.
+
+## Install
+```bash
+pnpm add -D @techsio/storybook-better-a11y
+```
+
+## Usage
+```ts
+// .storybook/main.ts
+export default {
+  addons: ['@techsio/storybook-better-a11y'],
+};
+```
+
+```ts
+// .storybook/preview.ts
+export default {
+  parameters: {
+    a11y: {
+      options: {
+        runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice', 'wcag2aaa'],
+      },
+      apca: {
+        level: 'silver',
+        useCase: 'body',
+      },
+      test: 'error',
+    },
+  },
+};
+```
+
+## APCA parameters
+- `level`: `bronze | silver | gold`
+- `useCase`: `body | fluent | sub-fluent | non-fluent`
+
+You can override the use case per element using `data-apca-usecase`.

package/dist/100.js

@@ -0,0 +1,122 @@
+const ADDON_ID = 'storybook/a11y';
+const PANEL_ID = `${ADDON_ID}/panel`;
+"a11y";
+"vision";
+const RESULT = `${ADDON_ID}/result`;
+const REQUEST = `${ADDON_ID}/request`;
+const RUNNING = `${ADDON_ID}/running`;
+const ERROR = `${ADDON_ID}/error`;
+const MANUAL = `${ADDON_ID}/manual`;
+const SELECT = `${ADDON_ID}/select`;
+const DOCUMENTATION_LINK = 'writing-tests/accessibility-testing';
+const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
+const EVENTS = {
+    RESULT: RESULT,
+    REQUEST: REQUEST,
+    RUNNING: RUNNING,
+    ERROR: ERROR,
+    MANUAL: MANUAL,
+    SELECT: SELECT
+};
+const STATUS_TYPE_ID_COMPONENT_TEST = 'storybook/component-test';
+const STATUS_TYPE_ID_A11Y = 'storybook/a11y';
+const filters = {
+    blurred: {
+        label: 'Blurred vision',
+        filter: 'blur(2px)',
+        percentage: 22.9
+    },
+    deuteranomaly: {
+        label: 'Deuteranomaly',
+        filter: 'url("#storybook-a11y-vision-deuteranomaly")',
+        percentage: 2.7
+    },
+    deuteranopia: {
+        label: 'Deuteranopia',
+        filter: 'url("#storybook-a11y-vision-deuteranopia")',
+        percentage: 0.56
+    },
+    protanomaly: {
+        label: 'Protanomaly',
+        filter: 'url("#storybook-a11y-vision-protanomaly")',
+        percentage: 0.66
+    },
+    protanopia: {
+        label: 'Protanopia',
+        filter: 'url("#storybook-a11y-vision-protanopia")',
+        percentage: 0.59
+    },
+    tritanomaly: {
+        label: 'Tritanomaly',
+        filter: 'url("#storybook-a11y-vision-tritanomaly")',
+        percentage: 0.01
+    },
+    tritanopia: {
+        label: 'Tritanopia',
+        filter: 'url("#storybook-a11y-vision-tritanopia")',
+        percentage: 0.016
+    },
+    achromatopsia: {
+        label: 'Achromatopsia',
+        filter: 'url("#storybook-a11y-vision-achromatopsia")',
+        percentage: 0.0001
+    },
+    grayscale: {
+        label: 'Grayscale',
+        filter: 'grayscale(100%)'
+    }
+};
+const filterDefs = `<svg id="storybook-a11y-vision-filters" style="display: none !important;">
+  <defs>
+    <filter id="storybook-a11y-vision-protanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-protanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-deuteranopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-deuteranomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-tritanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-tritanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+    <filter id="storybook-a11y-vision-achromatopsia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
+      />
+    </filter>
+  </defs>
+</svg>`;
+export { ADDON_ID, DOCUMENTATION_DISCREPANCY_LINK, EVENTS, PANEL_ID, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, filterDefs, filters };