@cssints/apg-specs 0.0.0-stage → 0.5.2

package/scenarios/apg/checkbox.ariakit.json

@@ -0,0 +1,299 @@
+{
+  "pattern": "checkbox",
+  "source": "ariakit",
+  "commit": "404c72257b879569feb08465da4ff9915fd873da",
+  "license": "MIT",
+  "skipped": [
+    {
+      "reason": "visual/screenshot tests (@visual, captureInView/capturePage)"
+    },
+    {
+      "reason": "styling/geometry assertions (field rings, badge sizing, colour schemes)"
+    },
+    { "reason": "test-browser duplicate of the undefined-render-prop case" },
+    {
+      "reason": "menu-checkbox sandbox (menu pattern: menuitemcheckbox, typeahead, menu button label)"
+    },
+    {
+      "reason": "form-library HTML name handling beyond the integer-like-name click port"
+    },
+    { "reason": "React ref/SSR and store-internals tests" }
+  ],
+  "scenarios": [
+    {
+      "id": "checkbox.ariakit.native-semantics-tab-and-space",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L4",
+      "upstreamTest": "renders native checkbox semantics and supports Tab and Space",
+      "apg": "keyboard",
+      "config": { "part": "checkbox", "native": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "type": "checkbox", "aria-checked": "false" }
+            }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox" } },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "true" } } } },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } }
+      ],
+      "notes": "Native checkbox semantics; Space toggles while Tab moves focus."
+    },
+    {
+      "id": "checkbox.ariakit.every-implementation-in-tab-order",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L18",
+      "upstreamTest": "keeps each checkbox implementation in the tab order",
+      "apg": "keyboard",
+      "config": { "count": 12 },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox:0" } },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox:1" } },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox:2" } }
+      ],
+      "notes": "Every checkbox variant (controlled, store, valued, button, custom) receives a tab stop."
+    },
+    {
+      "id": "checkbox.ariakit.uncontrolled-controlled-store-valued",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L40",
+      "upstreamTest": "supports uncontrolled, controlled, store, and valued checkboxes",
+      "apg": "states",
+      "config": {
+        "variants": ["uncontrolled", "controlled", "store", "valued"]
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:uncontrolled": { "checked": "false" },
+              "checkbox:controlled": { "checked": "true" },
+              "checkbox:store": { "checked": "true" },
+              "checkbox:valued": { "value": "accept", "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "label:uncontrolled" },
+        {
+          "expect": {
+            "attrs": { "checkbox:uncontrolled": { "checked": "true" } }
+          }
+        },
+        { "event": "click", "target": "checkbox:controlled" },
+        {
+          "expect": {
+            "attrs": { "checkbox:controlled": { "checked": "false" } }
+          }
+        },
+        { "event": "focus", "target": "checkbox:store" },
+        { "event": "key", "key": " ", "target": "checkbox:store" },
+        { "expect": { "attrs": { "checkbox:store": { "checked": "false" } } } },
+        { "event": "key", "key": " ", "target": "checkbox:store" },
+        { "expect": { "attrs": { "checkbox:store": { "checked": "true" } } } },
+        { "event": "focus", "target": "checkbox:valued" },
+        { "event": "key", "key": " ", "target": "checkbox:valued" },
+        {
+          "expect": { "attrs": { "checkbox:valued": { "checked": "false" } } }
+        },
+        { "event": "key", "key": " ", "target": "checkbox:valued" },
+        { "expect": { "attrs": { "checkbox:valued": { "checked": "true" } } } }
+      ],
+      "notes": "Valued checkbox carries a value attribute alongside its checked state."
+    },
+    {
+      "id": "checkbox.ariakit.dynamically-linked-stores",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L73",
+      "upstreamTest": "updates dynamically linked checkbox stores",
+      "apg": "extension",
+      "config": { "linked": true },
+      "steps": [
+        { "event": "click", "target": "checkbox:first" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:first": { "checked": "false" },
+              "checkbox:second": { "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:first" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:first": { "checked": "true" },
+              "checkbox:second": { "checked": "true" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:second" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:first": { "checked": "false" },
+              "checkbox:second": { "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:second" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:first": { "checked": "false" },
+              "checkbox:second": { "checked": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Two checkboxes sharing a store stay linked; re-checking after uncheck is not forced."
+    },
+    {
+      "id": "checkbox.ariakit.rendered-as-button-keyboard-and-click",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L97",
+      "upstreamTest": "supports a checkbox rendered as a button",
+      "apg": "keyboard",
+      "config": { "render": "button" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "role": "checkbox", "aria-checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "true" } } } },
+        { "event": "focus", "target": "checkbox" },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "false" } } } },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "true" } } } },
+        { "event": "key", "key": "Enter", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "false" } } } },
+        { "event": "key", "key": "Enter", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "true" } } } }
+      ],
+      "notes": "Button-rendered checkbox responds to click, Space and Enter."
+    },
+    {
+      "id": "checkbox.ariakit.undefined-render-prop-preserves-semantics",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L145",
+      "upstreamTest": "preserves checkbox semantics when an optional render prop is undefined",
+      "apg": "extension",
+      "config": { "renderProp": "undefined" },
+      "steps": [
+        { "event": "prop", "set": {} },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "false" } } } },
+        { "event": "click", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "aria-checked": "true" } } } }
+      ],
+      "notes": "An undefined optional render prop must not drop the checkbox role."
+    },
+    {
+      "id": "checkbox.ariakit.custom-visually-hidden-keyboard",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L156",
+      "upstreamTest": "supports a custom visually hidden checkbox",
+      "apg": "keyboard",
+      "config": { "visuallyHidden": true, "checked": true },
+      "steps": [
+        { "event": "click", "target": "label" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } },
+        { "event": "click", "target": "label" },
+        { "expect": { "attrs": { "checkbox": { "checked": "true" } } } },
+        { "event": "focus", "target": "checkbox" },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } },
+        { "event": "key", "key": " ", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "true" } } } },
+        { "event": "key", "key": "Enter", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } },
+        { "event": "key", "key": "Enter", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "true" } } } }
+      ],
+      "notes": "A visually hidden input styled by a wrapper still toggles on label click, Space and Enter."
+    },
+    {
+      "id": "checkbox.ariakit.group-independent-values",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/checkbox-interactions/test.ts#L180",
+      "upstreamTest": "updates independent values in a checkbox group",
+      "apg": "states",
+      "config": { "group": true, "items": 3 },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "group" },
+              "checkbox:0": { "checked": "false" },
+              "checkbox:1": { "checked": "false" },
+              "checkbox:2": { "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:0" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:0": { "checked": "true" },
+              "checkbox:1": { "checked": "false" },
+              "checkbox:2": { "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:2" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:0": { "checked": "false" },
+              "checkbox:1": { "checked": "false" },
+              "checkbox:2": { "checked": "true" }
+            }
+          }
+        },
+        { "event": "focus", "target": "checkbox:1" },
+        { "event": "key", "key": " ", "target": "checkbox:1" },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:0": { "checked": "true" },
+              "checkbox:1": { "checked": "true" },
+              "checkbox:2": { "checked": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Checkboxes in a group hold independent values."
+    },
+    {
+      "id": "checkbox.ariakit.integer-like-name-click",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/form-checkbox-integer-like-name/test.ts#L4",
+      "upstreamTest": "check checkbox with integer-like name on click",
+      "apg": "extension",
+      "config": { "name": "123", "checked": true },
+      "steps": [
+        { "event": "click", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } }
+      ],
+      "notes": "An integer-like name must not change how the checkbox is queried or toggled."
+    },
+    {
+      "id": "checkbox.ariakit.non-integer-like-name-click",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/form-checkbox-integer-like-name/test.ts#L10",
+      "upstreamTest": "check checkbox with non integer-like name on click",
+      "apg": "extension",
+      "config": { "name": "safe", "checked": true },
+      "steps": [
+        { "event": "click", "target": "checkbox" },
+        { "expect": { "attrs": { "checkbox": { "checked": "false" } } } }
+      ],
+      "notes": "Control case for the integer-like name behaviour."
+    }
+  ]
+}