@cssints/apg-specs 0.0.0-stage → 0.5.2

package/scenarios/apg/tabs.ariakit.json

@@ -0,0 +1,329 @@
+{
+  "pattern": "tabs",
+  "source": "ariakit",
+  "commit": "404c72257b879569feb08465da4ff9915fd873da",
+  "license": "MIT",
+  "scenarios": [
+    {
+      "id": "tabs.ariakit.default-selected-tab",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab/test.ts#L4",
+      "upstreamTest": "default selected tab",
+      "apg": "aria",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 1
+      },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "tab:0": { "aria-selected": "false" },
+              "tab:1": { "aria-selected": "true" },
+              "tab:2": { "aria-selected": "false" }
+            },
+            "visible": ["tabpanel:1"]
+          }
+        }
+      ],
+      "notes": "Ariakit TabProvider defaultSelectedId selects the middle tab; the matching panel is visible and the other panels are not."
+    },
+    {
+      "id": "tabs.ariakit.arrow-selects-automatic",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab/test.ts#L9",
+      "upstreamTest": "select with keyboard",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 1
+      },
+      "steps": [
+        { "event": "focus", "target": "tab:1" },
+        {
+          "expect": {
+            "focus": "tab:1",
+            "attrs": { "tab:1": { "aria-selected": "true" } },
+            "visible": ["tabpanel:1"]
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:1" },
+        {
+          "expect": {
+            "focus": "tab:2",
+            "attrs": { "tab:2": { "aria-selected": "true" } },
+            "visible": ["tabpanel:2"]
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:2" },
+        {
+          "expect": {
+            "focus": "tab:0",
+            "attrs": { "tab:0": { "aria-selected": "true" } },
+            "visible": ["tabpanel:0"]
+          }
+        },
+        { "event": "key", "key": "ArrowLeft", "target": "tab:0" },
+        {
+          "expect": {
+            "focus": "tab:2",
+            "attrs": { "tab:2": { "aria-selected": "true" } },
+            "visible": ["tabpanel:2"]
+          }
+        }
+      ],
+      "notes": "Automatic activation: moving focus also selects. Focus wraps past the ends (APG optional wrapping)."
+    },
+    {
+      "id": "tabs.ariakit.click-selects",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab/test.ts#L25",
+      "upstreamTest": "select with mouse",
+      "apg": "aria",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 1
+      },
+      "steps": [
+        { "event": "click", "target": "tab:2" },
+        {
+          "expect": {
+            "focus": "tab:2",
+            "attrs": { "tab:2": { "aria-selected": "true" } },
+            "visible": ["tabpanel:2"]
+          }
+        }
+      ],
+      "notes": "Pointer selection moves focus to the clicked tab as well as selecting it and showing its panel."
+    },
+    {
+      "id": "tabs.ariakit.focus-does-not-select",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab/test.ts#L32",
+      "upstreamTest": "do not select with focus (e.g., screen reader focus)",
+      "apg": "extension",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 1
+      },
+      "steps": [
+        { "event": "focus", "target": "tab:0" },
+        {
+          "expect": {
+            "focus": "tab:0",
+            "attrs": {
+              "tab:0": { "aria-selected": "false" },
+              "tab:1": { "aria-selected": "true" }
+            },
+            "visible": ["tabpanel:1"]
+          }
+        }
+      ],
+      "notes": "Programmatic (screen reader) focus does not activate the tab; only keyboard/pointer interaction does."
+    },
+    {
+      "id": "tabs.ariakit.disabled-tab-focused-not-selected",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab-disabled/test.ts#L4",
+      "upstreamTest": "navigate through tabs with keyboard",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 1,
+        "disabled": [2]
+      },
+      "steps": [
+        { "event": "focus", "target": "tab:1" },
+        {
+          "expect": {
+            "focus": "tab:1",
+            "attrs": { "tab:1": { "aria-selected": "true" } },
+            "visible": ["tabpanel:1"]
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:1" },
+        {
+          "expect": {
+            "focus": "tab:2",
+            "attrs": {
+              "tab:2": { "aria-selected": "false" },
+              "tab:1": { "aria-selected": "true" }
+            },
+            "visible": ["tabpanel:1"]
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:2" },
+        {
+          "expect": {
+            "focus": "tab:0",
+            "attrs": { "tab:0": { "aria-selected": "true" } },
+            "visible": ["tabpanel:0"]
+          }
+        }
+      ],
+      "notes": "Disabled tab (index 2) stays focusable but cannot be selected; the next move continues past it and wraps to the first tab."
+    },
+    {
+      "id": "tabs.ariakit.rtl-arrows",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/ariakit-ui-tabs/test.ts#L18",
+      "upstreamTest": "moves and selects tabs in right-to-left order",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 3,
+        "selected": 0,
+        "direction": "rtl"
+      },
+      "steps": [
+        { "event": "click", "target": "tab:0" },
+        { "event": "key", "key": "ArrowLeft", "target": "tab:0" },
+        {
+          "expect": {
+            "focus": "tab:1",
+            "attrs": { "tab:1": { "aria-selected": "true" } }
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:1" },
+        {
+          "expect": {
+            "focus": "tab:0",
+            "attrs": { "tab:0": { "aria-selected": "true" } }
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "tab:0" },
+        {
+          "expect": {
+            "focus": "tab:2",
+            "attrs": { "tab:2": { "aria-selected": "true" } }
+          }
+        },
+        { "event": "key", "key": "ArrowLeft", "target": "tab:2" },
+        {
+          "expect": {
+            "focus": "tab:0",
+            "attrs": { "tab:0": { "aria-selected": "true" } }
+          }
+        }
+      ],
+      "notes": "In RTL, ArrowLeft advances and ArrowRight retreats; from the first tab ArrowRight wraps to the last. Mirrors the duplicate browser test in ariakit-ui-tabs/test-chrome.ts."
+    },
+    {
+      "id": "tabs.ariakit.manual-activation-enter",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/ariakit-ui-tabs/test-chrome.ts#L42",
+      "upstreamTest": "moves keyboard focus between tabs without selecting",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "manual",
+        "items": 3,
+        "selected": 0
+      },
+      "steps": [
+        { "event": "click", "target": "tab:0" },
+        { "event": "key", "key": "ArrowRight", "target": "tab:0" },
+        {
+          "expect": {
+            "focus": "tab:1",
+            "attrs": {
+              "tab:0": { "aria-selected": "true" },
+              "tab:1": { "aria-selected": "false" }
+            }
+          }
+        },
+        { "event": "key", "key": "Enter", "target": "tab:1" },
+        {
+          "expect": {
+            "attrs": {
+              "tab:0": { "aria-selected": "false" },
+              "tab:1": { "aria-selected": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Folder-glider example uses manual activation: arrows move focus only; Enter commits the focused tab."
+    },
+    {
+      "id": "tabs.ariakit.panel-tabindex-no-tabbable",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab-panel-6332/test.ts#L5",
+      "upstreamTest": "panel gains tabindex when switching to a tab without tabbable content",
+      "apg": "aria",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 2,
+        "selected": 0
+      },
+      "steps": [
+        { "expect": { "attrs": { "tabpanel:0": { "tabindex": null } } } },
+        { "event": "click", "target": "tab:1" },
+        { "expect": { "attrs": { "tabpanel:1": { "tabindex": "0" } } } },
+        { "event": "key", "key": "Tab", "target": "tabpanel:1" },
+        { "expect": { "focus": "tabpanel:1" } }
+      ],
+      "notes": "Panel 1 holds a link and keeps a natural tab stop; panel 2 has no focusable content, so it gets tabindex=0 and receives focus on Tab."
+    },
+    {
+      "id": "tabs.ariakit.panel-tabindex-tabbable",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/tab-panel-6332/test.ts#L14",
+      "upstreamTest": "panel drops tabindex when switching to a tab with tabbable content",
+      "apg": "aria",
+      "config": {
+        "orientation": "horizontal",
+        "activation": "automatic",
+        "items": 2,
+        "selected": 0
+      },
+      "steps": [
+        { "expect": { "attrs": { "tabpanel:0": { "tabindex": "0" } } } },
+        { "event": "click", "target": "tab:1" },
+        { "expect": { "attrs": { "tabpanel:1": { "tabindex": null } } } },
+        { "event": "key", "key": "Tab", "target": "tabpanel:0" },
+        { "expect": { "focus": "link:0" } }
+      ],
+      "notes": "Panel 0 has no focusable content (tabindex=0); panel 1 contains a link, so the panel itself drops tabindex and Tab reaches the link (target link:0 for that focusable child)."
+    }
+  ],
+  "skipped": [
+    {
+      "upstreamTest": "renders a phrasing label in ...",
+      "upstream": "app/src/sandbox/ariakit-ui-tabs/test.ts#L49",
+      "reason": "DOM structure/styling (BUTTON wrapping SPAN) not an interaction behaviour"
+    },
+    {
+      "upstreamTest": "lets an overflowing strip scroll to the tabs that do not fit",
+      "upstream": "app/src/sandbox/ariakit-ui-tabs/test-chrome.ts#L64",
+      "reason": "styling/scroll geometry"
+    },
+    {
+      "upstreamTest": "keeps the project/team panel visible with an explicit store",
+      "upstream": "app/src/sandbox/ariakit-ui-tabs/test-chrome.ts#L81",
+      "reason": "React-only explicit store API"
+    },
+    {
+      "upstreamTest": "preserves an explicit tabId on a single panel",
+      "upstream": "app/src/sandbox/ariakit-ui-tabs/test-chrome.ts#L96",
+      "reason": "React-only explicit tabId API"
+    },
+    {
+      "upstreamTest": "a tabs record keys its tabs and passes tab props",
+      "upstream": "app/src/sandbox/ariakit-ui-tabs/test-chrome.ts#L108",
+      "reason": "React-only record rendering API"
+    },
+    {
+      "upstreamTest": "moves focus after controlled tab selection",
+      "upstream": "app/src/sandbox/tab-4213/test-browser.ts#L5",
+      "reason": "React controlled-state API"
+    },
+    {
+      "upstreamTest": "switch tabs",
+      "upstream": "app/src/sandbox/tab-nested/test.ts#L4",
+      "reason": "nested tablists are outside the single tablist/tab/tabpanel target model"
+    }
+  ]
+}