@techsio/storybook-better-a11y 0.0.1 → 0.0.3

package/dist/699.js

@@ -191,7 +191,7 @@ function isVisible(element) {
     const computed = global.getComputedStyle(element);
     return 'none' !== computed.display && 'hidden' !== computed.visibility && '0' !== computed.opacity;
 }
-async function runAPCACheck(context = apcaChecker_document, options = DEFAULT_APCA_OPTIONS) {
+async function runAPCACheck(context = apcaChecker_document, options = DEFAULT_APCA_OPTIONS, excludeSelectors = []) {
     const { APCAcontrast, sRGBtoY, fontLookupAPCA } = await import("apca-w3");
     const apcaOptions = {
         ...DEFAULT_APCA_OPTIONS,
@@ -201,6 +201,16 @@ async function runAPCACheck(context = apcaChecker_document, options = DEFAULT_AP
     const root = context instanceof Document ? context.body : context;
     const textElements = root.querySelectorAll('p, span, div, h1, h2, h3, h4, h5, h6, a, button, label, td, th, li, input, textarea');
     textElements.forEach((element)=>{
+        if (excludeSelectors.length > 0) {
+            const isExcluded = excludeSelectors.some((selector)=>{
+                try {
+                    return null !== element.closest(selector);
+                } catch  {
+                    return false;
+                }
+            });
+            if (isExcluded) return;
+        }
         if (!isVisible(element) || !hasReadableText(element)) return;
         const foreground = getComputedColor(element, 'color');
         const background = getEffectiveBackgroundColor(element);
@@ -381,7 +391,10 @@ const run = async (input = DEFAULT_PARAMETERS, storyId)=>{
                     if (first instanceof Element) contextElement = first;
                     else if ('string' == typeof first) contextElement = a11yRunner_document.querySelector(first) || a11yRunner_document;
                 } else if ('string' == typeof context.include) contextElement = a11yRunner_document.querySelector(context.include) || a11yRunner_document;
-                const apcaResult = await runAPCACheck(contextElement, input.apca);
+                const excludeSelectors = Array.isArray(context.exclude) ? context.exclude.filter((value)=>'string' == typeof value) : 'string' == typeof context.exclude ? [
+                    context.exclude
+                ] : [];
+                const apcaResult = await runAPCACheck(contextElement, input.apca, excludeSelectors);
                 if (apcaResult.nodes.length > 0) result.violations.push(apcaResult);
                 else result.passes.push(apcaResult);
                 const resultWithLinks = withLinkPaths(result, storyId);

package/dist/a11yRunner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11yRunner.d.ts","sourceRoot":"","sources":["../src/a11yRunner.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAC;AAMrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAiC/C,eAAO,MAAM,GAAG,GAAU,OAAO,cAAc,YAAqB,EAAE,SAAS,MAAM,wBA4GpF,CAAC"}
+{"version":3,"file":"a11yRunner.d.ts","sourceRoot":"","sources":["../src/a11yRunner.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAC;AAMrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAiC/C,eAAO,MAAM,GAAG,GAAU,OAAO,cAAc,YAAqB,EAAE,SAAS,MAAM,wBAkHpF,CAAC"}

package/dist/apcaChecker.d.ts

@@ -8,6 +8,6 @@ interface ApcaOptions {
 /**
  * Run APCA contrast checks on the document
  */
-export declare function runAPCACheck(context?: Element | Document, options?: ApcaOptions): Promise<Result>;
+export declare function runAPCACheck(context?: Element | Document, options?: ApcaOptions, excludeSelectors?: string[]): Promise<Result>;
 export {};
 //# sourceMappingURL=apcaChecker.d.ts.map

package/dist/apcaChecker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apcaChecker.d.ts","sourceRoot":"","sources":["../src/apcaChecker.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,UAAU,CAAC;AAYnD,KAAK,oBAAoB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzD,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAC;AAEnE,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA8OD;;GAEG;AACH,wBAAsB,YAAY,CAChC,OAAO,GAAE,OAAO,GAAG,QAAmB,EACtC,OAAO,GAAE,WAAkC,GAC1C,OAAO,CAAC,MAAM,CAAC,CAoKjB"}
+{"version":3,"file":"apcaChecker.d.ts","sourceRoot":"","sources":["../src/apcaChecker.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,UAAU,CAAC;AAYnD,KAAK,oBAAoB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzD,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,YAAY,CAAC;AAEnE,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA8OD;;GAEG;AACH,wBAAsB,YAAY,CAChC,OAAO,GAAE,OAAO,GAAG,QAAmB,EACtC,OAAO,GAAE,WAAkC,EAC3C,gBAAgB,GAAE,MAAM,EAAO,GAC9B,OAAO,CAAC,MAAM,CAAC,CA+KjB"}

package/dist/components/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAkBzC,UAAU,SAAS;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,IAAI,EAAE,QAAQ,CAAC;KAChB,EAAE,CAAC;CACL;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+DpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAkBzC,UAAU,SAAS;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;QAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,IAAI,EAAE,QAAQ,CAAC;KAChB,EAAE,CAAC;CACL;AAQD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8DpC,CAAC"}

package/dist/components/VisionSimulator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisionSimulator.d.ts","sourceRoot":"","sources":["../../src/components/VisionSimulator.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,eAAe,+CAyB3B,CAAC"}
+{"version":3,"file":"VisionSimulator.d.ts","sourceRoot":"","sources":["../../src/components/VisionSimulator.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,eAAe,+CAuC3B,CAAC"}

package/dist/manager.js

@@ -1,5 +1,5 @@
 import react, { Fragment, createContext, createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Badge, Button, EmptyTabContent, Link, Select, SyntaxHighlighter, TabsView } from "storybook/internal/components";
+import { Badge, Button, EmptyTabContent, Link, SyntaxHighlighter, Tabs } from "storybook/internal/components";
 import { addons, experimental_getStatusStore, experimental_useStatusStore, types, useAddonState, useChannel, useGlobals, useParameter, useStorybookApi, useStorybookState } from "storybook/manager-api";
 import { AccessibilityIcon, CheckIcon, ChevronSmallDownIcon, CollapseIcon, CopyIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, LocationIcon, SyncIcon } from "@storybook/icons";
 import { convert, styled, themes, useTheme } from "storybook/theming";
@@ -1246,21 +1246,18 @@ const ActionsWrapper = styled.div({
     justifyContent: 'flex-end',
     gap: 6
 });
-const Tabs = ({ tabs })=>{
+const TabPanel = ({ id, children })=>/*#__PURE__*/ createElement("div", {
+        id: id
+    }, children);
+const Tabs_Tabs = ({ tabs })=>{
     const { tab, setTab, toggleHighlight, highlighted, handleManual, allExpanded, handleCollapseAll, handleExpandAll } = useA11yContext();
     const theme = useTheme();
-    return /*#__PURE__*/ createElement(Container, null, /*#__PURE__*/ createElement(TabsView, {
+    return /*#__PURE__*/ createElement(Container, null, /*#__PURE__*/ createElement(Tabs, {
         backgroundColor: theme.background.app,
-        panelProps: {
-            hasScrollbar: true
-        },
-        tabs: tabs.map((tab)=>({
-                id: tab.type,
-                title: tab.label,
-                children: tab.panel
-            })),
         selected: tab,
-        onSelectionChange: (key)=>setTab(key),
+        actions: {
+            onSelect: (id)=>setTab(id)
+        },
         tools: /*#__PURE__*/ createElement(ActionsWrapper, null, /*#__PURE__*/ createElement(Button, {
             variant: "ghost",
             padding: "small",
@@ -1278,7 +1275,11 @@ const Tabs = ({ tabs })=>{
             onClick: handleManual,
             ariaLabel: "Rerun accessibility scan"
         }, /*#__PURE__*/ createElement(SyncIcon, null)))
-    }));
+    }, tabs.map((tabItem)=>/*#__PURE__*/ createElement(TabPanel, {
+            key: tabItem.type,
+            id: tabItem.type,
+            title: tabItem.label
+        }, tabItem.panel))));
 };
 const TestDiscrepancyMessage_Wrapper = styled.div(({ theme: { color, typography, background } })=>({
         textAlign: 'start',
@@ -1434,7 +1435,7 @@ const A11YPanel = ()=>{
     if (parameters.disable || 'off' === parameters.test) return /*#__PURE__*/ react.createElement(Centered, null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "Accessibility tests are disabled for this story"), /*#__PURE__*/ react.createElement("p", null, "Update", ' ', /*#__PURE__*/ react.createElement("code", null, parameters.disable ? 'parameters.a11y.disable' : 'parameters.a11y.test'), ' ', "to enable accessibility tests.")));
     return /*#__PURE__*/ react.createElement(react.Fragment, null, discrepancy && /*#__PURE__*/ react.createElement(TestDiscrepancyMessage, {
         discrepancy: discrepancy
-    }), 'ready' === status || 'ran' === status ? /*#__PURE__*/ react.createElement(Tabs, {
+    }), 'ready' === status || 'ran' === status ? /*#__PURE__*/ react.createElement(Tabs_Tabs, {
         key: "tabs",
         tabs: tabs
     }) : /*#__PURE__*/ react.createElement(Centered, {
@@ -1478,30 +1479,57 @@ const ColorIcon = styled.span({
     }), ({ theme })=>({
         boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
     }));
+const SelectRow = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '6px 10px',
+        border: `1px solid ${theme.appBorderColor}`,
+        borderRadius: theme.appBorderRadius,
+        background: theme.background.content
+    }));
+const SelectInput = styled.select(({ theme })=>({
+        flex: 1,
+        minWidth: 0,
+        padding: '4px 6px',
+        border: `1px solid ${theme.appBorderColor}`,
+        borderRadius: theme.appBorderRadius,
+        background: theme.background.app,
+        color: theme.color.defaultText,
+        fontSize: theme.typography.size.s2
+    }));
+const ResetButton = styled(Button)({
+    whiteSpace: 'nowrap'
+});
 const VisionSimulator = ()=>{
     const [globals, updateGlobals] = useGlobals();
     const value = globals["vision"];
     const options = Object.entries(filters).map(([key, { label, percentage }])=>({
-            title: label,
-            description: percentage ? `${percentage}% of users` : void 0,
-            icon: /*#__PURE__*/ react.createElement(ColorIcon, {
-                $filter: key
-            }),
+            label: percentage ? `${label} (${percentage}% of users)` : label,
             value: key
         }));
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Select, {
-        resetLabel: "Reset color filter",
-        onReset: ()=>updateGlobals({
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SelectRow, {
+        "aria-label": "Vision simulator"
+    }, /*#__PURE__*/ react.createElement(AccessibilityIcon, null), /*#__PURE__*/ react.createElement(ColorIcon, {
+        $filter: String(value || 'none')
+    }), /*#__PURE__*/ react.createElement(SelectInput, {
+        value: value ?? '',
+        onChange: (event)=>updateGlobals({
+                ["vision"]: event.target.value || void 0
+            })
+    }, /*#__PURE__*/ react.createElement("option", {
+        value: ""
+    }, "No filter"), options.map((option)=>/*#__PURE__*/ react.createElement("option", {
+            key: option.value,
+            value: option.value
+        }, option.label))), /*#__PURE__*/ react.createElement(ResetButton, {
+        variant: "ghost",
+        padding: "small",
+        onClick: ()=>updateGlobals({
                 ["vision"]: void 0
             }),
-        icon: /*#__PURE__*/ react.createElement(AccessibilityIcon, null),
-        ariaLabel: "Vision simulator",
-        defaultOptions: value,
-        options: options,
-        onSelect: (selected)=>updateGlobals({
-                ["vision"]: selected
-            })
-    }), /*#__PURE__*/ react.createElement(Hidden, {
+        ariaLabel: "Reset color filter"
+    }, "Reset")), /*#__PURE__*/ react.createElement(Hidden, {
         dangerouslySetInnerHTML: {
             __html: filterDefs
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/storybook-better-a11y",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Storybook Accessibility addon with APCA (WCAG 3) support",
   "keywords": [
     "storybook",
@@ -12,6 +12,11 @@
   ],
   "license": "MIT",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NMIT-WR/storybook-addons",
+    "directory": "packages/addon-a11y-apca"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -33,7 +38,8 @@
   "scripts": {
     "build": "rslib build",
     "lint": "eslint .",
-    "test": "vitest run"
+    "test": "vitest run",
+    "semantic-release": "semantic-release"
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
@@ -43,10 +49,18 @@
   "devDependencies": {
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.21",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@storybook/icons": "^2.0.1",
+    "rsbuild-plugin-publint": "^0.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "semantic-release": "^25.0.2",
     "storybook": "^10.0.0",
     "vitest-axe": "^0.1.0"
   },