@cssints/apg-specs 0.0.0-stage → 0.5.2

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

@@ -0,0 +1,443 @@
+{
+  "pattern": "button",
+  "source": "react-aria",
+  "commit": "99e610236887da619ad9d54a1cd87983166c043d",
+  "license": "Apache-2.0",
+  "skipped": [
+    {
+      "reason": "class-name / data-* style-hook rendering (default class, custom class, className functions)"
+    },
+    {
+      "reason": "custom render-function plumbing and wrong-element/ref warnings"
+    },
+    { "reason": "React refs, context slots and DOM prop passthrough" },
+    {
+      "reason": "form attributes, form submission, validation and isPending form-side effects"
+    },
+    {
+      "reason": "isPending spinner timing and live-region detail beyond activation suppression"
+    },
+    {
+      "reason": "S1 (react-spectrum) theme/provider wrappers and isEmphasized styling"
+    },
+    {
+      "reason": "useButton hook unit tests (React-API-only, no rendered behaviour)"
+    },
+    {
+      "reason": "ActionButton/ActionGroup and button-group patterns that are not toggle semantics"
+    }
+  ],
+  "scenarios": [
+    {
+      "id": "button.react-aria.hover-state-and-callbacks",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Button.test.js#L132",
+      "upstreamTest": "Button > should support hover",
+      "apg": "extension",
+      "config": { "part": "button" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "data-hovered": null } } } },
+        { "event": "hover", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "data-hovered": "true" } },
+            "events": { "onHoverStart": [1], "onHoverChange": [1] }
+          }
+        },
+        { "event": "unhover", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "data-hovered": null } },
+            "events": { "onHoverEnd": [1], "onHoverChange": [2] }
+          }
+        }
+      ],
+      "notes": "Hover is not an APG button behaviour; exported because the upstream asserts it."
+    },
+    {
+      "id": "button.react-aria.focus-visible-on-tab",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Button.test.js#L163",
+      "upstreamTest": "Button > should support focus ring",
+      "apg": "extension",
+      "config": { "part": "button" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "data-focus-visible": null } } } },
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "button",
+            "attrs": { "button": { "data-focus-visible": "true" } }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "attrs": { "button": { "data-focus-visible": null } } } }
+      ],
+      "notes": "Keyboard focus sets data-focus-visible; tabbing away clears it."
+    },
+    {
+      "id": "button.react-aria.press-state-and-callbacks",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Button.test.js#L182",
+      "upstreamTest": "Button > should support press state",
+      "apg": "extension",
+      "config": { "part": "button" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "data-pressed": null } } } },
+        { "event": "pointerdown", "target": "button" },
+        { "expect": { "attrs": { "button": { "data-pressed": "true" } } } },
+        { "event": "pointerup", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "data-pressed": null } },
+            "events": { "onPress": [1], "onClick": [1], "onClickCapture": [1] }
+          }
+        }
+      ],
+      "notes": "data-pressed is transient press feedback, distinct from aria-pressed."
+    },
+    {
+      "id": "button.react-aria.disabled-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Button.test.js#L213",
+      "upstreamTest": "Button > should support disabled state",
+      "apg": "states",
+      "config": { "part": "button", "isDisabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "disabled": "" } } } },
+        { "event": "click", "target": "button" },
+        { "expect": { "events": { "onPress": [0] } } }
+      ],
+      "notes": "Disabled button is natively disabled and not pressable."
+    },
+    {
+      "id": "button.react-aria.pending-suppresses-press",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Button.test.js#L239",
+      "upstreamTest": "Button > displays a spinner when isPending prop is true",
+      "apg": "extension",
+      "config": { "part": "button", "isPending": false },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "aria-disabled": null } } } },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-disabled": "true" } },
+            "events": { "onPress": [1] }
+          }
+        },
+        { "event": "click", "target": "button" },
+        { "expect": { "events": { "onPress": [1] } } }
+      ],
+      "notes": "Clicking sets pending; while pending the button is aria-disabled and further clicks do not press."
+    },
+    {
+      "id": "button.react-aria.toggle-button-selected-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButton.test.js#L155",
+      "upstreamTest": "ToggleButton > should support selected state",
+      "apg": "aria",
+      "config": { "part": "button", "isSelected": false },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-pressed": "true" } },
+            "events": { "onChange": [true] }
+          }
+        },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-pressed": "false" } },
+            "events": { "onChange": [false] }
+          }
+        }
+      ],
+      "notes": "Toggle button exposes its state through aria-pressed and onChange."
+    },
+    {
+      "id": "button.react-aria.toggle-button-press-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButton.test.js#L112",
+      "upstreamTest": "ToggleButton > should support press state",
+      "apg": "extension",
+      "config": { "part": "button", "toggle": true },
+      "steps": [
+        { "event": "pointerdown", "target": "button" },
+        { "expect": { "attrs": { "button": { "data-pressed": "true" } } } },
+        { "event": "pointerup", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "data-pressed": null } },
+            "events": { "onPress": [1], "onClick": [1], "onClickCapture": [1] }
+          }
+        }
+      ],
+      "notes": "Transient press feedback around a toggle click."
+    },
+    {
+      "id": "button.react-aria.toggle-button-disabled",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButton.test.js#L143",
+      "upstreamTest": "ToggleButton > should support disabled state",
+      "apg": "states",
+      "config": { "part": "button", "isDisabled": true, "toggle": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "disabled": "" } } } }
+      ],
+      "notes": "Disabled toggle button uses the native disabled attribute."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-uncontrolled-single",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L87",
+      "upstreamTest": "ToggleButtonGroup > should support uncontrolled single selection",
+      "apg": "extension",
+      "config": {
+        "groupRole": "radiogroup",
+        "selectionMode": "single",
+        "items": 2
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "radiogroup" },
+              "button:0": { "aria-checked": "false" },
+              "button:1": { "aria-checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-checked": "false" },
+              "button:1": { "aria-checked": "true" }
+            },
+            "events": { "onSelectionChange": [["bar"]] }
+          }
+        }
+      ],
+      "notes": "Single-selection group renders radios, not aria-pressed buttons."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-controlled-single",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L114",
+      "upstreamTest": "ToggleButtonGroup > should support controlled single selection",
+      "apg": "extension",
+      "config": {
+        "groupRole": "radiogroup",
+        "selectionMode": "single",
+        "selectedKeys": [],
+        "items": 2
+      },
+      "steps": [
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": { "button:1": { "aria-checked": "false" } },
+            "events": { "onSelectionChange": [["bar"]] }
+          }
+        }
+      ],
+      "notes": "Controlled selectedKeys stays empty, so clicking fires the callback without moving aria-checked."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-uncontrolled-multiple",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L137",
+      "upstreamTest": "ToggleButtonGroup > should support uncontrolled multiple selection",
+      "apg": "extension",
+      "config": {
+        "groupRole": "toolbar",
+        "selectionMode": "multiple",
+        "items": 2
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "toolbar" },
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": { "button:1": { "aria-pressed": "true" } },
+            "events": { "onSelectionChange": [["bar"]] }
+          }
+        },
+        { "event": "click", "target": "button:0" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "true" }
+            },
+            "events": { "onSelectionChange": [["bar", "foo"]] }
+          }
+        }
+      ],
+      "notes": "Multiple mode renders a toolbar of aria-pressed toggle buttons."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-controlled-multiple",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L159",
+      "upstreamTest": "ToggleButtonGroup > should support controlled multiple selection",
+      "apg": "extension",
+      "config": {
+        "groupRole": "toolbar",
+        "selectionMode": "multiple",
+        "selectedKeys": ["foo"],
+        "items": 2
+      },
+      "steps": [
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "false" }
+            },
+            "events": { "onSelectionChange": [["foo", "bar"]] }
+          }
+        }
+      ],
+      "notes": "Controlled selection ignores the click for state, but the callback reports the merged set."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-horizontal-keyboard",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L177",
+      "upstreamTest": "ToggleButtonGroup > should support horizontal keyboard navigation",
+      "apg": "keyboard",
+      "config": {
+        "groupRole": "radiogroup",
+        "orientation": "horizontal",
+        "items": 2
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": { "group": { "aria-orientation": "horizontal" } }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "button:0" },
+        { "expect": { "focus": "button:1" } },
+        { "event": "key", "key": "ArrowLeft", "target": "button:1" },
+        { "expect": { "focus": "button:0" } }
+      ],
+      "notes": "Horizontal single-select group uses Left/Right arrows."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-vertical-keyboard",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L191",
+      "upstreamTest": "ToggleButtonGroup > should support vertical keyboard navigation",
+      "apg": "keyboard",
+      "config": {
+        "groupRole": "radiogroup",
+        "orientation": "vertical",
+        "items": 2
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": { "attrs": { "group": { "aria-orientation": "vertical" } } }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "button:0" },
+        { "expect": { "focus": "button:1" } },
+        { "event": "key", "key": "ArrowUp", "target": "button:1" },
+        { "expect": { "focus": "button:0" } }
+      ],
+      "notes": "Vertical single-select group uses Up/Down arrows."
+    },
+    {
+      "id": "button.react-aria.toggle-button-group-aria-label",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/ToggleButtonGroup.test.js#L205",
+      "upstreamTest": "ToggleButtonGroup > supports aria labeling",
+      "apg": "aria",
+      "config": { "aria-label": "Test" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "group": { "aria-label": "Test" } } } }
+      ],
+      "notes": "Label applies to both radiogroup and toolbar variants."
+    },
+    {
+      "id": "button.react-aria.s1-toggle-button-onpress-and-onchange",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/button/ToggleButton.test.js#L19",
+      "upstreamTest": "ToggleButton > handles defaults",
+      "apg": "aria",
+      "config": { "part": "button", "isSelected": false },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-pressed": "true" } },
+            "events": { "onPress": [1], "onChange": [true] }
+          }
+        }
+      ],
+      "notes": "S1 ToggleButton: onPress fires alongside onChange."
+    },
+    {
+      "id": "button.react-aria.s1-toggle-button-controlled-selected",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/button/ToggleButton.test.js#L57",
+      "upstreamTest": "ToggleButton > supports isSelected",
+      "apg": "aria",
+      "config": { "part": "button", "isSelected": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "aria-pressed": "true" } } } },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-pressed": "true" } },
+            "events": { "onChange": [false] }
+          }
+        }
+      ],
+      "notes": "Controlled isSelected keeps aria-pressed true while still firing onChange."
+    },
+    {
+      "id": "button.react-aria.s1-button-keyboard-activates-non-submit",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/button/Button.test.js#L255",
+      "upstreamTest": "Button > prevents default for non-submit types",
+      "apg": "keyboard",
+      "config": { "part": "button", "type": "button" },
+      "steps": [
+        { "event": "focus", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        {
+          "expect": {
+            "events": {
+              "onKeyDown": [{ "defaultPrevented": true }],
+              "onKeyUp": [{ "defaultPrevented": true }]
+            }
+          }
+        },
+        { "event": "key", "key": " ", "target": "button" },
+        {
+          "expect": {
+            "events": {
+              "onKeyDown": [{ "defaultPrevented": true }],
+              "onKeyUp": [{ "defaultPrevented": true }]
+            }
+          }
+        }
+      ],
+      "notes": "Non-submit buttons prevent the default Enter/Space actions so no implicit form submission occurs."
+    }
+  ]
+}