@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/src/TopNav/TopNav.test.tsx

@@ -377,6 +377,33 @@ describe('TopNavHeading', () => {
       );
     });
 
+    it('moves focus one item per arrow key in a NavHeadingMenu (APG menu)', async () => {
+      __resetMenuPressForTest();
+      const user = userEvent.setup();
+      render(
+        <TopNavHeading
+          heading="My App"
+          menu={
+            <NavHeadingMenu>
+              <NavHeadingMenuItem label="One" onClick={() => {}} />
+              <NavHeadingMenuItem label="Two" onClick={() => {}} />
+              <NavHeadingMenuItem label="Three" onClick={() => {}} />
+            </NavHeadingMenu>
+          }
+        />,
+      );
+      await user.click(screen.getByRole('button', {name: 'Open menu'}));
+      const item = (name: string) =>
+        screen.getByRole('menuitem', {name, hidden: true});
+      item('One').focus();
+      fireEvent.keyDown(item('One'), {key: 'ArrowDown'});
+      expect(item('Two')).toHaveFocus();
+      fireEvent.keyDown(item('Two'), {key: 'ArrowDown'});
+      expect(item('Three')).toHaveFocus();
+      fireEvent.keyDown(item('Three'), {key: 'ArrowUp'});
+      expect(item('Two')).toHaveFocus();
+    });
+
     it('after a pointer pick, returns focus to the trigger without a keyboard ring (interaction-modality INV1)', async () => {
       __resetMenuPressForTest();
       const user = userEvent.setup();

package/src/TopNav/TopNavMegaMenu.test.tsx

@@ -9,6 +9,7 @@
  * SYNC: When TopNavMegaMenu changes, update tests to match new behavior
  */
 
+import {createRef} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {describe, it, expect, vi, beforeAll, afterAll, afterEach} from 'vitest';
@@ -1130,3 +1131,23 @@ describe('TopNavMegaMenuItem pass-through props', () => {
     );
   });
 });
+
+describe('TopNavMegaMenu ref', () => {
+  const items = <TopNavMegaMenuItem title="Analytics" href="/analytics" />;
+
+  it('forwards its ref to the trigger button', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<TopNavMegaMenu ref={ref} label="Products" items={items} />);
+    expect(ref.current).toBe(screen.getByRole('button', {name: 'Products'}));
+  });
+
+  it('forwards its ref to the drawer trigger', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMegaMenu ref={ref} label="Products" items={items} />
+      </TopNavRenderContext>,
+    );
+    expect(ref.current).toBe(screen.getByRole('button', {name: /Products/}));
+  });
+});

package/src/TopNav/TopNavMegaMenu.tsx

@@ -378,6 +378,7 @@ export function TopNavMegaMenu({
   if (renderMode === 'drawer') {
     return (
       <DrawerMegaMenu
+        ref={ref}
         label={label}
         items={items}
         featured={featured}
@@ -564,6 +565,7 @@ function DefaultMegaMenu({
 // =============================================================================
 
 function DrawerMegaMenu({
+  ref,
   label,
   items,
   featured,
@@ -572,7 +574,7 @@ function DrawerMegaMenu({
   style,
   onClick: onClickProp,
   ...rest
-}: Pick<TopNavMegaMenuProps, 'label' | 'items' | 'featured'> &
+}: Pick<TopNavMegaMenuProps, 'ref' | 'label' | 'items' | 'featured'> &
   BaseProps<HTMLButtonElement>) {
   const [isExpanded, setIsExpanded] = useState(false);
   const pressable = usePressFeedback();
@@ -582,6 +584,7 @@ function DrawerMegaMenu({
     <div {...stylex.props(styles.drawerSection)}>
       {/* Header toggle — same pattern as TopNavMenu drawer */}
       <button
+        ref={ref}
         type="button"
         {...rest}
         onClick={composeEventHandlers(onClickProp, () =>

package/src/TopNav/TopNavMenu.test.tsx

@@ -9,6 +9,7 @@
  * SYNC: When TopNavMenu changes, update tests to match new behavior
  */
 
+import {createRef} from 'react';
 import {beforeEach, describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -322,6 +323,22 @@ describe('TopNavMenu pass-through props', () => {
     expect(trigger).toHaveAttribute('data-source', 'nav');
   });
 
+  it('forwards its ref to the trigger button', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<TopNavMenu ref={ref} label="Products" items={mockItems} />);
+    expect(ref.current).toBe(screen.getByRole('button', {name: 'Products'}));
+  });
+
+  it('forwards its ref to the drawer trigger', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <TopNavRenderContext value="drawer">
+        <TopNavMenu ref={ref} label="Products" items={mockItems} />
+      </TopNavRenderContext>,
+    );
+    expect(ref.current).toBe(screen.getByRole('button', {name: /Products/}));
+  });
+
   it('keeps its own popup wiring when a caller passes the same attributes', () => {
     render(
       <TopNavMenu

package/src/TopNav/TopNavMenu.tsx

@@ -477,6 +477,7 @@ export function TopNavMenu({
     return (
       <div {...stylex.props(drawerStyles.section)}>
         <button
+          ref={ref}
           type="button"
           {...rest}
           onMouseEnter={onMouseEnterProp}

package/src/Typeahead/Typeahead.test.tsx

@@ -2822,3 +2822,43 @@ describe('Typeahead consumer key handler target', () => {
     expect(onKeyDown).toHaveBeenCalledOnce();
   });
 });
+
+describe('Typeahead caller aria-labelledby', () => {
+  it('names the input by its label and a caller aria-labelledby', () => {
+    render(
+      <>
+        <span id="billing-heading">Billing</span>
+        <Typeahead
+          label="Fruit"
+          searchSource={fruitSource}
+          value={null}
+          onChange={() => {}}
+          aria-labelledby="billing-heading"
+        />
+      </>,
+    );
+    expect(
+      screen.getByRole('combobox', {name: 'Fruit Billing'}),
+    ).toBeInTheDocument();
+  });
+
+  it('names a grouped input by the group, its label, and a caller aria-labelledby', () => {
+    render(
+      <>
+        <span id="billing-heading">Billing</span>
+        <InputGroup label="Contact">
+          <Typeahead
+            label="Fruit"
+            searchSource={fruitSource}
+            value={null}
+            onChange={() => {}}
+            aria-labelledby="billing-heading"
+          />
+        </InputGroup>
+      </>,
+    );
+    expect(
+      screen.getByRole('combobox', {name: 'Contact Fruit Billing'}),
+    ).toBeInTheDocument();
+  });
+});

package/src/Typeahead/Typeahead.tsx

@@ -63,6 +63,7 @@ import {
   isImeKeyEvent,
   mergeProps,
 } from '../utils';
+import {joinAriaIDs} from '../utils/inputAria';
 import {TrailingKeyDownContext} from './trailingKeyDown';
 import {
   type FieldInputBaseProps,
@@ -416,6 +417,7 @@ export function Typeahead<T extends SearchableItem>({
   controlStyle,
   id: idProp,
   'aria-describedby': ariaDescribedByProp,
+  'aria-labelledby': ariaLabelledByProp,
   ...restProps
 }: TypeaheadProps<T>) {
   const {rest, container} = useFieldInputStyling('Typeahead', restProps, {
@@ -428,6 +430,7 @@ export function Typeahead<T extends SearchableItem>({
   const generatedInputId = useId();
   const inputId = idProp ?? generatedInputId;
   const inputLabelId = useId();
+  const fieldLabelId = useId();
   const descriptionId = useId();
   const statusMessageId = useId();
   const inputGroup = useInputGroup();
@@ -609,6 +612,13 @@ export function Typeahead<T extends SearchableItem>({
     inputGroup,
   );
 
+  // A caller aria-labelledby names the input together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const inputLabelledBy =
+    ariaLabelledByProp != null
+      ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp)
+      : ariaLabelledBy;
+
   const sizeStyle = wrapperSizeStyles[size];
 
   const typeaheadContent = (
@@ -684,7 +694,7 @@ export function Typeahead<T extends SearchableItem>({
                     .filter(Boolean)
                     .join(' ') || undefined
                 }
-                ariaLabelledBy={ariaLabelledBy}
+                ariaLabelledBy={inputLabelledBy}
                 onChangeQuery={onChangeQuery}
                 onOpenChange={onOpenChange}
                 debounceMs={debounceMs}
@@ -735,6 +745,7 @@ export function Typeahead<T extends SearchableItem>({
       isLabelHidden={isLabelHidden}
       description={description}
       inputID={inputId}
+      labelID={ariaLabelledByProp != null ? fieldLabelId : undefined}
       descriptionID={description ? descriptionId : undefined}
       isOptional={isOptional}
       isRequired={isRequired}

package/src/__tests__/pressState.ts

@@ -177,9 +177,11 @@ export function declaresPressPaint(el: Element): boolean {
   );
 }
 
-/** `.2s`, `200ms`, `0.2s` → 200. */
+/** `.2s`, `200ms`, `0.2s` → 200; a scaled clock reads its base, at tempo 1. */
 export function durationToMs(value: string): number {
-  const match = value.trim().match(/^([\d.]+)(ms|s)$/);
+  // The press release scales its base clock by the theme's tempo, capped under
+  // Reduce Motion: `calc(<ms> * …)`, `min(<ms>, …)` (`spec:AST-108` FR4).
+  const match = value.trim().match(/^(?:(?:calc|min)\(\s*)?([\d.]+)(ms|s)\b/);
   if (match == null) {
     return Number.NaN;
   }
@@ -203,10 +205,12 @@ export function hasReleaseFade(el: Element): boolean {
   const onArmAnimates = rulesWithSelector(el, '[data-astryx-press="on"]').some(
     rule => rule.includes('animation'),
   );
+  // One duration and its Reduce Motion cap: both the machine's clock.
   return (
     named &&
-    durations.length === 1 &&
-    durations[0] === PRESS_FADE_MS &&
+    durations.length >= 1 &&
+    durations.length <= 2 &&
+    durations.every(duration => duration === PRESS_FADE_MS) &&
     !onArmAnimates
   );
 }

package/src/gestures/GestureArena.ts

@@ -262,6 +262,41 @@ export class GestureArena {
     });
   }
 
+  /**
+   * A contact began where nothing takes part (plain page content). It is
+   * never tracked and stays the browser's; recognizers already tracking a
+   * gesture hear of it, as of any touch off their hit path.
+   */
+  untrackedBegan(input: TouchBeganInput): void {
+    if (!this.active.some(recognizer => recognizer.numberOfTouches > 0)) {
+      return;
+    }
+    this.run(input.time, () => {
+      const time = this.clampTime(input.time);
+      const touch: GestureTouch = {
+        id: input.id,
+        pointerType: input.pointerType,
+        phase: 'began',
+        x: input.x,
+        y: input.y,
+        time,
+        startX: input.x,
+        startY: input.y,
+        startTime: time,
+        samples: [{x: input.x, y: input.y, time}],
+        target: input.target,
+        scroll: input.scroll ?? null,
+        takenByBrowser: false,
+      };
+      const context = this.context();
+      for (const recognizer of [...this.active]) {
+        if (recognizer.numberOfTouches > 0) {
+          recognizer.deliverBeganElsewhere([touch], context);
+        }
+      }
+    });
+  }
+
   /** Contacts moved. */
   moved(inputs: ReadonlyArray<TouchInput>): void {
     if (inputs.length === 0) {