@cssints/apg-specs 0.0.0-stage → 0.5.1

package/scenarios/apg/radio.ariakit.json

@@ -0,0 +1,459 @@
+{
+  "pattern": "radio",
+  "source": "ariakit",
+  "commit": "404c72257b879569feb08465da4ff9915fd873da",
+  "license": "MIT",
+  "scenarios": [
+    {
+      "id": "radio.ariakit.tab-focuses-first-radio",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/form-radio/test.ts#L6",
+      "upstreamTest": "focus on the first radio button by tabbing",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["red", "green", "blue"],
+        "checked": null,
+        "flavor": "roving"
+      },
+      "steps": [
+        { "expect": { "focus": null } },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "radio:0", "checked": null } }
+      ],
+      "notes": "Entering the group never checks a radio; Tab lands on the first radio when none is checked."
+    },
+    {
+      "id": "radio.ariakit.space-checks-focused-radio",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L22",
+      "upstreamTest": "focuses and selects the first radio with Tab and Space",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "radio:0", "checked": null } },
+        { "event": "key", "key": "Space", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:0",
+            "checked": "radio:0",
+            "attrs": {
+              "radio:0": { "checked": "true", "aria-checked": "true" }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "radio.ariakit.arrow-right-moves-and-checks",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L33",
+      "upstreamTest": "moves forward with ArrowRight",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "event": "key", "key": "ArrowRight", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange"
+          }
+        },
+        { "event": "key", "key": "ArrowRight", "target": "radio:1" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "value": "watermelon",
+            "attrs": { "radio:1": { "aria-checked": "false" } }
+          }
+        }
+      ],
+      "notes": "ArrowRight moves focus and checks the next radio."
+    },
+    {
+      "id": "radio.ariakit.arrow-down-moves-and-checks",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L33",
+      "upstreamTest": "moves forward with ArrowDown",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "event": "key", "key": "ArrowDown", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange"
+          }
+        },
+        { "event": "key", "key": "ArrowDown", "target": "radio:1" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "value": "watermelon",
+            "attrs": { "radio:1": { "aria-checked": "false" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "radio.ariakit.arrow-left-wraps-to-last",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L46",
+      "upstreamTest": "moves backward and wraps with ArrowLeft",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "event": "key", "key": "ArrowLeft", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "value": "watermelon"
+          }
+        },
+        { "event": "key", "key": "ArrowLeft", "target": "radio:2" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange",
+            "attrs": { "radio:2": { "aria-checked": "false" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "radio.ariakit.arrow-up-wraps-to-last",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L46",
+      "upstreamTest": "moves backward and wraps with ArrowUp",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "event": "key", "key": "ArrowUp", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "value": "watermelon"
+          }
+        },
+        { "event": "key", "key": "ArrowUp", "target": "radio:2" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange",
+            "attrs": { "radio:2": { "aria-checked": "false" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "radio.ariakit.checked-radio-is-tab-stop",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L58",
+      "upstreamTest": "uses the checked default radio as the group tab stop",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": "radio:1",
+        "flavor": "roving"
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange"
+          }
+        },
+        { "event": "key", "key": "ArrowDown", "target": "radio:1" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "value": "watermelon"
+          }
+        },
+        { "event": "key", "key": "ArrowDown", "target": "radio:2" },
+        {
+          "expect": {
+            "focus": "radio:0",
+            "checked": "radio:0",
+            "value": "apple"
+          }
+        }
+      ],
+      "notes": "The upstream page renders several groups, so it needs two Tab presses; a single-group replay needs one. Wrapping after the last radio lands on the first."
+    },
+    {
+      "id": "radio.ariakit.click-selects-radio",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L4",
+      "upstreamTest": "selects basic radios by click",
+      "apg": "pointer",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "radio:0": { "aria-checked": "false" },
+              "radio:1": { "aria-checked": "false" },
+              "radio:2": { "aria-checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "radio:0" },
+        {
+          "expect": {
+            "checked": "radio:0",
+            "value": "apple",
+            "attrs": {
+              "radio:1": { "aria-checked": "false" },
+              "radio:2": { "aria-checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "radio:2" },
+        {
+          "expect": {
+            "checked": "radio:2",
+            "value": "watermelon",
+            "attrs": { "radio:0": { "aria-checked": "false" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "radio.ariakit.arrow-selection-commits-change",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-6345/test.ts#L5",
+      "upstreamTest": "onChange commits the value on arrow-key selection",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null
+      },
+      "steps": [
+        { "event": "click", "target": "radio:0" },
+        {
+          "expect": {
+            "checked": "radio:0",
+            "value": "apple",
+            "events": { "onChange": ["apple"] }
+          }
+        },
+        { "event": "key", "key": "ArrowDown", "target": "radio:0" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "value": "orange",
+            "events": { "onChange": ["apple", "orange"] }
+          }
+        },
+        { "event": "key", "key": "ArrowUp", "target": "radio:1" },
+        {
+          "expect": {
+            "focus": "radio:0",
+            "checked": "radio:0",
+            "value": "apple",
+            "events": { "onChange": ["apple", "orange", "apple"] }
+          }
+        }
+      ],
+      "notes": "Regression: arrow-key selection must dispatch a change event with target.checked already true."
+    },
+    {
+      "id": "radio.ariakit.disabled-group-disables-radios",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-group-3851/test.ts#L5",
+      "upstreamTest": "disabled prop disables the group and radios",
+      "apg": "extension",
+      "config": {
+        "items": 4,
+        "values": ["apple", "orange", "watermelon", "banana"],
+        "groupDisabled": true,
+        "radioEnabledOverride": "radio:1",
+        "customRadio": "radio:3"
+      },
+      "steps": [
+        {
+          "expect": {
+            "attrs": {
+              "radiogroup": { "aria-disabled": "true" },
+              "radio:0": { "disabled": "true" },
+              "radio:1": { "disabled": "true" },
+              "radio:2": { "disabled": "true" },
+              "radio:3": { "aria-disabled": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "A disabled group disables every radio: native inputs get the HTML disabled attribute except the custom-rendered radio, which gets aria-disabled. Radio:1 passes disabled={false} but inherits the group state."
+    },
+    {
+      "id": "radio.ariakit.shift-tab-returns-to-checked",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-shift-tab-focus/test.ts#L4",
+      "upstreamTest": "Shift+Tab moves focus back to the checked radio",
+      "apg": "keyboard",
+      "config": {
+        "items": 3,
+        "values": ["one", "two", "three"],
+        "checked": null,
+        "flavor": "roving"
+      },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "radio:0" } },
+        { "event": "key", "key": "ArrowRight", "target": "radio:0" },
+        { "expect": { "focus": "radio:1", "checked": "radio:1" } },
+        { "event": "focus", "target": "radio:2" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:1",
+            "attrs": { "radio:2": { "aria-checked": "false" } }
+          }
+        },
+        { "event": "key", "key": "Tab", "target": "radio:2" },
+        { "expect": { "focus": null } },
+        { "event": "key", "key": "Shift+Tab" },
+        {
+          "expect": {
+            "focus": "radio:1",
+            "checked": "radio:1",
+            "attrs": { "radio:2": { "aria-checked": "false" } }
+          }
+        }
+      ],
+      "notes": "Programmatic focus on an unchecked radio does not move the tab stop; re-entering the group with Shift+Tab returns to the checked radio."
+    },
+    {
+      "id": "radio.ariakit.focus-does-not-fire-change",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L74",
+      "upstreamTest": "does not change a native radio when focus returns to it",
+      "apg": "extension",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null,
+        "trackChangeCount": true
+      },
+      "steps": [
+        { "event": "click", "target": "radio:0" },
+        { "expect": { "events": { "onChange": ["apple"] } } },
+        { "event": "key", "key": "ArrowRight", "target": "radio:0" },
+        { "event": "key", "key": "ArrowRight", "target": "radio:1" },
+        { "event": "key", "key": "Tab", "target": "radio:2" },
+        { "event": "key", "key": "Shift+Tab" },
+        {
+          "expect": {
+            "focus": "radio:2",
+            "checked": "radio:2",
+            "events": { "onChange": ["apple", "orange", "watermelon"] }
+          }
+        }
+      ],
+      "notes": "Re-focusing the checked radio via Tab/Shift+Tab must not fire another change."
+    },
+    {
+      "id": "radio.ariakit.click-checked-radio-no-change",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-selection-events/test.ts#L85",
+      "upstreamTest": "does not change an already checked custom radio",
+      "apg": "extension",
+      "config": {
+        "items": 3,
+        "values": ["apple", "orange", "watermelon"],
+        "checked": null,
+        "customRadio": "radio:0"
+      },
+      "steps": [
+        { "event": "click", "target": "radio:0" },
+        {
+          "expect": {
+            "checked": "radio:0",
+            "events": { "onChange": ["apple"] }
+          }
+        },
+        { "event": "click", "target": "radio:0" },
+        {
+          "expect": {
+            "checked": "radio:0",
+            "events": { "onChange": ["apple"] }
+          }
+        }
+      ],
+      "notes": "Clicking an already checked radio fires no additional change, even for a custom-rendered radio."
+    }
+  ],
+  "skipped": [
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/form-radio/test.ts#L14",
+      "upstreamTest": "show error on blur / show error on submit / focus on radio with error on submit / fix error on change / submit form / reset form on submit",
+      "reason": "Form validation and submission internals; out of scope for the radio-group pattern."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/form-radio-3833/test-browser.ts#L4",
+      "upstreamTest": "FormRadio uses form field name inside RadioProvider / validation error shows after blur",
+      "reason": "Form field naming and validation; form internals."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-group-3833/test-browser.ts#L9",
+      "upstreamTest": "radios have unique name attributes per group",
+      "reason": "Library-specific native input naming; no library-neutral scenario equivalent."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-group-3833/test-browser.ts#L41",
+      "upstreamTest": "Tab moves focus between groups",
+      "reason": "Requires two sibling radio groups; the spec machine models a single group."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-group-3833/test-browser.ts#L59",
+      "upstreamTest": "form submission serializes values per group",
+      "reason": "Form submission internals."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/menu-radio-interactions/test.ts#L4",
+      "upstreamTest": "default checked / update on click / update on enter / update on space menu item",
+      "reason": "Menu pattern (menuitemradio), not the radio-group pattern; targets are outside radiogroup/radio."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/radio-shift-tab-focus/test-browser.ts#L33",
+      "upstreamTest": "Shift+Tab moves focus back to the checked iframe radio",
+      "reason": "iframe/platform-specific focus behaviour."
+    },
+    {
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/ariakit-ui-radio/test-browser.ts#L10",
+      "upstreamTest": "page / lights an enabled card on hover / keeps a card of a disabled grid unlit on hover @visual",
+      "reason": "Visual capture / styling."
+    }
+  ]
+}