@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,518 @@
+{
+  "pattern": "checkbox",
+  "source": "react-aria",
+  "commit": "99e610236887da619ad9d54a1cd87983166c043d",
+  "license": "Apache-2.0",
+  "skipped": [
+    {
+      "reason": "class-name / data-* style-hook rendering (default class, custom class, className functions, data-selected on wrapping label as styling)"
+    },
+    {
+      "reason": "custom render-function plumbing, context slots and DOM prop passthrough"
+    },
+    {
+      "reason": "React refs, inputRef, callback refs and context inputRef merging"
+    },
+    {
+      "reason": "form submission, form reset, required validation, help text and validation error messages"
+    },
+    { "reason": "CheckboxField-only description update tests" },
+    {
+      "reason": "S1 (react-spectrum) theme/provider wrappers, help text and validation"
+    },
+    {
+      "reason": "aria-labelledby / aria-describedby passthrough props that only forward a literal prop"
+    }
+  ],
+  "scenarios": [
+    {
+      "id": "checkbox.react-aria.hover-state-and-callbacks",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L107",
+      "upstreamTest": "Checkbox > should support hover",
+      "apg": "extension",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "hover", "target": "checkbox" },
+        {
+          "expect": {
+            "attrs": { "label": { "data-hovered": "true" } },
+            "events": { "onHoverStart": [1], "onHoverChange": [1] }
+          }
+        },
+        { "event": "unhover", "target": "checkbox" },
+        {
+          "expect": {
+            "attrs": { "label": { "data-hovered": null } },
+            "events": { "onHoverEnd": [1], "onHoverChange": [2] }
+          }
+        }
+      ],
+      "notes": "Hover state lives on the wrapping label."
+    },
+    {
+      "id": "checkbox.react-aria.focus-visible-on-tab",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L138",
+      "upstreamTest": "Checkbox > should support focus ring",
+      "apg": "extension",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "checkbox",
+            "attrs": { "label": { "data-focus-visible": "true" } }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "attrs": { "label": { "data-focus-visible": null } } } }
+      ],
+      "notes": "Keyboard focus marks the label data-focus-visible."
+    },
+    {
+      "id": "checkbox.react-aria.focus-events",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L160",
+      "upstreamTest": "Checkbox > should support focus events",
+      "apg": "focus",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "checkbox",
+            "events": { "onFocus": [1], "onFocusChange": [true] }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "button:steal",
+            "events": { "onBlur": [1], "onFocusChange": [false] }
+          }
+        }
+      ],
+      "notes": "onFocusChange mirrors focus/blur transitions."
+    },
+    {
+      "id": "checkbox.react-aria.press-state-pointer",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L191",
+      "upstreamTest": "Checkbox > should support press state",
+      "apg": "extension",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "pointerdown", "target": "label" },
+        { "expect": { "attrs": { "label": { "data-pressed": "true" } } } },
+        { "event": "pointerup", "target": "label" },
+        {
+          "expect": {
+            "attrs": { "label": { "data-pressed": null } },
+            "events": { "onPress": [1], "onClick": [1], "onClickCapture": [1] }
+          }
+        }
+      ],
+      "notes": "Press feedback on the label; toggle fires on release."
+    },
+    {
+      "id": "checkbox.react-aria.press-state-keyboard-space",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L222",
+      "upstreamTest": "Checkbox > should support press state with keyboard",
+      "apg": "keyboard",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox" } },
+        { "event": "key", "key": " ", "phase": "down", "target": "checkbox" },
+        { "expect": { "attrs": { "label": { "data-pressed": "true" } } } },
+        { "event": "key", "key": " ", "phase": "up", "target": "checkbox" },
+        {
+          "expect": {
+            "attrs": { "label": { "data-pressed": null } },
+            "events": { "onPress": [1], "onClick": [1] }
+          }
+        }
+      ],
+      "notes": "Space held down keeps data-pressed until keyup."
+    },
+    {
+      "id": "checkbox.react-aria.disabled-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L251",
+      "upstreamTest": "Checkbox > should support disabled state",
+      "apg": "states",
+      "config": { "part": "checkbox", "isDisabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "disabled": "" },
+              "label": { "data-disabled": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Disabled checkbox is natively disabled and marks the label data-disabled."
+    },
+    {
+      "id": "checkbox.react-aria.selected-state-onchange",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L266",
+      "upstreamTest": "Checkbox > should support selected state",
+      "apg": "states",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "click", "target": "checkbox" },
+        {
+          "expect": {
+            "attrs": { "checkbox": { "checked": "true" } },
+            "events": { "onChange": [true] }
+          }
+        },
+        { "event": "click", "target": "checkbox" },
+        {
+          "expect": {
+            "attrs": { "checkbox": { "checked": "false" } },
+            "events": { "onChange": [false] }
+          }
+        }
+      ],
+      "notes": "Checked state is the native input's checked property; onChange reports the new value."
+    },
+    {
+      "id": "checkbox.react-aria.indeterminate-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L298",
+      "upstreamTest": "Checkbox > should support indeterminate state",
+      "apg": "states",
+      "config": { "part": "checkbox", "isIndeterminate": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "indeterminate": "true" },
+              "label": { "data-indeterminate": "" }
+            }
+          }
+        }
+      ],
+      "notes": "Indeterminate is a native input property; the label exposes data-indeterminate."
+    },
+    {
+      "id": "checkbox.react-aria.read-only-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L315",
+      "upstreamTest": "Checkbox > should support read only state",
+      "apg": "states",
+      "config": { "part": "checkbox", "isReadOnly": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "aria-readonly": "true" },
+              "label": { "data-readonly": "" }
+            }
+          }
+        }
+      ],
+      "notes": "Read-only checkbox exposes aria-readonly."
+    },
+    {
+      "id": "checkbox.react-aria.invalid-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L330",
+      "upstreamTest": "Checkbox > should support invalid state",
+      "apg": "states",
+      "config": { "part": "checkbox", "isInvalid": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox": { "aria-invalid": "true" },
+              "label": { "data-invalid": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Invalid checkbox exposes aria-invalid."
+    },
+    {
+      "id": "checkbox.react-aria.sequential-presses-do-not-blur",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Checkbox.test.js#L454",
+      "upstreamTest": "Checkbox > should not trigger onBlur/onFocus on sequential presses",
+      "apg": "focus",
+      "config": { "part": "checkbox" },
+      "steps": [
+        { "event": "click", "target": "label" },
+        { "expect": { "events": { "onFocus": [1], "onBlur": [0] } } },
+        { "event": "click", "target": "label" },
+        { "expect": { "events": { "onFocus": [0], "onBlur": [0] } } }
+      ],
+      "notes": "Clicking the label twice keeps focus; no second focus/blur pair fires."
+    },
+    {
+      "id": "checkbox.react-aria.group-labelled-by-label",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L74",
+      "upstreamTest": "CheckboxGroup with Checkbox > should render a checkbox group with default classes",
+      "apg": "aria",
+      "config": { "group": true, "label": "Test", "values": ["a", "b", "c"] },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "group", "aria-labelledby": "label" }
+            }
+          }
+        }
+      ],
+      "notes": "Group is named through aria-labelledby pointing at its label."
+    },
+    {
+      "id": "checkbox.react-aria.group-disabled-checkbox",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L123",
+      "upstreamTest": "should support disabled state on checkbox",
+      "apg": "states",
+      "config": { "group": true, "checkboxDisabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:0": { "disabled": "" },
+              "label:0": { "data-disabled": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Per-checkbox isDisabled disables only that checkbox."
+    },
+    {
+      "id": "checkbox.react-aria.group-disabled-group",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L137",
+      "upstreamTest": "should support disabled state on group",
+      "apg": "states",
+      "config": { "group": true, "isDisabled": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "aria-disabled": "true" },
+              "checkbox:0": { "disabled": "" }
+            }
+          }
+        }
+      ],
+      "notes": "Group isDisabled sets aria-disabled on the group and disables each checkbox."
+    },
+    {
+      "id": "checkbox.react-aria.group-selected-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L153",
+      "upstreamTest": "should support selected state",
+      "apg": "states",
+      "config": { "group": true, "values": ["a", "b", "c"] },
+      "steps": [
+        { "event": "click", "target": "checkbox:0" },
+        {
+          "expect": {
+            "attrs": { "checkbox:0": { "checked": "true" } },
+            "events": { "onChange": [["a"]] }
+          }
+        },
+        { "event": "click", "target": "checkbox:0" },
+        {
+          "expect": {
+            "attrs": { "checkbox:0": { "checked": "false" } },
+            "events": { "onChange": [[]] }
+          }
+        }
+      ],
+      "notes": "Group onChange receives the array of checked values."
+    },
+    {
+      "id": "checkbox.react-aria.group-read-only",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L181",
+      "upstreamTest": "should support read only state",
+      "apg": "states",
+      "config": { "group": true, "isReadOnly": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "data-readonly": "" },
+              "label:0": { "data-readonly": "" }
+            }
+          }
+        }
+      ],
+      "notes": "Read-only group marks the group and each checkbox label."
+    },
+    {
+      "id": "checkbox.react-aria.group-invalid-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L196",
+      "upstreamTest": "should support validation state",
+      "apg": "states",
+      "config": { "group": true, "isInvalid": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "data-invalid": "true" },
+              "label:0": { "data-invalid": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Invalid group propagates data-invalid to children."
+    },
+    {
+      "id": "checkbox.react-aria.group-required-state",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L211",
+      "upstreamTest": "should support required state",
+      "apg": "states",
+      "config": { "group": true, "isRequired": true },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "data-required": "true" },
+              "label:0": { "data-required": "true" }
+            }
+          }
+        }
+      ],
+      "notes": "Required group marks the group and children."
+    },
+    {
+      "id": "checkbox.react-aria.group-help-text-describedby",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L229",
+      "upstreamTest": "supports help text",
+      "apg": "aria",
+      "config": {
+        "group": true,
+        "isInvalid": true,
+        "description": true,
+        "errorMessage": true
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "aria-describedby": "description error" },
+              "checkbox:0": { "aria-describedby": "error description" }
+            }
+          }
+        }
+      ],
+      "notes": "Description and error message ids are linked via aria-describedby."
+    },
+    {
+      "id": "checkbox.react-aria.group-focus-events",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L327",
+      "upstreamTest": "should support focus events",
+      "apg": "focus",
+      "config": { "group": true, "values": ["a", "b", "c"] },
+      "steps": [
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "checkbox:0",
+            "events": { "onFocus": [1], "onFocusChange": [true] }
+          }
+        },
+        { "event": "key", "key": "Tab" },
+        {
+          "expect": {
+            "focus": "checkbox:1",
+            "events": { "onBlur": [0], "onFocus": [1] }
+          }
+        },
+        { "event": "click", "target": "button:steal" },
+        { "expect": { "events": { "onBlur": [1], "onFocusChange": [false] } } }
+      ],
+      "notes": "Focus moving between checkboxes inside the group does not call the group's callbacks; leaving the group does."
+    },
+    {
+      "id": "checkbox.react-aria.group-checkbox-aria-describedby-passthrough",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/CheckboxGroup.test.js#L278",
+      "upstreamTest": "should support aria-describedby on a checkbox",
+      "apg": "aria",
+      "config": {
+        "group": true,
+        "values": ["a", "b", "c"],
+        "checkboxDescribedby": "test"
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "checkbox:0": { "aria-describedby": "test" },
+              "checkbox:1": { "aria-describedby": "test" }
+            }
+          }
+        }
+      ],
+      "notes": "aria-describedby passed to the group is forwarded to each checkbox."
+    },
+    {
+      "id": "checkbox.react-aria.s1-group-defaults",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/checkbox/CheckboxGroup.test.js#L30",
+      "upstreamTest": "CheckboxGroup > handles defaults",
+      "apg": "states",
+      "config": {
+        "group": true,
+        "label": "Favorite Pet",
+        "values": ["dogs", "cats", "dragons"]
+      },
+      "steps": [
+        { "event": "prop", "set": {} },
+        {
+          "expect": {
+            "attrs": {
+              "group": { "role": "group" },
+              "checkbox:0": { "checked": "false" },
+              "checkbox:2": { "checked": "false" }
+            }
+          }
+        },
+        { "event": "click", "target": "checkbox:2" },
+        {
+          "expect": {
+            "attrs": { "checkbox:2": { "checked": "true" } },
+            "events": { "onChange": [["dragons"]] }
+          }
+        }
+      ],
+      "notes": "S1 group: default value array is empty and click reports the selected value."
+    },
+    {
+      "id": "checkbox.react-aria.s1-group-keyboard-space-toggles",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/checkbox/CheckboxGroup.test.js#L866",
+      "upstreamTest": "CheckboxGroup > keyboard > should select the correct checkbox regardless of orientation and disabled checkboxes",
+      "apg": "keyboard",
+      "config": {
+        "group": true,
+        "orientation": "vertical",
+        "disabledIndexes": [1, 2],
+        "values": ["soccer", "baseball", "basketball", "tennis", "rugby"]
+      },
+      "steps": [
+        { "event": "click", "target": "checkbox:0" },
+        { "expect": { "attrs": { "checkbox:0": { "checked": "true" } } } },
+        { "event": "key", "key": "Tab" },
+        { "expect": { "focus": "checkbox:3" } },
+        { "event": "key", "key": " ", "target": "checkbox:3" },
+        { "expect": { "attrs": { "checkbox:3": { "checked": "true" } } } },
+        { "event": "focus", "target": "checkbox:4" },
+        { "event": "key", "key": " ", "target": "checkbox:4" },
+        { "expect": { "attrs": { "checkbox:4": { "checked": "true" } } } },
+        { "event": "focus", "target": "checkbox:0" },
+        { "event": "key", "key": " ", "target": "checkbox:0" },
+        { "expect": { "attrs": { "checkbox:0": { "checked": "false" } } } }
+      ],
+      "notes": "Disabled checkboxes are skipped in the tab order; Space toggles the focused checkbox regardless of group orientation or locale."
+    }
+  ]
+}