@techsio/storybook-better-a11y 0.0.5 → 0.0.6

package/dist/types.js

@@ -0,0 +1,6 @@
+const RuleType = {
+    VIOLATION: 'violations',
+    PASS: 'passes',
+    INCOMPLETION: 'incomplete'
+};
+export { RuleType };

package/dist/utils.js

@@ -0,0 +1,21 @@
+function getIsVitestStandaloneRun() {
+    try {
+        return 'false' === ({
+            MODE: "production",
+            DEV: false,
+            PROD: true,
+            BASE_URL: "/",
+            ASSET_PREFIX: "auto"
+        }).VITEST_STORYBOOK;
+    } catch (e) {
+        return false;
+    }
+}
+function getIsVitestRunning() {
+    try {
+        return false;
+    } catch (e) {
+        return false;
+    }
+}
+export { getIsVitestRunning, getIsVitestStandaloneRun };

package/dist/visionSimulatorFilters.js

@@ -0,0 +1,100 @@
+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 { filterDefs, filters };

package/dist/withVisionSimulator.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect } from "storybook/preview-api";
+import { filterDefs, filters } from "./visionSimulatorFilters.js";
+const knownFilters = Object.values(filters).map((f)=>f.filter);
+const knownFiltersRegExp = new RegExp(`\\b(${knownFilters.join('|')})\\b`, 'g');
+const withVisionSimulator = (StoryFn, { globals })=>{
+    const { vision } = globals;
+    const applyVisionFilter = useCallback(()=>{
+        const existingFilters = document.body.style.filter.replaceAll(knownFiltersRegExp, '').trim();
+        const visionFilter = filters[vision]?.filter;
+        if (visionFilter && document.body.classList.contains('sb-show-main')) if (existingFilters && 'none' !== existingFilters) document.body.style.filter = `${existingFilters} ${visionFilter}`;
+        else document.body.style.filter = visionFilter;
+        else document.body.style.filter = existingFilters || 'none';
+        return ()=>document.body.style.filter = existingFilters || 'none';
+    }, [
+        vision
+    ]);
+    useEffect(()=>{
+        const cleanup = applyVisionFilter();
+        const observer = new MutationObserver(()=>applyVisionFilter());
+        observer.observe(document.body, {
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>{
+            cleanup();
+            observer.disconnect();
+        };
+    }, [
+        applyVisionFilter
+    ]);
+    useEffect(()=>{
+        document.body.insertAdjacentHTML('beforeend', filterDefs);
+        return ()=>{
+            const filterDefsElement = document.getElementById('storybook-a11y-vision-filters');
+            filterDefsElement?.parentElement?.removeChild(filterDefsElement);
+        };
+    }, []);
+    return StoryFn();
+};
+export { withVisionSimulator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/storybook-better-a11y",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Storybook Accessibility addon with APCA (WCAG 3) support",
   "keywords": [
     "storybook",