@cssints/apg-specs 0.0.0-stage → 0.5.2

package/scenarios/apg/toolbar.react-aria.json

@@ -0,0 +1,383 @@
+{
+  "pattern": "toolbar",
+  "source": "react-aria",
+  "commit": "99e610236887da619ad9d54a1cd87983166c043d",
+  "license": "Apache-2.0",
+  "skipped": [
+    {
+      "reason": "react-aria-components Toolbar.test.tsx 'renders' - render/ref/class assertion only, no behaviour"
+    },
+    {
+      "reason": "react-aria-components Toolbar.test.tsx 'renders a custom classname and data-attributes' - styling"
+    },
+    {
+      "reason": "react-aria-components Toolbar.test.tsx 'should support custom render function' - React render-prop API"
+    },
+    {
+      "reason": "react-aria-components Toolbar.test.tsx 'supports slots' - slot/context React API"
+    },
+    {
+      "reason": "react-aria-components Toolbar.test.tsx 'support render props' - React render-prop API"
+    },
+    {
+      "reason": "@adobe/react-spectrum Toolbar.test.tsx 'renders action buttons for items with keys and children' - collection render count"
+    },
+    {
+      "reason": "@adobe/react-spectrum Toolbar.test.tsx 'sets aria-label' - duplicate of the aria-label scenario"
+    },
+    {
+      "reason": "FocusScope.test.js - contains no toolbar-like arrow navigation (no ArrowLeft/Right/Up/Down assertions)"
+    },
+    {
+      "reason": "react-aria useToolbar/ActionGroup SSR + storybook snapshot tests - rendering only"
+    }
+  ],
+  "scenarios": [
+    {
+      "id": "toolbar.react-aria.role-toolbar",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/actiongroup/useActionGroup.test.ts#L26",
+      "upstreamTest": "useActionGroup > handles defaults",
+      "apg": "aria",
+      "config": { "selectionMode": "none", "items": 3 },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "toolbar": { "role": "toolbar", "aria-orientation": "horizontal" }
+            }
+          }
+        }
+      ],
+      "notes": "Horizontal toolbar is the default orientation."
+    },
+    {
+      "id": "toolbar.react-aria.vertical-orientation",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/actiongroup/useActionGroup.test.ts#L31",
+      "upstreamTest": "useActionGroup > handles vertical orientation",
+      "apg": "aria",
+      "config": { "orientation": "vertical", "items": 3 },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "toolbar": { "aria-orientation": "vertical" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.selection-single-radiogroup",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/actiongroup/useActionGroup.test.ts#L42",
+      "upstreamTest": "useActionGroup > handles selection mode single",
+      "apg": "extension",
+      "config": { "selectionMode": "single", "items": 3 },
+      "steps": [
+        { "expect": { "attrs": { "toolbar": { "role": "radiogroup" } } } }
+      ],
+      "notes": "APG has no toolbar selection mode; single-select toolbar becomes a radiogroup."
+    },
+    {
+      "id": "toolbar.react-aria.disabled-aria",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/actiongroup/useActionGroup.test.ts#L53",
+      "upstreamTest": "useActionGroup > handles isDisabled",
+      "apg": "extension",
+      "config": { "disabled": true, "items": 3 },
+      "steps": [
+        { "expect": { "attrs": { "toolbar": { "aria-disabled": "true" } } } }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.aria-label-passthrough",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L173",
+      "upstreamTest": "Toolbar > sets aria-label",
+      "apg": "aria",
+      "config": { "items": 1, "ariaLabel": "Toolbar aria-label" },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "toolbar": {
+                "aria-label": "Toolbar aria-label",
+                "aria-labelledby": null
+              }
+            }
+          }
+        }
+      ],
+      "notes": "aria-label wins; aria-labelledby is not emitted."
+    },
+    {
+      "id": "toolbar.react-aria.separators-counted",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L136",
+      "upstreamTest": "Toolbar > renders dividers",
+      "apg": "aria",
+      "config": {
+        "items": ["button", "separator", "button", "separator", "button"]
+      },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "item:1": { "role": "separator" },
+              "item:3": { "role": "separator" }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.separator-orientation",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/%40adobe/react-spectrum/test/actiongroup/Toolbar.test.tsx#L55",
+      "upstreamTest": "Toolbar > renders dividers (Spectrum)",
+      "apg": "aria",
+      "config": {
+        "orientation": "horizontal",
+        "items": ["button", "separator", "button"]
+      },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "item:1": { "aria-orientation": "vertical" } }
+          }
+        },
+        {
+          "event": "prop",
+          "target": "toolbar",
+          "set": { "orientation": "vertical" }
+        },
+        { "expect": { "attrs": { "item:1": { "aria-orientation": null } } } }
+      ],
+      "notes": "A horizontal toolbar's dividers are vertical; a vertical toolbar omits separator aria-orientation."
+    },
+    {
+      "id": "toolbar.react-aria.arrow-horizontal",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L195",
+      "upstreamTest": "Toolbar > supports keyboard navigation",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "items": [
+          "button",
+          "button",
+          "button",
+          "separator",
+          "button",
+          "button"
+        ],
+        "groups": [
+          [0, 1, 2],
+          [4, 5]
+        ]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:1" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:1" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:2" },
+        { "expect": { "focus": "item:4" } },
+        { "event": "key", "key": "ArrowLeft", "target": "item:4" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "Tab", "target": "item:2" },
+        { "expect": { "focus": null } },
+        { "event": "key", "key": "Tab", "modifiers": ["Shift"] },
+        { "expect": { "focus": "item:2" } },
+        { "event": "blur", "target": "item:0" },
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowLeft", "target": "item:0" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "click", "target": "item:5" },
+        { "expect": { "focus": "item:5" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:5" },
+        { "expect": { "focus": "item:5" } },
+        { "event": "key", "key": "Enter", "target": "item:5" },
+        { "expect": { "focus": "item:5" } }
+      ],
+      "notes": "Orthogonal arrow does nothing; arrows cross group separators; Shift+Tab re-entry remembers the last focused item; arrows do not wrap."
+    },
+    {
+      "id": "toolbar.react-aria.arrow-vertical",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L304",
+      "upstreamTest": "Toolbar > supports keyboard navigation with orientation vertical",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "vertical",
+        "items": [
+          "button",
+          "button",
+          "button",
+          "separator",
+          "button",
+          "button"
+        ],
+        "groups": [
+          [0, 1, 2],
+          [4, 5]
+        ]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:1" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:1" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:2" },
+        { "expect": { "focus": "item:4" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:4" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:2" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:1" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:0" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "click", "target": "item:5" },
+        { "expect": { "focus": "item:5" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:5" },
+        { "expect": { "focus": "item:5" } }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.arrow-rtl-horizontal",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L413",
+      "upstreamTest": "Toolbar > supports RTL",
+      "apg": "keyboard",
+      "config": {
+        "direction": "rtl",
+        "orientation": "horizontal",
+        "items": ["button", "button", "button", "separator", "button", "button"]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowLeft", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:1" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowLeft", "target": "item:1" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:2" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:1" },
+        { "expect": { "focus": "item:1" } }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.arrow-rtl-vertical",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L461",
+      "upstreamTest": "Toolbar > supports RTL with orientation vertical",
+      "apg": "keyboard",
+      "config": {
+        "direction": "rtl",
+        "orientation": "vertical",
+        "items": ["button", "button", "button", "separator", "button", "button"]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:1" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowLeft", "target": "item:0" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:0" },
+        { "expect": { "focus": "item:0" } }
+      ],
+      "notes": "RTL only flips the horizontal axis; vertical arrows are unchanged."
+    },
+    {
+      "id": "toolbar.react-aria.child-controlled-orthogonal-wrap",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/%40adobe/react-spectrum/test/actiongroup/Toolbar.test.tsx#L185",
+      "upstreamTest": "Toolbar > supports keyboard navigation (Spectrum ActionGroup)",
+      "apg": "extension",
+      "config": {
+        "orientation": "horizontal",
+        "items": [
+          "button",
+          "button",
+          "button",
+          "separator",
+          "button",
+          "button"
+        ],
+        "groups": [
+          [0, 1, 2],
+          [4, 5]
+        ]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:1" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowDown", "target": "item:2" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowUp", "target": "item:0" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:2" },
+        { "expect": { "focus": "item:4" } }
+      ],
+      "notes": "Spectrum's ActionGroup child handles the orthogonal axis and wraps within its own group, unlike react-aria-components Toolbar where the orthogonal key is a no-op. Divergence recorded, not APG."
+    },
+    {
+      "id": "toolbar.react-aria.actions-and-selection",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/%40adobe/react-spectrum/test/actiongroup/Toolbar.test.tsx#L140",
+      "upstreamTest": "Toolbar > support actions and selection",
+      "apg": "extension",
+      "config": {
+        "orientation": "horizontal",
+        "items": ["button", "button", "separator", "radio", "radio"],
+        "selectionMode": "single"
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "Enter", "target": "item:0" },
+        { "expect": { "events": { "onAction": ["item:0"] } } },
+        { "event": "key", "key": "ArrowRight", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:1" },
+        { "expect": { "focus": "item:3" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:3" },
+        { "expect": { "focus": "item:4" } },
+        { "event": "key", "key": "Enter", "target": "item:4" },
+        { "expect": { "events": { "onSelectionChange": ["item:4"] } } }
+      ]
+    },
+    {
+      "id": "toolbar.react-aria.heterogeneous-children-navigation",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Toolbar.test.tsx#L506",
+      "upstreamTest": "Toolbar > supports all the aria example children",
+      "apg": "keyboard",
+      "config": {
+        "orientation": "horizontal",
+        "items": ["button", "button", "button", "checkbox", "link"]
+      },
+      "steps": [
+        { "event": "key", "key": "Tab", "target": "toolbar" },
+        { "expect": { "focus": "item:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:0" },
+        { "expect": { "focus": "item:1" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:1" },
+        { "expect": { "focus": "item:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:2" },
+        { "expect": { "focus": "item:3" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:3" },
+        { "expect": { "focus": "item:4" } },
+        { "event": "key", "key": "ArrowRight", "target": "item:4" },
+        { "expect": { "focus": "item:4" } }
+      ],
+      "notes": "Roving focus spans buttons, a checkbox and a link; the end of the toolbar does not wrap."
+    }
+  ]
+}