@cssints/apg-specs 0.0.0-stage → 0.5.1

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

@@ -0,0 +1,186 @@
+{
+  "pattern": "link",
+  "source": "react-aria",
+  "commit": "99e610236887da619ad9d54a1cd87983166c043d",
+  "license": "Apache-2.0",
+  "skipped": [
+    { "reason": "Link > should render a link with default class" },
+    { "reason": "Link > should render a link with custom class" },
+    { "reason": "Link > should support DOM props" },
+    { "reason": "Link > should support id prop" },
+    { "reason": "Link > should support render props" },
+    { "reason": "Link > should support custom render function" },
+    { "reason": "Link > should support hover" },
+    { "reason": "Link > should support focus ring" },
+    { "reason": "Link > should support press state" },
+    { "reason": "Link > should support slot" },
+    { "reason": "Link > should work with RouterProvider" },
+    { "reason": "@adobe Link > supports UNSAFE_className" },
+    { "reason": "@adobe Link > supports autofocus" },
+    { "reason": "@adobe Link > supports a wrapping tooltip trigger" }
+  ],
+  "scenarios": [
+    {
+      "id": "link.react-aria.native-anchor-needs-no-role",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/link/useLink.test.js#L23",
+      "upstreamTest": "useLink > handles defaults",
+      "apg": "aria",
+      "config": { "native": true },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "role": null } },
+            "focus": null
+          }
+        }
+      ],
+      "notes": "A native <a href> is focusable and activatable on its own; onKeyDown is still attached for react-aria press handling."
+    },
+    {
+      "id": "link.react-aria.custom-element-gets-role-link",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/link/useLink.test.js#L30",
+      "upstreamTest": "useLink > handles custom element type",
+      "apg": "aria",
+      "config": { "elementType": "div" },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "role": "link" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "link.react-aria.custom-element-is-tabbable",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/link/useLink.test.js#L30",
+      "upstreamTest": "useLink > handles custom element type",
+      "apg": "aria",
+      "config": { "elementType": "div" },
+      "steps": [
+        { "event": "focus", "target": "link" },
+        { "expect": { "focus": "link" } }
+      ],
+      "notes": "The custom element must supply focusability itself (tabindex=0); the hook only adds role and the Enter handler."
+    },
+    {
+      "id": "link.react-aria.disabled-custom-link",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/link/useLink.test.js#L36",
+      "upstreamTest": "useLink > handles isDisabled",
+      "apg": "aria",
+      "config": { "elementType": "span", "isDisabled": true },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "role": "link", "aria-disabled": "true" } },
+            "focus": null
+          }
+        }
+      ],
+      "notes": "A disabled link role is removed from the tab order and marked aria-disabled."
+    },
+    {
+      "id": "link.react-aria.accessible-props-passed-through",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Link.test.js#L51",
+      "upstreamTest": "Link > should support accessibility props",
+      "apg": "aria",
+      "config": {},
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "aria-current": "page" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "link.react-aria.href-renders-anchor",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Link.test.js#L92",
+      "upstreamTest": "Link > should render a link with <a> element",
+      "apg": "aria",
+      "config": { "href": "test" },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "role": null } }
+          }
+        }
+      ],
+      "notes": "With href the component renders a native anchor; the role query still resolves to a link."
+    },
+    {
+      "id": "link.react-aria.disabled-link-aria-disabled",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Link.test.js#L189",
+      "upstreamTest": "Link > should support disabled state",
+      "apg": "aria",
+      "config": { "isDisabled": true },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "aria-disabled": "true" } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "link.react-aria.enabled-link-navigates-on-click",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Link.test.js#L201",
+      "upstreamTest": "Link > should work with RouterProvider",
+      "apg": "extension",
+      "config": { "href": "/foo" },
+      "steps": [
+        { "event": "key", "key": "Enter", "target": "link" },
+        { "expect": { "events": { "onNavigate": ["/foo"] } } }
+      ],
+      "notes": "Router integration: activation runs the supplied navigate callback with the href."
+    },
+    {
+      "id": "link.react-aria.disabled-link-does-not-navigate",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Link.test.js#L217",
+      "upstreamTest": "Link > should not navigate if disabled",
+      "apg": "aria",
+      "config": { "href": "/foo", "isDisabled": true },
+      "steps": [
+        { "event": "key", "key": "Enter", "target": "link" },
+        { "expect": { "events": { "onNavigate": [] } } }
+      ]
+    },
+    {
+      "id": "link.react-aria.adobe-string-wraps-in-tabbable-span",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/link/Link.test.js#L60",
+      "upstreamTest": "Link > Wraps string to span",
+      "apg": "aria",
+      "config": {},
+      "steps": [
+        { "event": "focus", "target": "link" },
+        { "expect": { "focus": "link" } }
+      ],
+      "notes": "Without href the link is rendered as a span with tabindex=0."
+    },
+    {
+      "id": "link.react-aria.adobe-href-renders-anchor",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/link/Link.test.js#L68",
+      "upstreamTest": "Link > supports href",
+      "apg": "aria",
+      "config": { "href": "https://adobe.com" },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "link": { "role": null } }
+          }
+        }
+      ]
+    },
+    {
+      "id": "link.react-aria.adobe-press-fires-on-activation",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/link/Link.test.js#L40",
+      "upstreamTest": "Link > Link handles defaults",
+      "apg": "keyboard",
+      "config": {},
+      "steps": [
+        { "event": "click", "target": "link" },
+        { "expect": { "events": { "onPress": ["link"] } } }
+      ],
+      "notes": "Pointer activation fires onPress once."
+    }
+  ]
+}

package/scenarios/apg/listbox.ariakit.json

@@ -0,0 +1,78 @@
+{
+  "pattern": "listbox",
+  "source": "ariakit",
+  "commit": "404c72257b879569feb08465da4ff9915fd873da",
+  "license": "MIT",
+  "skipped": [
+    {
+      "reason": "no standalone Listbox implementation exists in this checkout: ariakit exposes option/listbox semantics only through Select (and Combobox, which reuses the select popover). The scenarios below port the typeahead behaviour of that popup list."
+    },
+    {
+      "reason": "typeahead updates the value for late unmounted items and for late renderer items (combobox-select-typeahead): these exercise React store item (re)registration after async load, not a listbox interaction primitive; the listbox-visible part is already covered by the open/closed typeahead scenarios."
+    },
+    {
+      "reason": "composite typeahead buffer scoping across two Composite instances (composite-typeahead-buffer): upstream renders two independent Composite button groups and addresses options within the second instance; the scenario target syntax has no way to address options inside a second listbox, so the isolation property is not restated here."
+    },
+    {
+      "reason": "typeahead matching against arbitrary custom React content while closed (the fixture renders flags inside each option) and the Combobox half of the shared fixture (this file is scoped to the Select popup list)."
+    }
+  ],
+  "scenarios": [
+    {
+      "id": "listbox.ariakit.typeahead-matches-content-skips-empty",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/combobox-select-typeahead/test.ts#L32",
+      "upstreamTest": "matches custom item content and skips empty text while open",
+      "apg": "extension",
+      "config": {
+        "items": ["Brazil", "Citrus", "Canada", "Japan", "Mexico"],
+        "selectionMode": "single",
+        "defaultValue": "Brazil",
+        "typeaheadText": { "Citrus": "" }
+      },
+      "steps": [
+        { "event": "click", "target": "trigger:0" },
+        { "expect": { "focus": "option:0" } },
+        { "event": "type", "text": "c", "target": "listbox" },
+        { "expect": { "focus": "option:2" } }
+      ],
+      "notes": "Matches against each option's typeahead text, not its visible text: Citrus has an empty typeahead text so 'c' lands on Canada (index 2) instead of the first c-option. ariakit tracks a data-active-item; mapped here to the active/focused option."
+    },
+    {
+      "id": "listbox.ariakit.typeahead-uses-alias-text",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/combobox-select-typeahead/test.ts#L53",
+      "upstreamTest": "updates custom item text",
+      "apg": "extension",
+      "config": {
+        "items": ["Brazil", "Citrus", "Canada", "Japan", "Mexico"],
+        "selectionMode": "single",
+        "defaultValue": "Brazil",
+        "typeaheadText": { "Citrus": "", "Canada": "Dominion" }
+      },
+      "steps": [
+        { "event": "click", "target": "trigger:0" },
+        { "event": "type", "text": "d", "target": "listbox" },
+        { "expect": { "focus": "option:2" } }
+      ],
+      "notes": "Typeahead text can differ from the rendered label (Canada matches the alias 'Dominion')."
+    },
+    {
+      "id": "listbox.ariakit.typeahead-matches-while-closed",
+      "upstream": "https://github.com/ariakit/ariakit/blob/404c72257b879569feb08465da4ff9915fd873da/app/src/sandbox/combobox-select-typeahead/test.ts#L43",
+      "upstreamTest": "matches custom item content while closed",
+      "apg": "extension",
+      "config": {
+        "items": ["Brazil", "Citrus", "Canada", "Japan", "Mexico"],
+        "selectionMode": "single",
+        "defaultValue": "Brazil",
+        "open": false,
+        "typeaheadText": { "Citrus": "" }
+      },
+      "steps": [
+        { "event": "focus", "target": "trigger:0" },
+        { "event": "type", "text": "c", "target": "trigger:0" },
+        { "expect": { "visible": [], "value": { "trigger:0": "Canada" } } }
+      ],
+      "notes": "Typeahead on the closed trigger immediately updates the displayed value to the match and does not open the listbox."
+    }
+  ]
+}

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

@@ -0,0 +1,163 @@
+{
+  "pattern": "listbox",
+  "source": "base-ui",
+  "commit": "19511bb171f3b360b006c94cf6d07e53cb446505",
+  "license": "MIT",
+  "skipped": [
+    {
+      "reason": "no standalone Listbox component exists in this checkout: Base UI renders role=listbox/option inside Select (and reuses it for Combobox and Autocomplete), so the scenarios below port only the list/option-level behaviour that is independent of the trigger."
+    },
+    {
+      "reason": "trigger/popup lifecycle and positioning: defaultOpen, open/close transitions, modal, finalFocus, scroll arrows, positioner sizing, RTL alignment (SelectRoot/SelectPopup tests)"
+    },
+    {
+      "reason": "value/form plumbing: defaultValue, controlled value, itemToStringValue/Label, hidden inputs, validation, dirty/touched/filled field state, browser autofill"
+    },
+    {
+      "reason": "Base UI style hooks: data-highlighted / data-selected / data-disabled attribute assertions as styling contracts (conformance suites) and generic data attribute forwarding"
+    },
+    {
+      "reason": "grouping and reordering of items, grouped selection bookkeeping, and the index-guessing regression (SelectItem tests)"
+    },
+    {
+      "reason": "drag-to-select and opening-delay pointer timing matrices (SelectItem tests)"
+    },
+    {
+      "reason": "Select.List conformance and Separator orientation (SelectList/ListboxSeparator tests): the list container conforms to a div ref and the separator only asserts role=presentation, neither is an option/listbox interaction"
+    }
+  ],
+  "scenarios": [
+    {
+      "id": "listbox.base-ui.arrow-keys-focus-options",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L152",
+      "upstreamTest": "navigating with keyboard should focus item",
+      "apg": "keyboard",
+      "config": {
+        "items": ["one", "two", "three"],
+        "open": true,
+        "selectionMode": "single"
+      },
+      "steps": [
+        { "expect": { "focus": "option:0" } },
+        { "event": "key", "key": "ArrowDown", "target": "option:0" },
+        { "expect": { "focus": "option:1" } },
+        { "event": "key", "key": "ArrowDown", "target": "option:1" },
+        { "expect": { "focus": "option:2" } }
+      ]
+    },
+    {
+      "id": "listbox.base-ui.enter-selects-highlighted-option",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L191",
+      "upstreamTest": "should select item when Enter key is pressed",
+      "apg": "selection",
+      "config": {
+        "items": ["one", "two"],
+        "open": true,
+        "selectionMode": "single"
+      },
+      "steps": [
+        { "event": "key", "key": "ArrowDown", "target": "option:0" },
+        { "expect": { "focus": "option:1" } },
+        { "event": "key", "key": "Enter", "target": "option:1" },
+        {
+          "expect": {
+            "value": { "trigger:0": "two" },
+            "visible": [],
+            "events": { "onValueChange": ["two"] }
+          }
+        }
+      ]
+    },
+    {
+      "id": "listbox.base-ui.click-selects-and-closes",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L120",
+      "upstreamTest": "should select the item and close popup when clicked",
+      "apg": "selection",
+      "config": { "items": ["one"], "open": true, "selectionMode": "single" },
+      "steps": [
+        { "event": "click", "target": "option:0" },
+        {
+          "expect": {
+            "value": { "trigger:0": "one" },
+            "visible": [],
+            "events": { "onValueChange": ["one"] }
+          }
+        }
+      ]
+    },
+    {
+      "id": "listbox.base-ui.disabled-option-focusable",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L220",
+      "upstreamTest": "should focus disabled items",
+      "apg": "aria",
+      "config": { "items": ["two"], "open": true, "disabledKeys": ["two"] },
+      "steps": [
+        { "event": "focus", "target": "option:0" },
+        {
+          "expect": {
+            "focus": "option:0",
+            "attrs": { "option:0": { "aria-disabled": "true" } }
+          }
+        }
+      ],
+      "notes": "Base UI keeps disabled options focusable (aria-disabled, not disabled); they just cannot be selected."
+    },
+    {
+      "id": "listbox.base-ui.disabled-option-not-selectable",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L245",
+      "upstreamTest": "should not select disabled item",
+      "apg": "selection",
+      "config": {
+        "items": ["one", "two"],
+        "open": true,
+        "selectionMode": "single",
+        "disabledKeys": ["two"]
+      },
+      "steps": [
+        { "event": "click", "target": "option:1" },
+        { "expect": { "value": { "trigger:0": "" }, "events": {} } }
+      ]
+    },
+    {
+      "id": "listbox.base-ui.focus-selected-option-on-open",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L444",
+      "upstreamTest": "should focus the selected item upon opening the popup",
+      "apg": "focus",
+      "config": {
+        "items": ["one", "two", "three"],
+        "selectionMode": "single",
+        "defaultValue": "three"
+      },
+      "steps": [
+        { "event": "click", "target": "trigger:0" },
+        { "event": "click", "target": "option:2" },
+        { "expect": { "value": { "trigger:0": "three" } } },
+        { "event": "click", "target": "trigger:0" },
+        { "expect": { "focus": "option:2" } }
+      ]
+    },
+    {
+      "id": "listbox.base-ui.hover-highlights-option",
+      "upstream": "https://github.com/mui/base-ui/blob/19511bb171f3b360b006c94cf6d07e53cb446505/packages/react/src/select/item/SelectItem.test.tsx#L362",
+      "upstreamTest": "should highlight a hovered item and commit it with a mouse click",
+      "apg": "pointer",
+      "config": {
+        "items": ["one", "two", "three"],
+        "open": true,
+        "selectionMode": "single"
+      },
+      "steps": [
+        { "event": "hover", "target": "option:1" },
+        { "expect": { "focus": "option:1" } },
+        { "event": "click", "target": "option:1" },
+        {
+          "expect": {
+            "value": { "trigger:0": "two" },
+            "events": { "onValueChange": ["two"] }
+          }
+        }
+      ],
+      "notes": "Base UI moves the active option with pointer hover (aria-activedescendant / data-highlighted); mapped here to the active/focused option."
+    }
+  ]
+}