@cssints/apg-specs 0.0.0-stage → 0.5.2

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

@@ -0,0 +1,456 @@
+{
+  "pattern": "slider",
+  "source": "react-aria",
+  "commit": "99e610236887da619ad9d54a1cd87983166c043d",
+  "license": "Apache-2.0",
+  "skipped": [],
+  "scenarios": [
+    {
+      "id": "slider.react-aria.orientation-vertical-sets-aria-orientation",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Slider.test.js#L238",
+      "upstreamTest": "Slider > should support orientation",
+      "apg": "aria",
+      "config": { "thumbs": 1, "value": 0, "orientation": "vertical" },
+      "steps": [
+        {
+          "expect": {
+            "attrs": { "thumb:0": { "aria-orientation": "vertical" } }
+          }
+        }
+      ],
+      "notes": "The slider group carries data-orientation; only the thumb's aria-orientation is asserted here."
+    },
+    {
+      "id": "slider.react-aria.thumb-native-bounds-and-step",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/slider/useSliderThumb.test.js#L20",
+      "upstreamTest": "useSliderThumb > aria labels > should have the right labels with Slider-level label",
+      "apg": "aria",
+      "config": { "thumbs": 1, "value": 50, "min": 10, "max": 200, "step": 2 },
+      "steps": [
+        {
+          "expect": {
+            "value": 50,
+            "attrs": {
+              "thumb:0": {
+                "type": "range",
+                "min": "10",
+                "max": "200",
+                "step": "2"
+              }
+            }
+          }
+        }
+      ],
+      "notes": "react-aria drives a native input[type=range]; bounds and step surface as HTML attributes, unlike base-ui which also exposes aria-valuenow."
+    },
+    {
+      "id": "slider.react-aria.arrow-right-increments-arrow-left-decrements",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L313",
+      "upstreamTest": "Slider > keyboard interactions > (left/right arrows, ltr) moves the slider in the correct direction",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 51 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 50 } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.rtl-horizontal-arrows-reverse",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L314",
+      "upstreamTest": "Slider > keyboard interactions > (left/right arrows, rtl) moves the slider in the correct direction",
+      "apg": "keyboard",
+      "config": {
+        "thumbs": 1,
+        "value": 50,
+        "dir": "rtl",
+        "min": 0,
+        "max": 100
+      },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 49 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 50 } }
+      ],
+      "notes": "APG slider does not itself specify RTL arrow reversal; react-aria reverses Left/Right under an RTL locale."
+    },
+    {
+      "id": "slider.react-aria.up-down-arrows-ignore-rtl",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L316",
+      "upstreamTest": "Slider > keyboard interactions > (up/down arrows, rtl) moves the slider in the correct direction",
+      "apg": "keyboard",
+      "config": {
+        "thumbs": 1,
+        "value": 50,
+        "dir": "rtl",
+        "min": 0,
+        "max": 100
+      },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowUp" },
+        { "expect": { "value": 51 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowDown" },
+        { "expect": { "value": 50 } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.page-up-page-down-use-page-size",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L318",
+      "upstreamTest": "Slider > keyboard interactions > (page up/down, ltr) moves the slider in the correct direction",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": 60 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": 50 } }
+      ],
+      "notes": "Default page size is one tenth of the range (10 on a 0-100 slider)."
+    },
+    {
+      "id": "slider.react-aria.home-and-end-jump-to-extremes",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L320",
+      "upstreamTest": "Slider > keyboard interactions > (home/end, ltr) moves the slider in the correct direction",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "Home" },
+        { "expect": { "value": 0 } },
+        { "event": "key", "target": "thumb:0", "key": "End" },
+        { "expect": { "value": 100 } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.step-size-respected-for-arrows-and-page-keys",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L362",
+      "upstreamTest": "Slider > keyboard interactions > (left/right arrows, ltr) respects the step size",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 40, "step": 20, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 60 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 40 } },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": 60 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": 40 } }
+      ],
+      "notes": "Page size is snapped to a multiple of the step, so PageUp moves 20, not 10."
+    },
+    {
+      "id": "slider.react-aria.page-size-snaps-to-multiple-of-step",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L378",
+      "upstreamTest": "Slider > keyboard interactions > (left/right arrows, ltr) sets page size to a multiple of step",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 230, "step": 10 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 60 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 50 } },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": 70 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": 50 } }
+      ],
+      "notes": "Raw page size 230/10 = 23 snaps down to 20."
+    },
+    {
+      "id": "slider.react-aria.page-size-snaps-when-step-below-min",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L395",
+      "upstreamTest": "Slider > keyboard interactions > sets page size to a multiple of step (scenario: step is less than min)",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 60, "min": 50, "max": 75, "step": 2 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 62 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 60 } },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": 62 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": 60 } }
+      ],
+      "notes": "Raw page size 25/10 = 2.5 snaps to 2."
+    },
+    {
+      "id": "slider.react-aria.page-size-snaps-when-step-above-max",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L415",
+      "upstreamTest": "Slider > keyboard interactions > sets page size to a multiple of step (scenario: step is greater than max)",
+      "apg": "keyboard",
+      "config": {
+        "thumbs": 1,
+        "value": -40,
+        "min": -50,
+        "max": -15,
+        "step": 2
+      },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": -38 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": -40 } },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": -36 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": -40 } }
+      ],
+      "notes": "Raw page size 35/10 = 3.5 snaps to 4."
+    },
+    {
+      "id": "slider.react-aria.arrow-left-clamped-at-min",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L435",
+      "upstreamTest": "Slider > keyboard interactions > (left/right arrows, ltr) is clamped by min/max",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 0, "min": -1, "max": 1 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": -1 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": -1 } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.vertical-arrow-mapping",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L343",
+      "upstreamTest": "Slider > keyboard interactions > moves the slider in the correct direction orientation vertical",
+      "apg": "keyboard",
+      "config": {
+        "thumbs": 1,
+        "value": 50,
+        "orientation": "vertical",
+        "min": 0,
+        "max": 100
+      },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 51 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 50 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowUp" },
+        { "expect": { "value": 51 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowDown" },
+        { "expect": { "value": 50 } }
+      ],
+      "notes": "For vertical orientation all four arrows keep their LTR meaning; orientation does not flip Up/Down."
+    },
+    {
+      "id": "slider.react-aria.pointer-track-click-moves-thumb",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Slider.test.js#L367",
+      "upstreamTest": "Slider > should support clicking on the track to move the thumb",
+      "apg": "pointer",
+      "config": { "thumbs": 1, "value": 0, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "pointerdown", "target": "track", "position": 0.2 },
+        { "event": "pointerup", "target": "track", "position": 0.2 },
+        { "expect": { "value": 20, "events": { "onChange": [[20]] } } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.pointer-drag-thumb-clamps-to-bounds",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L463",
+      "upstreamTest": "Slider > mouse interactions > can click and drag handle",
+      "apg": "pointer",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "pointerdown", "target": "thumb:0", "position": 0.5 },
+        { "event": "pointermove", "target": "thumb:0", "position": 0.1 },
+        { "expect": { "value": 10 } },
+        { "event": "pointermove", "target": "thumb:0", "position": -0.1 },
+        { "expect": { "value": 0 } },
+        { "event": "pointermove", "target": "thumb:0", "position": 1.2 },
+        { "expect": { "value": 100 } },
+        { "event": "pointerup", "target": "thumb:0", "position": 1.2 },
+        { "expect": { "events": { "onChangeEnd": [[100]] } } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.disabled-blocks-pointer-and-focus",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L488",
+      "upstreamTest": "Slider > mouse interactions > cannot click and drag handle when disabled",
+      "apg": "extension",
+      "config": {
+        "thumbs": 1,
+        "value": 50,
+        "min": 0,
+        "max": 100,
+        "disabled": true
+      },
+      "steps": [
+        { "event": "pointerdown", "target": "thumb:0", "position": 0.5 },
+        { "event": "pointermove", "target": "thumb:0", "position": 0.1 },
+        { "event": "pointerup", "target": "thumb:0", "position": 0.1 },
+        {
+          "expect": { "value": 50, "focus": null, "events": { "onChange": [] } }
+        }
+      ]
+    },
+    {
+      "id": "slider.react-aria.touch-ignores-second-pointer-during-drag",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/@adobe/react-spectrum/test/slider/Slider.test.tsx#L578",
+      "upstreamTest": "Slider > touch interactions > doesn't jump to second touch on track while already dragging",
+      "apg": "pointer",
+      "config": { "thumbs": 1, "value": 50, "min": 0, "max": 100 },
+      "steps": [
+        {
+          "event": "pointerdown",
+          "target": "thumb:0",
+          "position": 0.5,
+          "pointerId": 1
+        },
+        {
+          "event": "pointerdown",
+          "target": "track",
+          "position": 0.6,
+          "pointerId": 2
+        },
+        {
+          "event": "pointermove",
+          "target": "track",
+          "position": 0.7,
+          "pointerId": 2
+        },
+        {
+          "event": "pointerup",
+          "target": "track",
+          "position": 0.7,
+          "pointerId": 2
+        },
+        { "expect": { "value": 50 } },
+        {
+          "event": "pointermove",
+          "target": "thumb:0",
+          "position": 0.3,
+          "pointerId": 1
+        },
+        { "expect": { "value": 30 } }
+      ],
+      "notes": "Upstream uses touch identifiers; ported as pointer ids, second pointer is ignored while the first drag is active."
+    },
+    {
+      "id": "slider.react-aria.thumb-drag-emits-change-and-change-end",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/slider/useSliderThumb.test.js#L375",
+      "upstreamTest": "useSliderThumb > interactions on thumbs, where track contains thumbs > using PointerEvents > can be moved by dragging",
+      "apg": "pointer",
+      "config": { "thumbs": 1, "value": 10, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "pointerdown", "target": "thumb:0", "position": 0.1 },
+        { "event": "pointermove", "target": "thumb:0", "position": 0.2 },
+        { "expect": { "value": 20, "events": { "onChange": [[20]] } } },
+        { "event": "pointermove", "target": "thumb:0", "position": 0.4 },
+        { "event": "pointerup", "target": "thumb:0", "position": 0.4 },
+        {
+          "expect": {
+            "value": 40,
+            "events": { "onChange": [[20], [40]], "onChangeEnd": [[40]] }
+          }
+        }
+      ]
+    },
+    {
+      "id": "slider.react-aria.keyboard-at-min-no-change-but-change-end",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/slider/useSliderThumb.test.js#L506",
+      "upstreamTest": "useSliderThumb > using KeyEvents > can be moved with keys at the beginning of the slider",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 0, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        {
+          "expect": {
+            "value": 0,
+            "events": { "onChange": [], "onChangeEnd": [[0]] }
+          }
+        },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        {
+          "expect": {
+            "value": 1,
+            "events": { "onChange": [[1]], "onChangeEnd": [[0], [1]] }
+          }
+        }
+      ]
+    },
+    {
+      "id": "slider.react-aria.keyboard-at-max-no-change-but-change-end",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/slider/useSliderThumb.test.js#L532",
+      "upstreamTest": "useSliderThumb > using KeyEvents > can be moved with keys at the end of the slider",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 100, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        {
+          "expect": {
+            "value": 100,
+            "events": { "onChange": [], "onChangeEnd": [[100]] }
+          }
+        },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        {
+          "expect": {
+            "value": 99,
+            "events": { "onChange": [[99]], "onChangeEnd": [[100], [99]] }
+          }
+        }
+      ]
+    },
+    {
+      "id": "slider.react-aria.vertical-keyboard-arrows",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria/test/slider/useSliderThumb.test.js#L558",
+      "upstreamTest": "useSliderThumb > using KeyEvents > can be moved with keys (vertical)",
+      "apg": "keyboard",
+      "config": {
+        "thumbs": 1,
+        "value": 10,
+        "orientation": "vertical",
+        "min": 0,
+        "max": 100
+      },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "ArrowRight" },
+        { "expect": { "value": 11 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowUp" },
+        { "expect": { "value": 12 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowDown" },
+        { "expect": { "value": 11 } },
+        { "event": "key", "target": "thumb:0", "key": "ArrowLeft" },
+        { "expect": { "value": 10 } }
+      ]
+    },
+    {
+      "id": "slider.react-aria.page-up-page-down-repeat",
+      "upstream": "https://github.com/adobe/react-spectrum/blob/99e610236887da619ad9d54a1cd87983166c043d/packages/react-aria-components/test/Slider.test.js#L352",
+      "upstreamTest": "Slider > should support repeat keydown events when holding Page Up/Page Down",
+      "apg": "keyboard",
+      "config": { "thumbs": 1, "value": 20, "min": 0, "max": 100 },
+      "steps": [
+        { "event": "focus", "target": "thumb:0" },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "event": "key", "target": "thumb:0", "key": "PageUp" },
+        { "expect": { "value": 50 } },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "event": "key", "target": "thumb:0", "key": "PageDown" },
+        { "expect": { "value": 20 } }
+      ],
+      "notes": "Held-key repeat is modelled as three separate key events; default page size 10 on a 0-100 slider."
+    }
+  ]
+}