@motion-proto/live-tokens 0.97.0 → 0.98.2

package/src/testing-js/{chunk-SHBYZUPD.js → chunk-5HNZHIHG.js}

@@ -211,6 +211,18 @@ var buttonContract = {
         action: { kind: "click", part: "root" },
         expect: { kind: "focused", part: "root", value: true }
       },
+      {
+        name: "Enter activates a button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Enter" },
+        expect: { kind: "activated", part: "root" }
+      },
+      {
+        name: "Space activates a button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Space" },
+        expect: { kind: "activated", part: "root" }
+      },
       {
         name: "a disabled button refuses focus",
         state: "disabled",
@@ -628,15 +640,27 @@ var collapsibleSectionContract = {
   interaction: {
     part: "toggleButton",
     role: "button",
-    // No activation case: CollapsibleSectionEditor's preview drives `open`
-    // off the active state tab and never wires `ontoggle` back to it, so
-    // clicking the real button here can't move `aria-expanded` (same
+    // Activation reads as a click on the button: CollapsibleSectionEditor's
+    // preview drives `open` off the active state tab and never wires
+    // `ontoggle` back to it, so `aria-expanded` never moves here (same
     // constraint documented on ToggleEditor in toggle.ts).
     cases: [
       {
         name: "clicking the toggle button focuses it",
         action: { kind: "click", part: "toggleButton" },
         expect: { kind: "focused", part: "toggleButton", value: true }
+      },
+      {
+        name: "Enter activates the toggle button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "toggleButton", key: "Enter" },
+        expect: { kind: "activated", part: "toggleButton" }
+      },
+      {
+        name: "Space activates the toggle button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "toggleButton", key: "Space" },
+        expect: { kind: "activated", part: "toggleButton" }
       }
     ]
   },
@@ -877,6 +901,12 @@ var dialogContract = {
         name: "clicking the close icon focuses it",
         action: { kind: "click", part: "closeButton" },
         expect: { kind: "focused", part: "closeButton", value: true }
+      },
+      {
+        name: "Enter activates the close icon",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "closeButton", key: "Enter" },
+        expect: { kind: "activated", part: "closeButton" }
       }
     ]
   },
@@ -888,6 +918,12 @@ var dialogContract = {
         action: { kind: "click", part: "closeButton" },
         expect: { kind: "callback", prop: "onclose", args: [] }
       },
+      {
+        name: "Escape asks to close",
+        props: { open: true, inline: true, title: "Confirm" },
+        action: { kind: "keydown", part: "closeButton", key: "Escape" },
+        expect: { kind: "callback", prop: "onclose", args: [] }
+      },
       {
         name: "title drives the heading",
         props: { open: true, inline: true, title: "Confirm" },
@@ -996,6 +1032,18 @@ var iconButtonContract = {
         name: "clicking an icon button focuses it",
         action: { kind: "click", part: "root" },
         expect: { kind: "focused", part: "root", value: true }
+      },
+      {
+        name: "Enter activates an icon button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Enter" },
+        expect: { kind: "activated", part: "root" }
+      },
+      {
+        name: "Space activates an icon button",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Space" },
+        expect: { kind: "activated", part: "root" }
       }
     ]
   },
@@ -1207,6 +1255,22 @@ var imageLightboxContract = {
         name: "clicking the next chevron focuses it",
         action: { kind: "click", part: "nextButton" },
         expect: { kind: "focused", part: "nextButton", value: true }
+      },
+      // `setup: []` replaces the view's thumb click, which would land on the
+      // open overlay and close the lightbox before the key does.
+      {
+        name: "Escape closes the lightbox",
+        rule: "a11y-keyboard",
+        setup: [],
+        action: { kind: "press", part: "closeButton", key: "Escape" },
+        expect: { kind: "attribute", part: "thumb", name: "aria-expanded", value: "false" }
+      },
+      {
+        name: "Enter on the tile opens the lightbox",
+        rule: "a11y-keyboard",
+        setup: [],
+        action: { kind: "press", part: "thumb", key: "Enter" },
+        expect: { kind: "attribute", part: "thumb", name: "aria-expanded", value: "true" }
       }
     ]
   },
@@ -1485,6 +1549,7 @@ var inputContract = {
     },
     observe: { part: "field", css: "borderTopWidth", variable: "--input-border-width" }
   },
+  boundaries: [{ part: "field", label: "Field" }],
   interaction: {
     part: "field",
     role: "textbox",
@@ -1499,6 +1564,12 @@ var inputContract = {
         action: { kind: "click", part: "toggleButton" },
         expect: { kind: "attribute", part: "toggleButton", name: "aria-pressed", value: "true" }
       },
+      {
+        name: "Space activates the reveal toggle",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "toggleButton", key: "Space" },
+        expect: { kind: "activated", part: "toggleButton" }
+      },
       {
         name: "a disabled field refuses focus",
         state: "disabled",
@@ -1551,6 +1622,7 @@ var menuSelectContract = {
   parts: {
     root: ".menuselect",
     item: ".menuselect-item",
+    secondItem: ".menuselect > li:nth-of-type(2) > .menuselect-item",
     icon: ".menuselect-item .menuselect-icon",
     label: ".menuselect-item .menuselect-label",
     selectedItem: ".menuselect-item.selected",
@@ -1649,6 +1721,18 @@ var menuSelectContract = {
         name: "clicking an item selects it",
         action: { kind: "click", part: "item" },
         expect: { kind: "attribute", part: "item", name: "aria-selected", value: "true" }
+      },
+      {
+        name: "Enter selects an item",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "item", key: "Enter" },
+        expect: { kind: "activated", part: "item" }
+      },
+      {
+        name: "arrow down moves focus to the next item",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "item", key: "ArrowDown" },
+        expect: { kind: "focused", part: "secondItem", value: true }
       }
     ]
   },
@@ -1971,7 +2055,8 @@ var radioButtonContract = {
     root: ".radio-button",
     dot: ".radio-dot",
     dotFill: { selector: ".radio-dot-fill" },
-    label: ".radio-label"
+    label: ".radio-label",
+    secondOption: ".radio-button:nth-of-type(2)"
   },
   properties: [
     { paints: statePaints4("default", true) },
@@ -2014,14 +2099,27 @@ var radioButtonContract = {
     },
     observe: { part: "dot", css: "borderTopWidth", variable: "--radiobutton-default-dot-border-width" }
   },
+  boundaries: [{ part: "dot", label: "Circle" }],
   interaction: {
     part: "root",
-    role: "button",
+    role: "radio",
     cases: [
       {
         name: "clicking a radio option focuses it",
         action: { kind: "click", part: "root" },
         expect: { kind: "focused", part: "root", value: true }
+      },
+      {
+        name: "Space selects a radio option",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Space" },
+        expect: { kind: "activated", part: "root" }
+      },
+      {
+        name: "arrow down moves focus to the next radio option",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "ArrowDown" },
+        expect: { kind: "focused", part: "secondOption", value: true }
       }
     ]
   },
@@ -2186,6 +2284,7 @@ var segmentedControlContract = {
     root: ".segmented-control",
     segment: ".segment",
     icon: ".segment i",
+    secondSegment: ".segment:nth-of-type(2)",
     selectedSegment: ".segment.selected",
     selectedIcon: ".segment.selected i",
     hairline: ".segment-hairline"
@@ -2339,6 +2438,10 @@ var segmentedControlContract = {
     },
     observe: { part: "root", css: "borderTopWidth", variable: "--segmentedcontrol-bar-border-width" }
   },
+  boundaries: [
+    { part: "root", label: "Bar" },
+    { part: "selectedSegment", label: "Selected option" }
+  ],
   interaction: {
     part: "segment",
     role: "radio",
@@ -2348,6 +2451,18 @@ var segmentedControlContract = {
         action: { kind: "click", part: "segment" },
         expect: { kind: "attribute", part: "segment", name: "aria-checked", value: "true" }
       },
+      {
+        name: "Space checks a segment",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "segment", key: "Space" },
+        expect: { kind: "activated", part: "segment" }
+      },
+      {
+        name: "arrow right moves focus to the next segment",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "segment", key: "ArrowRight" },
+        expect: { kind: "focused", part: "secondSegment", value: true }
+      },
       {
         name: "a disabled control refuses focus",
         state: "disabled option",
@@ -2583,6 +2698,12 @@ var sideNavigationContract = {
     },
     observe: { part: "root", css: "borderRightWidth", variable: "--sidenavigation-panel-border-width" }
   },
+  boundaries: [
+    { part: "title", label: "Selected title", when: ".selected" },
+    { part: "sectionSelected", label: "Selected section" },
+    { part: "itemSelected", label: "Selected item" },
+    { part: "footer", label: "Selected footer", when: ".selected, .force-footer-selected .sn-footer" }
+  ],
   interaction: {
     part: "toggle",
     role: "button",
@@ -2591,6 +2712,12 @@ var sideNavigationContract = {
         name: "clicking the toggle collapses the rail",
         action: { kind: "click", part: "toggle" },
         expect: { kind: "attribute", part: "toggle", name: "aria-expanded", value: "false" }
+      },
+      {
+        name: "Enter activates the toggle",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "toggle", key: "Enter" },
+        expect: { kind: "activated", part: "toggle" }
       }
     ]
   },
@@ -2752,6 +2879,10 @@ var sliderContract = {
     },
     observe: { part: "track", css: "backgroundColor", variable: "--slider-single-track-surface" }
   },
+  boundaries: [
+    { part: "track", label: "Track" },
+    { part: "thumb", label: "Thumb" }
+  ],
   interaction: {
     part: "input",
     role: "slider",
@@ -2781,6 +2912,18 @@ var sliderContract = {
         action: { kind: "dragTo", part: "thumb", along: "track", fraction: 0.5 },
         expect: { kind: "focused", part: "input", value: true }
       },
+      {
+        name: "Page Up raises the value",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "input", key: "PageUp" },
+        expect: { kind: "valueMoves", part: "input", direction: "up" }
+      },
+      {
+        name: "End takes the value to the ceiling",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "input", key: "End" },
+        expect: { kind: "valueBecomes", part: "input", value: "100" }
+      },
       {
         name: "a disabled slider ignores the arrow keys",
         state: "disabled",
@@ -2873,7 +3016,8 @@ var tabBarContract = {
     // Position-stable: clicking `tab` (".tab:not(.selected)") makes that very
     // tab selected, which would invalidate that selector out from under a
     // focus check re-resolved after the click.
-    secondTab: ".tab:nth-of-type(2)"
+    secondTab: ".tab:nth-of-type(2)",
+    firstTab: ".tab:nth-of-type(1)"
   },
   properties: [
     {
@@ -2939,15 +3083,28 @@ var tabBarContract = {
     },
     observe: { part: "tab", css: "borderTopWidth", variable: "--tabbar-default-tab-border-width" }
   },
+  boundaries: [{ part: "tabSelected", label: "Selected tab" }],
   interaction: {
     part: "secondTab",
-    role: "button",
+    role: "tab",
     cases: [
       {
         name: "clicking a tab focuses it",
         action: { kind: "click", part: "secondTab" },
         expect: { kind: "focused", part: "secondTab", value: true }
       },
+      {
+        name: "Enter activates a tab",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "secondTab", key: "Enter" },
+        expect: { kind: "activated", part: "secondTab" }
+      },
+      {
+        name: "arrow right moves focus to the next tab",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "firstTab", key: "ArrowRight" },
+        expect: { kind: "focused", part: "secondTab", value: true }
+      },
       {
         name: "a disabled tab refuses focus",
         state: "disabled tab",
@@ -2975,6 +3132,11 @@ var tabBarContract = {
         props: { tabs: [behaviorTabs[0], { ...behaviorTabs[1], disabled: true }], value: "one" },
         action: { kind: "click", part: "secondTab" },
         expect: { kind: "no-callback", prop: "onchange" }
+      },
+      {
+        name: "an icon-only tab takes its label as its name",
+        props: { tabs: behaviorTabs, value: "one", iconOnly: true },
+        expect: { kind: "attribute", part: "secondTab", name: "aria-label", value: "Two" }
       }
     ]
   },
@@ -3176,21 +3338,30 @@ var toggleContract = {
     },
     observe: { part: "track", css: "borderTopWidth", variable: "--toggle-track-border-width" }
   },
+  boundaries: [
+    { part: "track", label: "Track" },
+    { part: "thumb", label: "Thumb" }
+  ],
   interaction: {
     part: "root",
     role: "switch",
-    // No activation case: Toggle.svelte is controlled (`onclick` only calls
-    // `onchange?.(!checked)`, it never flips `checked` itself), and
-    // ToggleEditor.svelte's preview drives `checked` off the state tab
-    // without wiring `onchange` back to it. Clicking the real control in this
-    // demo has no observable effect on `aria-checked`, so an activation case
-    // would assert a no-op rather than the switch's behavior.
+    // Activation reads as a click on the switch: Toggle.svelte is controlled
+    // (`onclick` only calls `onchange?.(!checked)`, it never flips `checked`
+    // itself), and ToggleEditor.svelte's preview drives `checked` off the
+    // state tab without wiring `onchange` back to it, so `aria-checked` never
+    // moves in this demo.
     cases: [
       {
         name: "clicking a toggle focuses it",
         action: { kind: "click", part: "root" },
         expect: { kind: "focused", part: "root", value: true }
       },
+      {
+        name: "Space activates a toggle",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "root", key: "Space" },
+        expect: { kind: "activated", part: "root" }
+      },
       {
         name: "a disabled toggle refuses focus",
         state: "disabled",
@@ -3418,6 +3589,19 @@ var videoLightboxContract = {
         name: "clicking the still opens the lightbox",
         action: { kind: "click", part: "trigger" },
         expect: { kind: "attribute", part: "trigger", name: "aria-expanded", value: "true" }
+      },
+      // The click case above leaves the lightbox open with focus inside it.
+      {
+        name: "Escape closes the lightbox",
+        rule: "a11y-keyboard",
+        action: { kind: "press", key: "Escape" },
+        expect: { kind: "attribute", part: "trigger", name: "aria-expanded", value: "false" }
+      },
+      {
+        name: "Enter on the still opens the lightbox",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "trigger", key: "Enter" },
+        expect: { kind: "attribute", part: "trigger", name: "aria-expanded", value: "true" }
       }
     ]
   },
@@ -3644,6 +3828,19 @@ var slidePagerContract = {
         name: "the next chevron moves the frame to the next slide",
         action: { kind: "click", part: "nextControl" },
         expect: { kind: "attribute", part: "stage", name: "aria-label", value: "Open slide 3 full screen" }
+      },
+      {
+        name: "Escape closes the full-screen slide",
+        rule: "a11y-keyboard",
+        setup: [{ kind: "click", part: "stage" }],
+        action: { kind: "press", key: "Escape" },
+        expect: { kind: "attribute", part: "stage", name: "aria-expanded", value: "false" }
+      },
+      {
+        name: "Enter on the frame opens the full-screen slide",
+        rule: "a11y-keyboard",
+        action: { kind: "press", part: "stage", key: "Enter" },
+        expect: { kind: "attribute", part: "stage", name: "aria-expanded", value: "true" }
       }
     ]
   },
@@ -3735,4 +3932,4 @@ export {
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-SHBYZUPD.js.map
+//# sourceMappingURL=chunk-5HNZHIHG.js.map