@techsio/storybook-better-a11y 0.0.1 → 0.0.2

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.2",
   "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"
   },