@techsio/storybook-better-a11y 0.0.9 → 0.0.10

package/dist/components/Report/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Report/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAU/D,OAAO,KAAK,EAAsB,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAyHhF,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,qBAAqB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,OAAO,GAAI,sDAAsD,YAAY,sBAiDzF,CAAC"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Report/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAsB,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAyHhF,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,qBAAqB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,OAAO,GAAI,sDAAsD,YAAY,sBA+CzF,CAAC"}

package/dist/manager.js

@@ -5,7 +5,6 @@ import { AccessibilityIcon, CheckIcon, ChevronSmallDownIcon, CollapseIcon, CopyI
 import { convert, styled, themes, useTheme } from "storybook/theming";
 import { STORY_CHANGED, STORY_FINISHED, STORY_HOT_UPDATED, STORY_RENDER_PHASE_CHANGED } from "storybook/internal/core-events";
 import { HIGHLIGHT, REMOVE_HIGHLIGHT, SCROLL_INTO_VIEW } from "storybook/highlight";
-import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
 import { EVENTS, STATUS_TYPE_ID_COMPONENT_TEST, filters, filterDefs, DOCUMENTATION_DISCREPANCY_LINK, ADDON_ID, STATUS_TYPE_ID_A11Y, PANEL_ID } from "./100.js";
 const RuleType = {
     VIOLATION: 'violations',
@@ -1012,7 +1011,7 @@ const Columns = styled.div({
         gridTemplateColumns: '50% 50%'
     }
 });
-const Details_Content = styled.div(({ theme, side })=>({
+const Content = styled.div(({ theme, side })=>({
         display: 'left' === side ? 'flex' : 'none',
         flexDirection: 'column',
         gap: 15,
@@ -1069,49 +1068,44 @@ const CopyButton = ({ onClick })=>{
         onClick: handleClick
     }, copied ? /*#__PURE__*/ react.createElement(CheckIcon, null) : /*#__PURE__*/ react.createElement(CopyIcon, null), " ", copied ? 'Copied' : 'Copy link');
 };
-const Details = ({ id, item, type, selection, handleSelectionChange })=>/*#__PURE__*/ react.createElement(Wrapper, {
+const Details = ({ id, item, type, selection, handleSelectionChange })=>{
+    const selectedNode = useMemo(()=>{
+        const selectedIndex = item.nodes.findIndex((_, index)=>`${type}.${item.id}.${index + 1}` === selection);
+        return item.nodes[-1 === selectedIndex ? 0 : selectedIndex];
+    }, [
+        item.id,
+        item.nodes,
+        selection,
+        type
+    ]);
+    return /*#__PURE__*/ react.createElement(Wrapper, {
         id: id
     }, /*#__PURE__*/ react.createElement(Info, null, /*#__PURE__*/ react.createElement(RuleId, null, item.id), /*#__PURE__*/ react.createElement(Description, null, getFriendlySummaryForAxeResult(item), ' ', /*#__PURE__*/ react.createElement(Link, {
         href: item.helpUrl,
         target: "_blank",
         rel: "noopener noreferrer",
         withArrow: true
-    }, "Learn how to resolve this violation"))), /*#__PURE__*/ react.createElement(Root, {
-        defaultValue: selection,
-        orientation: "vertical",
-        value: selection,
-        onValueChange: handleSelectionChange,
-        asChild: true
-    }, /*#__PURE__*/ react.createElement(Columns, null, /*#__PURE__*/ react.createElement(List, {
+    }, "Learn how to resolve this violation"))), /*#__PURE__*/ react.createElement(Columns, null, /*#__PURE__*/ react.createElement("div", {
         "aria-label": type
     }, item.nodes.map((node, index)=>{
         const key = `${type}.${item.id}.${index + 1}`;
+        const isActive = selection === key;
         return /*#__PURE__*/ react.createElement(Fragment, {
             key: key
-        }, /*#__PURE__*/ react.createElement(Trigger, {
-            value: key,
-            asChild: true
         }, /*#__PURE__*/ react.createElement(Item, {
             ariaLabel: false,
             variant: "ghost",
             size: "medium",
-            id: key
-        }, index + 1, ". ", node.html)), /*#__PURE__*/ react.createElement(Content, {
-            value: key,
-            asChild: true
-        }, /*#__PURE__*/ react.createElement(Details_Content, {
+            id: key,
+            "data-state": isActive ? 'active' : 'inactive',
+            onClick: ()=>handleSelectionChange(key)
+        }, index + 1, ". ", node.html), isActive ? /*#__PURE__*/ react.createElement(Content, {
             side: "left"
-        }, getContent(node))));
-    })), item.nodes.map((node, index)=>{
-        const key = `${type}.${item.id}.${index + 1}`;
-        return /*#__PURE__*/ react.createElement(Content, {
-            key: key,
-            value: key,
-            asChild: true
-        }, /*#__PURE__*/ react.createElement(Details_Content, {
-            side: "right"
-        }, getContent(node)));
-    }))));
+        }, getContent(node)) : null);
+    })), /*#__PURE__*/ react.createElement(Content, {
+        side: "right"
+    }, selectedNode ? getContent(selectedNode) : null)));
+};
 function getContent(node) {
     const { handleCopyLink, handleJumpToElement } = useA11yContext();
     const { any, all, none, html, target } = node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/storybook-better-a11y",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Storybook Accessibility addon with APCA (WCAG 3) support",
   "keywords": [
     "storybook",
@@ -55,7 +55,6 @@
     "@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",
@@ -65,7 +64,6 @@
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "@radix-ui/react-tabs": ">=1.0.0",
     "@storybook/icons": ">=2.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",