@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/Skeleton/Skeleton.tsx

@@ -39,9 +39,36 @@ const STAGGER_TIME = 100;
 // Animation Keyframes
 // =============================================================================
 
+/**
+ * The pulse climbs from 0.25 to 0.925 opacity in ten equal steps, then plays
+ * back down (`alternate`). The steps are written out as holds joined by
+ * 0.01% ramps, with a linear timing function, rather than produced by a
+ * `steps()` timing function: WebKit never runs a `steps()` animation on the
+ * compositor, so Safari would repaint the pulse on the main thread and freeze
+ * it whenever a script runs. These keyframes give the same values at the same
+ * times, which every engine can animate off the main thread.
+ */
 const skeletonFade = stylex.keyframes({
   '0%': {opacity: 0.25},
-  '100%': {opacity: 1},
+  '9.99%': {opacity: 0.25},
+  '10%': {opacity: 0.325},
+  '19.99%': {opacity: 0.325},
+  '20%': {opacity: 0.4},
+  '29.99%': {opacity: 0.4},
+  '30%': {opacity: 0.475},
+  '39.99%': {opacity: 0.475},
+  '40%': {opacity: 0.55},
+  '49.99%': {opacity: 0.55},
+  '50%': {opacity: 0.625},
+  '59.99%': {opacity: 0.625},
+  '60%': {opacity: 0.7},
+  '69.99%': {opacity: 0.7},
+  '70%': {opacity: 0.775},
+  '79.99%': {opacity: 0.775},
+  '80%': {opacity: 0.85},
+  '89.99%': {opacity: 0.85},
+  '90%': {opacity: 0.925},
+  '100%': {opacity: 0.925},
 });
 
 // =============================================================================
@@ -78,7 +105,8 @@ const styles = stylex.create({
       default: skeletonFade,
       '@media (prefers-reduced-motion: reduce)': 'none',
     },
-    animationTimingFunction: 'steps(10, end)',
+    // Linear between the keyframes' holds; see skeletonFade.
+    animationTimingFunction: 'linear',
   },
 });
 

package/src/Slider/Slider.fr10.test.tsx

@@ -57,3 +57,37 @@ describe('Slider range mode prop targets', () => {
     expect(onPointerDown).toHaveBeenCalledOnce();
   });
 });
+
+describe("Slider keeps a caller's aria-labelledby", () => {
+  it('names the thumb by its label and then the caller ids', () => {
+    render(
+      <>
+        <span id="caller-name">Speaker</span>
+        <Slider
+          label="Volume"
+          value={50}
+          onChange={() => {}}
+          aria-labelledby="caller-name"
+        />
+      </>,
+    );
+    expect(
+      screen.getByRole('slider', {name: 'Volume Speaker'}),
+    ).toBeInTheDocument();
+  });
+
+  it('names the range group by its label and then the caller ids', () => {
+    render(
+      <>
+        <span id="caller-name">USD</span>
+        <Slider
+          label="Price"
+          value={[20, 80]}
+          onChange={() => {}}
+          aria-labelledby="caller-name"
+        />
+      </>,
+    );
+    expect(screen.getByRole('group', {name: 'Price USD'})).toBeInTheDocument();
+  });
+});

package/src/Slider/Slider.test.tsx

@@ -19,6 +19,7 @@ import {
 } from '../__tests__/pressState';
 import * as stylex from '@stylexjs/stylex';
 import {Slider} from './Slider';
+import {FormLayout} from '../FormLayout';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {
   __resetInteractionModalityForTest,
@@ -1330,6 +1331,177 @@ describe('Slider', () => {
   });
 });
 
+describe('one pointer per drag', () => {
+  // valueDisplay="none" keeps the thumb a direct child of the track, so the
+  // mocked rect lands on it: 200 px wide, thumbs travel 10 px (0) to 190 px
+  // (100), value = (x - 10) / 1.8.
+  function ControlledSlider({
+    id,
+    onChangeEnd,
+  }: {
+    id: string;
+    onChangeEnd?: (value: number) => void;
+  }) {
+    const [value, setValue] = useState(50);
+    return (
+      <Slider
+        label={id}
+        value={value}
+        min={0}
+        max={100}
+        valueDisplay="none"
+        onChange={setValue}
+        onChangeEnd={onChangeEnd}
+      />
+    );
+  }
+
+  function trackOf(thumb: HTMLElement): HTMLElement {
+    const track = thumb.parentElement!;
+    track.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+    return track;
+  }
+
+  it('ignores a second finger that lands, moves or lifts during a drag', () => {
+    const onChangeEnd = vi.fn();
+    render(<ControlledSlider id="Volume" onChangeEnd={onChangeEnd} />);
+    const thumb = screen.getByRole('slider');
+    const track = trackOf(thumb);
+
+    fireEvent.pointerDown(track, {clientX: 100, clientY: 10, pointerId: 1});
+    fireEvent.pointerDown(track, {clientX: 28, clientY: 10, pointerId: 2});
+    expect(thumb).toHaveAttribute('aria-valuenow', '50');
+
+    fireEvent.pointerMove(track, {clientX: 136, clientY: 10, pointerId: 1});
+    fireEvent.pointerMove(track, {clientX: 46, clientY: 10, pointerId: 2});
+    expect(thumb).toHaveAttribute('aria-valuenow', '70');
+
+    // The second finger lifting does not end the first finger's drag.
+    fireEvent.pointerUp(track, {clientX: 46, clientY: 10, pointerId: 2});
+    expect(onChangeEnd).not.toHaveBeenCalled();
+    expect(declaresPressedOverlay(thumb)).toBe(true);
+
+    fireEvent.pointerMove(track, {clientX: 154, clientY: 10, pointerId: 1});
+    fireEvent.pointerUp(track, {clientX: 154, clientY: 10, pointerId: 1});
+    expect(thumb).toHaveAttribute('aria-valuenow', '80');
+    expect(onChangeEnd).toHaveBeenCalledOnce();
+    expect(onChangeEnd).toHaveBeenCalledWith(80);
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+  });
+
+  it('ends the drag when its pointer capture is lost without an up', () => {
+    const onChangeEnd = vi.fn();
+    render(<ControlledSlider id="Volume" onChangeEnd={onChangeEnd} />);
+    const thumb = screen.getByRole('slider');
+    const track = trackOf(thumb);
+
+    fireEvent.pointerDown(track, {clientX: 136, clientY: 10, pointerId: 1});
+    fireEvent.lostPointerCapture(track, {pointerId: 1});
+    expect(onChangeEnd).toHaveBeenCalledOnce();
+    expect(onChangeEnd).toHaveBeenCalledWith(70);
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+
+    // The slider answers the next press.
+    fireEvent.pointerDown(track, {clientX: 28, clientY: 10, pointerId: 3});
+    expect(thumb).toHaveAttribute('aria-valuenow', '10');
+  });
+
+  it('ends the drag when its control node is replaced mid-drag and the capture is lost', () => {
+    // A FormLayout direction change re-renders the field in another layout,
+    // replacing the control node while the drag holds it. The browser then
+    // fires lostpointercapture at the document, not at the removed node.
+    const onChangeEnd = vi.fn();
+    function InLayout({
+      direction,
+    }: {
+      direction: 'vertical' | 'horizontal-labels';
+    }) {
+      return (
+        <FormLayout direction={direction}>
+          <ControlledSlider id="Volume" onChangeEnd={onChangeEnd} />
+        </FormLayout>
+      );
+    }
+    const {rerender} = render(<InLayout direction="vertical" />);
+    const before = trackOf(screen.getByRole('slider'));
+    fireEvent.pointerDown(before, {clientX: 136, clientY: 10, pointerId: 1});
+
+    rerender(<InLayout direction="horizontal-labels" />);
+    fireEvent.lostPointerCapture(document, {pointerId: 1});
+    expect(onChangeEnd).toHaveBeenCalledOnce();
+
+    // The slider answers the next press on whichever node it renders now.
+    const thumb = screen.getByRole('slider');
+    const after = trackOf(thumb);
+    fireEvent.pointerDown(after, {clientX: 28, clientY: 10, pointerId: 3});
+    expect(thumb).toHaveAttribute('aria-valuenow', '10');
+  });
+
+  it('holds a document listener only while a drag is in progress', () => {
+    const add = vi.spyOn(document, 'addEventListener');
+    const remove = vi.spyOn(document, 'removeEventListener');
+    const lostCapture = (spy: typeof add) =>
+      spy.mock.calls.filter(([type]) => type === 'lostpointercapture');
+    const {unmount} = render(<ControlledSlider id="Volume" />);
+    const track = trackOf(screen.getByRole('slider'));
+    // Idle: no document listener.
+    expect(lostCapture(add)).toHaveLength(0);
+
+    fireEvent.pointerDown(track, {clientX: 136, clientY: 10, pointerId: 1});
+    expect(lostCapture(add)).toHaveLength(1);
+    const listener = lostCapture(add)[0][1];
+    fireEvent.pointerUp(track, {clientX: 136, clientY: 10, pointerId: 1});
+    expect(lostCapture(remove).map(([, fn]) => fn)).toEqual([listener]);
+
+    // A slider unmounted mid-drag removes its listener too.
+    fireEvent.pointerDown(track, {clientX: 28, clientY: 10, pointerId: 2});
+    const second = lostCapture(add)[1][1];
+    unmount();
+    expect(lostCapture(remove).map(([, fn]) => fn)).toEqual([listener, second]);
+    add.mockRestore();
+    remove.mockRestore();
+  });
+
+  it('lets two fingers drag two sliders at once', () => {
+    render(
+      <>
+        <ControlledSlider id="Treble" />
+        <ControlledSlider id="Bass" />
+      </>,
+    );
+    const treble = screen.getByRole('slider', {name: 'Treble'});
+    const bass = screen.getByRole('slider', {name: 'Bass'});
+    const trebleTrack = trackOf(treble);
+    const bassTrack = trackOf(bass);
+
+    fireEvent.pointerDown(trebleTrack, {
+      clientX: 100,
+      clientY: 10,
+      pointerId: 1,
+    });
+    fireEvent.pointerDown(bassTrack, {clientX: 100, clientY: 10, pointerId: 2});
+    fireEvent.pointerMove(trebleTrack, {
+      clientX: 154,
+      clientY: 10,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(bassTrack, {clientX: 28, clientY: 10, pointerId: 2});
+
+    expect(treble).toHaveAttribute('aria-valuenow', '80');
+    expect(bass).toHaveAttribute('aria-valuenow', '10');
+  });
+});
+
 describe('pressed state', () => {
   it('paints the pressed overlay on the thumb for as long as it is dragged, from wherever the press lands', () => {
     render(

package/src/Slider/Slider.tsx

@@ -4,8 +4,8 @@
 
 /**
  * @file Slider.tsx
- * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip, VisuallyHidden
- * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring
+ * @input Uses React, useId, useRef, useCallback, useEffect, Field, Tooltip, useTooltip, VisuallyHidden
+ * @output Exports Slider and its props; unfilled marks share the track token; modifier-only key presses do not restore the thumb focus ring; a drag belongs to the pointer that started it
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -17,6 +17,7 @@
  */
 
 import {
+  useEffect,
   useId,
   useMemo,
   useRef,
@@ -43,6 +44,7 @@ import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
 import {mergeProps, rtlStyles} from '../utils';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
+import {joinAriaIDs} from '../utils/inputAria';
 import {
   getInteractionModality,
   useInteractionModalityTracking,
@@ -506,6 +508,7 @@ export function Slider({ref, ...props}: SliderProps) {
     onFocus,
     onBlur,
     id: idProp,
+    'aria-labelledby': ariaLabelledByProp,
     'aria-describedby': ariaDescribedByProp,
     ...restWithRange
   } = props;
@@ -736,12 +739,47 @@ export function Slider({ref, ...props}: SliderProps) {
   );
 
   // Pointer handlers
+  // The pointer that owns the drag in progress. A control tracks one touch
+  // (UIKit's `isMultipleTouchEnabled` is false by default): another finger
+  // landing on the slider, moving or lifting never takes over or ends the
+  // drag the first one owns.
+  const dragPointerRef = useRef<number | null>(null);
+
+  // Removes the document lostpointercapture listener of the drag in progress.
+  // It exists only while a drag does, so an idle slider holds no document
+  // listener (react-component-runtime INV5).
+  const detachLostCaptureRef = useRef<(() => void) | null>(null);
+
+  const endDrag = useCallback(
+    (pointerId: number) => {
+      if (
+        draggingThumbRef.current !== null &&
+        pointerId === dragPointerRef.current
+      ) {
+        detachLostCaptureRef.current?.();
+        detachLostCaptureRef.current = null;
+        draggingThumbRef.current = null;
+        dragPointerRef.current = null;
+        setDraggingThumb(null);
+        fireChangeEnd();
+      }
+    },
+    [fireChangeEnd],
+  );
+
+  // A slider unmounted mid-drag leaves no listener behind.
+  useEffect(() => () => detachLostCaptureRef.current?.(), []);
+
   const handlePointerDown = useCallback(
     (e: PointerEvent<HTMLDivElement>) => {
       if (isDisabled) {
         return;
       }
       e.preventDefault();
+      if (draggingThumbRef.current !== null) {
+        return;
+      }
+      dragPointerRef.current = e.pointerId;
 
       // If the click originated from a mark element, snap to that mark's value
       // instead of calculating from pointer position (avoids off-by-one when
@@ -776,18 +814,36 @@ export function Slider({ref, ...props}: SliderProps) {
       // through the drag.
       setKeyboardFocusThumb(null);
 
+      // A capture lost without an up or a cancel (the browser releases it, or
+      // script does) still ends the drag, so the slider never stays held by a
+      // pointer that is gone. The listener sits on the document, where
+      // lostpointercapture bubbles to and where the browser fires it when the
+      // captured node is removed, so a control node replaced during the drag
+      // (a FormLayout direction change) is still covered. It lives only for
+      // this drag.
+      const doc = (e.currentTarget as HTMLElement).ownerDocument;
+      const onLostCapture = (event: globalThis.PointerEvent) =>
+        endDrag(event.pointerId);
+      doc.addEventListener('lostpointercapture', onLostCapture);
+      detachLostCaptureRef.current = () =>
+        doc.removeEventListener('lostpointercapture', onLostCapture);
+
       if (
         typeof (e.currentTarget as HTMLElement).setPointerCapture === 'function'
       ) {
         (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
       }
     },
-    [isDisabled, getValueFromPosition, getClosestThumb, updateValue],
+    [isDisabled, getValueFromPosition, getClosestThumb, updateValue, endDrag],
   );
 
   const handlePointerMove = useCallback(
     (e: PointerEvent<HTMLDivElement>) => {
-      if (draggingThumbRef.current === null || isDisabled) {
+      if (
+        draggingThumbRef.current === null ||
+        e.pointerId !== dragPointerRef.current ||
+        isDisabled
+      ) {
         return;
       }
       const newVal = getValueFromPosition(e.clientX, e.clientY);
@@ -797,14 +853,8 @@ export function Slider({ref, ...props}: SliderProps) {
   );
 
   const handlePointerUp = useCallback(
-    (_e: PointerEvent<HTMLDivElement>) => {
-      if (draggingThumbRef.current !== null) {
-        draggingThumbRef.current = null;
-        setDraggingThumb(null);
-        fireChangeEnd();
-      }
-    },
-    [fireChangeEnd],
+    (e: PointerEvent<HTMLDivElement>) => endDrag(e.pointerId),
+    [endDrag],
   );
 
   // Keyboard handler
@@ -967,7 +1017,10 @@ export function Slider({ref, ...props}: SliderProps) {
         aria-disabled={isDisabled || undefined}
         aria-invalid={status?.type === 'error' ? true : undefined}
         aria-label={thumbLabel}
-        aria-labelledby={!isRange ? labelID : undefined}
+        // A caller aria-labelledby names the control together with its label.
+        aria-labelledby={
+          !isRange ? joinAriaIDs(labelID, ariaLabelledByProp) : undefined
+        }
         aria-describedby={
           [!isRange ? ariaDescribedByProp : undefined, ariaDescribedBy]
             .filter(Boolean)
@@ -1119,7 +1172,10 @@ export function Slider({ref, ...props}: SliderProps) {
             disabledMessageTooltip.ref,
           )}
           {...(isRange
-            ? {role: 'group', 'aria-labelledby': labelID}
+            ? {
+                role: 'group',
+                'aria-labelledby': joinAriaIDs(labelID, ariaLabelledByProp),
+              }
             : undefined)}
           onPointerDown={after(handlePointerDown, onPointerDown)}
           onPointerMove={after(handlePointerMove, onPointerMove)}

package/src/Slider/__tests__/Slider.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope ^(internal/a11y-spec/src/patterns/slider|internal/a11y-spec/src/harness|packages/core/src/Slider/|apps/storybook/stories/SliderA11y)
 
 /**
  * @file Slider.a11y.chromium.spec.ts