@cssints/apg-specs 0.0.0-stage → 0.5.1

package/scenarios/apg/button.base-ui.json

@@ -0,0 +1,747 @@
+{
+  "pattern": "button",
+  "source": "base-ui",
+  "commit": "19511bb171f3b360b006c94cf6d07e53cb446505",
+  "license": "MIT",
+  "skipped": [
+    {
+      "reason": "describeConformance blocks (ref instance, render-prop conformance, component prop)"
+    },
+    {
+      "reason": "form submission, native HTML validation and external-form tests"
+    },
+    {
+      "reason": "React render-prop plumbing assertions (composite props, tabIndex through render)"
+    },
+    { "reason": "SSR/hydration and id-generation tests" },
+    {
+      "reason": "test.skipIf(isJSDOM) browser-only hover tests are ported as pointer steps where they assert behaviour"
+    },
+    { "reason": "console-warning tests" },
+    {
+      "reason": "data-* style hooks (data-pressed, data-multiple, data-disabled) unless the upstream assertion is about state"
+    },
+    { "reason": "styling/class assertions" }
+  ],
+  "scenarios": [
+    {
+      "id": "button.base-ui.custom-link-space-activates-without-scroll",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L17",
+      "upstreamTest": "prop: nativeButton > custom link element: Space activates the link without scrolling the page",
+      "apg": "keyboard",
+      "config": { "nativeButton": false, "render": "a", "href": "#target" },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        { "event": "key", "key": " ", "target": "button" },
+        { "expect": { "events": { "onClick": [1] } } },
+        { "event": "key", "key": " ", "target": "button", "phase": "up" }
+      ],
+      "notes": "Space keydown must call preventDefault (no page scroll); only the click callback is asserted here."
+    },
+    {
+      "id": "button.base-ui.custom-element-keyboard-activation",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L42",
+      "upstreamTest": "prop: nativeButton > custom element: applies button semantics and dispatches real clicks from keyboard activation",
+      "apg": "keyboard",
+      "config": { "nativeButton": false, "render": "span" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": { "button": { "role": "button", "tabindex": "0" } }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        { "event": "key", "key": "Enter", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        { "expect": { "events": { "onClick": [2], "onClickCapture": [2] } } }
+      ],
+      "notes": "Both Enter and Space dispatch a real click that bubbles to render/capture and ancestor handlers."
+    },
+    {
+      "id": "button.base-ui.custom-element-keyboard-click-modifiers",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L78",
+      "upstreamTest": "prop: nativeButton > custom element: keyboard activation clicks carry modifier key state",
+      "apg": "keyboard",
+      "config": { "nativeButton": false, "render": "span" },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        {
+          "event": "key",
+          "key": "Enter",
+          "target": "button",
+          "modifiers": ["Shift"]
+        },
+        { "expect": { "events": { "onClick": [{ "shiftKey": true }] } } }
+      ],
+      "notes": "Synthetic click from keyboard retains the modifier keys held during activation."
+    },
+    {
+      "id": "button.base-ui.native-disabled-attribute-and-no-events",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L100",
+      "upstreamTest": "prop: disabled > native button: uses the disabled attribute and is not focusable",
+      "apg": "states",
+      "config": { "disabled": true, "nativeButton": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": { "button": { "disabled": "", "aria-disabled": null } }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": null } },
+        { "event": "click", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        {
+          "expect": {
+            "events": {
+              "onClick": [0],
+              "onMouseDown": [0],
+              "onPointerDown": [0],
+              "onKeyDown": [0]
+            }
+          }
+        }
+      ],
+      "notes": "Native disabled button is removed from tab order and swallows click/mouse/pointer/key handlers."
+    },
+    {
+      "id": "button.base-ui.custom-disabled-aria-tabindex-no-events",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L135",
+      "upstreamTest": "prop: disabled > custom element: applies aria-disabled and is not focusable",
+      "apg": "states",
+      "config": { "disabled": true, "nativeButton": false, "render": "span" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button": {
+                "disabled": null,
+                "aria-disabled": "true",
+                "tabindex": "-1"
+              }
+            }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": null } },
+        { "event": "click", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        { "expect": { "events": { "onClick": [0], "onKeyDown": [0] } } }
+      ],
+      "notes": "Custom disabled element uses aria-disabled=true and tabindex=-1."
+    },
+    {
+      "id": "button.base-ui.focusable-when-disabled-native",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L175",
+      "upstreamTest": "prop: focusableWhenDisabled > native button: prevents interactions but remains focusable",
+      "apg": "extension",
+      "config": {
+        "disabled": true,
+        "focusableWhenDisabled": true,
+        "nativeButton": true
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button": {
+                "disabled": null,
+                "aria-disabled": "true",
+                "tabindex": "0"
+              }
+            }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        { "event": "click", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        { "expect": { "events": { "onClick": [0], "onKeyDown": [0] } } }
+      ],
+      "notes": "Disabled-but-focusable stays in the tab order but activation is suppressed."
+    },
+    {
+      "id": "button.base-ui.focusable-when-disabled-allows-hover-blocks-activation",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L212",
+      "upstreamTest": "prop: focusableWhenDisabled > native button: allows hover handlers while blocking activation",
+      "apg": "extension",
+      "config": {
+        "disabled": true,
+        "focusableWhenDisabled": true,
+        "nativeButton": true
+      },
+      "steps": [
+        { "event": "hover", "target": "button" },
+        { "expect": { "events": { "onMouseMove": [1] } } },
+        { "event": "click", "target": "button" },
+        { "expect": { "events": { "onClick": [0] } } }
+      ],
+      "notes": "Hover still fires on a disabled-but-focusable button; click is still blocked."
+    },
+    {
+      "id": "button.base-ui.keeps-focus-after-becoming-disabled",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L243",
+      "upstreamTest": "prop: focusableWhenDisabled > keeps focus and suppresses interactions after becoming disabled",
+      "apg": "extension",
+      "config": { "focusableWhenDisabled": true },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        { "event": "click", "target": "button" },
+        { "expect": { "focus": "button", "events": { "onClick": [1] } } },
+        { "event": "click", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        {
+          "expect": {
+            "focus": "button",
+            "attrs": { "button": { "aria-disabled": "true" } },
+            "events": { "onClick": [1] }
+          }
+        }
+      ],
+      "notes": "The first click sets disabled state; focus is retained but further activation is suppressed."
+    },
+    {
+      "id": "button.base-ui.focusable-when-disabled-custom",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/button/Button.test.tsx#L284",
+      "upstreamTest": "prop: focusableWhenDisabled > custom element: prevents interactions but remains focusable",
+      "apg": "extension",
+      "config": {
+        "disabled": true,
+        "focusableWhenDisabled": true,
+        "nativeButton": false,
+        "render": "span"
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button": {
+                "disabled": null,
+                "aria-disabled": "true",
+                "tabindex": "0"
+              }
+            }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button" } },
+        { "event": "click", "target": "button" },
+        { "event": "key", "key": " ", "target": "button" },
+        { "event": "key", "key": "Enter", "target": "button" },
+        { "expect": { "events": { "onClick": [0], "onKeyDown": [0] } } }
+      ],
+      "notes": "Same disabled-but-focusable contract on a non-native element."
+    },
+    {
+      "id": "button.base-ui.toggle-controlled-pressed",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L19",
+      "upstreamTest": "<Toggle /> > pressed state > controlled",
+      "apg": "aria",
+      "config": { "part": "button", "pressed": false },
+      "steps": [
+        { "event": "prop", "set": { "pressed": false } },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } },
+        { "event": "prop", "set": { "pressed": true } },
+        { "expect": { "attrs": { "button": { "aria-pressed": "true" } } } },
+        { "event": "prop", "set": { "pressed": false } },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } }
+      ],
+      "notes": "aria-pressed mirrors the controlled pressed prop, not internal clicks."
+    },
+    {
+      "id": "button.base-ui.toggle-uncontrolled-click",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L48",
+      "upstreamTest": "<Toggle /> > pressed state > uncontrolled",
+      "apg": "aria",
+      "config": { "part": "button", "defaultPressed": false },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } },
+        { "event": "click", "target": "button" },
+        { "expect": { "attrs": { "button": { "aria-pressed": "true" } } } },
+        { "event": "click", "target": "button" },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } }
+      ],
+      "notes": "Click toggles aria-pressed for an uncontrolled toggle."
+    },
+    {
+      "id": "button.base-ui.toggle-onpressedchange",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L69",
+      "upstreamTest": "prop: onPressedChange > is called when the pressed state changes",
+      "apg": "extension",
+      "config": { "part": "button", "defaultPressed": false },
+      "steps": [
+        { "event": "click", "target": "button" },
+        {
+          "expect": { "events": { "onPressedChange": [true], "onClick": [1] } }
+        }
+      ],
+      "notes": "Callback receives the next pressed value."
+    },
+    {
+      "id": "button.base-ui.toggle-cancel-prevents-press",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L84",
+      "upstreamTest": "prop: onPressedChange > does not change the pressed state when the event is canceled",
+      "apg": "extension",
+      "config": {
+        "part": "button",
+        "defaultPressed": false,
+        "cancelOnPressedChange": true
+      },
+      "steps": [
+        { "event": "click", "target": "button" },
+        { "expect": { "attrs": { "button": { "aria-pressed": "false" } } } }
+      ],
+      "notes": "eventDetails.cancel() vetoes the state transition."
+    },
+    {
+      "id": "button.base-ui.toggle-group-cancel-prevents-group-change",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L103",
+      "upstreamTest": "prop: onPressedChange > canceling in a grouped Toggle prevents the group value from changing",
+      "apg": "extension",
+      "config": { "group": true, "cancelOnPressedChange": "first" },
+      "steps": [
+        { "event": "click", "target": "button:0" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "false" }
+            },
+            "events": { "onValueChange": [0] }
+          }
+        }
+      ],
+      "notes": "A canceled toggle never fires the group's onValueChange."
+    },
+    {
+      "id": "button.base-ui.toggle-disabled",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle/Toggle.test.tsx#L130",
+      "upstreamTest": "prop: disabled > disables the component",
+      "apg": "states",
+      "config": { "part": "button", "disabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button": {
+                "disabled": "",
+                "data-disabled": "",
+                "aria-pressed": "false"
+              }
+            }
+          }
+        },
+        { "event": "click", "target": "button" },
+        {
+          "expect": {
+            "attrs": { "button": { "aria-pressed": "false" } },
+            "events": { "onPressedChange": [0] }
+          }
+        }
+      ],
+      "notes": "Disabled toggle uses the disabled attribute and ignores clicks."
+    },
+    {
+      "id": "button.base-ui.toggle-group-renders-group",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L19",
+      "upstreamTest": "<ToggleGroup /> > renders a `group`",
+      "apg": "aria",
+      "config": { "aria-label": "My Toggle Group" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "group", "aria-label": "My Toggle Group" }
+            }
+          }
+        }
+      ],
+      "notes": "Group exposes role=group with its accessible name."
+    },
+    {
+      "id": "button.base-ui.toggle-group-uncontrolled-single-press",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L26",
+      "upstreamTest": "uncontrolled > pressed state",
+      "apg": "states",
+      "config": { "group": true, "multiple": false },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:0" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Single-select group keeps at most one item pressed."
+    },
+    {
+      "id": "button.base-ui.toggle-group-default-value",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L56",
+      "upstreamTest": "uncontrolled > prop: defaultValue",
+      "apg": "states",
+      "config": { "group": true, "defaultValue": ["two"] },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "true" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:0" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        }
+      ],
+      "notes": "defaultValue seeds the uncontrolled selection."
+    },
+    {
+      "id": "button.base-ui.toggle-group-controlled-value",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L118",
+      "upstreamTest": "controlled > pressed state",
+      "apg": "states",
+      "config": { "group": true, "value": ["two"] },
+      "steps": [
+        { "event": "prop", "set": { "value": ["two"] } },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "true" }
+            }
+          }
+        },
+        { "event": "prop", "set": { "value": ["one"] } },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        }
+      ],
+      "notes": "Controlled group follows the value prop."
+    },
+    {
+      "id": "button.base-ui.toggle-group-disabled-group",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L168",
+      "upstreamTest": "prop: disabled > can disable the whole group",
+      "apg": "states",
+      "config": { "group": true, "disabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-disabled": "true" },
+              "button:1": { "aria-disabled": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Group disabled propagates aria-disabled to every item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-disabled-individual",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L184",
+      "upstreamTest": "prop: disabled > can disable individual items",
+      "apg": "states",
+      "config": { "group": true, "disabledIndex": 1 },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-disabled": "false" },
+              "button:1": { "aria-disabled": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Per-item disabled only affects that item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-orientation",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L202",
+      "upstreamTest": "prop: orientation > vertical / does not render aria-orientation on role=group",
+      "apg": "extension",
+      "config": { "group": true, "orientation": "vertical" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": {
+                "data-orientation": "vertical",
+                "aria-orientation": null
+              }
+            }
+          }
+        }
+      ],
+      "notes": "Orientation is exposed via data-orientation; aria-orientation is not set on role=group."
+    },
+    {
+      "id": "button.base-ui.toggle-group-multiple-selection",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L245",
+      "upstreamTest": "prop: multiple > multiple items can be pressed when true",
+      "apg": "states",
+      "config": { "group": true, "multiple": true, "defaultValue": ["one"] },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "true" },
+              "button:1": { "aria-pressed": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Multiple mode allows more than one pressed item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-single-selection",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L264",
+      "upstreamTest": "prop: multiple > only one item can be pressed when false",
+      "apg": "states",
+      "config": { "group": true, "multiple": false, "defaultValue": ["one"] },
+      "steps": [
+        { "event": "click", "target": "button:1" },
+        {
+          "expect": {
+            "attrs": {
+              "button:0": { "aria-pressed": "false" },
+              "button:1": { "aria-pressed": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Single mode replaces the pressed item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-keyboard-horizontal-ltr",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L380",
+      "upstreamTest": "keyboard interactions > ltr > orientation: horizontal",
+      "apg": "keyboard",
+      "config": {
+        "group": true,
+        "direction": "ltr",
+        "orientation": "horizontal",
+        "items": 3
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "button:0",
+            "attrs": { "button:0": { "tabindex": "0" } }
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "button:0" },
+        {
+          "expect": {
+            "focus": "button:1",
+            "attrs": { "button:1": { "tabindex": "0" } }
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "button:1" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "button:2" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowLeft", "target": "button:0" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "ArrowDown", "target": "button:2" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "ArrowUp", "target": "button:2" },
+        { "expect": { "focus": "button:2" } }
+      ],
+      "notes": "Roving tabindex wraps around; the other axis is ignored. rtl/vertical matrix variants omitted for brevity."
+    },
+    {
+      "id": "button.base-ui.toggle-group-keyboard-vertical",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L380",
+      "upstreamTest": "keyboard interactions > ltr > orientation: vertical",
+      "apg": "keyboard",
+      "config": {
+        "group": true,
+        "direction": "ltr",
+        "orientation": "vertical",
+        "items": 3
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "button:0" },
+        { "expect": { "focus": "button:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "button:1" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "ArrowDown", "target": "button:2" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowUp", "target": "button:0" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "ArrowRight", "target": "button:2" },
+        { "expect": { "focus": "button:2" } }
+      ],
+      "notes": "Vertical orientation uses ArrowDown/ArrowUp; horizontal arrows are ignored."
+    },
+    {
+      "id": "button.base-ui.toggle-group-home-key",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L438",
+      "upstreamTest": "keyboard interactions > Home key moves focus to the first item",
+      "apg": "keyboard",
+      "config": { "group": true, "items": 3 },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "button:0" },
+        { "event": "key", "key": "ArrowRight", "target": "button:1" },
+        { "expect": { "focus": "button:2" } },
+        { "event": "key", "key": "Home", "target": "button:2" },
+        {
+          "expect": {
+            "focus": "button:0",
+            "attrs": { "button:0": { "tabindex": "0" } }
+          }
+        }
+      ],
+      "notes": "Home moves roving focus to the first item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-end-key",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L467",
+      "upstreamTest": "keyboard interactions > End key moves focus to the last item",
+      "apg": "keyboard",
+      "config": { "group": true, "items": 3 },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "button:0" } },
+        { "event": "key", "key": "End", "target": "button:0" },
+        {
+          "expect": {
+            "focus": "button:2",
+            "attrs": { "button:2": { "tabindex": "0" } }
+          }
+        }
+      ],
+      "notes": "End moves roving focus to the last item."
+    },
+    {
+      "id": "button.base-ui.toggle-group-enter-space-toggles",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L494",
+      "upstreamTest": "keyboard interactions > key: Enter/Space toggles the pressed state",
+      "apg": "keyboard",
+      "config": { "group": true, "key": "Space" },
+      "steps": [
+        { "event": "focus", "target": "button:0" },
+        { "expect": { "attrs": { "button:0": { "aria-pressed": "false" } } } },
+        { "event": "key", "key": " ", "target": "button:0" },
+        { "expect": { "attrs": { "button:0": { "aria-pressed": "true" } } } },
+        { "event": "key", "key": " ", "target": "button:0" },
+        { "expect": { "attrs": { "button:0": { "aria-pressed": "false" } } } }
+      ],
+      "notes": "Enter behaves the same (upstream runs the assertion for both keys)."
+    },
+    {
+      "id": "button.base-ui.toggle-group-on-value-change-click",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L522",
+      "upstreamTest": "prop: onValueChange > fires when an Item is clicked",
+      "apg": "extension",
+      "config": { "group": true },
+      "steps": [
+        { "event": "click", "target": "button:0" },
+        { "expect": { "events": { "onValueChange": [["one"]] } } },
+        { "event": "click", "target": "button:1" },
+        { "expect": { "events": { "onValueChange": [["two"]] } } }
+      ],
+      "notes": "Fires with the new value array after each click."
+    },
+    {
+      "id": "button.base-ui.toggle-group-cancel-value-change",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L547",
+      "upstreamTest": "prop: onValueChange > does not change the value when the event is canceled",
+      "apg": "extension",
+      "config": { "group": true, "cancelOnValueChange": true },
+      "steps": [
+        { "event": "click", "target": "button:0" },
+        {
+          "expect": {
+            "attrs": { "button:0": { "aria-pressed": "false" } },
+            "events": { "onValueChange": [["one"]] }
+          }
+        }
+      ],
+      "notes": "The callback still fires, but cancel() leaves the state untouched."
+    },
+    {
+      "id": "button.base-ui.toggle-group-on-value-change-keyboard",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/toggle-group/ToggleGroup.test.tsx#L568",
+      "upstreamTest": "prop: onValueChange > fires when the Enter/Space is pressed",
+      "apg": "keyboard",
+      "config": { "group": true, "key": "Space" },
+      "steps": [
+        { "event": "focus", "target": "button:0" },
+        { "event": "key", "key": " ", "target": "button:0" },
+        { "expect": { "events": { "onValueChange": [["one"]] } } },
+        { "event": "focus", "target": "button:1" },
+        { "event": "key", "key": " ", "target": "button:1" },
+        { "expect": { "events": { "onValueChange": [["two"]] } } }
+      ],
+      "notes": "Enter is covered by the same upstream forEach."
+    }
+  ]
+}