@astryxdesign/core 0.7.2 → 0.7.3-canary.04c7468

package/src/TopNav/__tests__/TopNavMobileLongHeading.a11y.chromium.spec.ts

@@ -0,0 +1,74 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file TopNavMobileLongHeading.a11y.chromium.spec.ts
+ * @input The `Core/AppShell` Long Heading On Mobile story in a built Storybook
+ *   at a 320px phone viewport.
+ * @output Real-engine proof that a long TopNav heading gives way on a narrow
+ *   screen: the menu toggle stays inside the compact bar, and the drawer's
+ *   close button stays inside the drawer.
+ * @position Run with `pnpm test:a11y-contract`. jsdom has no layout, so where
+ *   the toggle lands is only observable here.
+ */
+
+import {expect, test, type Locator} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const STORY = 'core-appshell--long-heading-on-mobile';
+
+async function boxOf(locator: Locator) {
+  const box = await locator.boundingBox();
+  if (box == null) {
+    throw new Error('the element has no layout box');
+  }
+  return box;
+}
+
+test('a long heading keeps the menu toggle and the drawer close button on screen', async ({
+  page,
+}) => {
+  await page.setViewportSize({width: 320, height: 568});
+  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
+
+  const bar = page.getByRole('navigation', {name: 'Main navigation'});
+  const toggle = page.getByRole('button', {name: 'Open navigation'});
+  await expect(toggle).toBeVisible();
+
+  const barBox = await boxOf(bar);
+  const toggleBox = await boxOf(toggle);
+  expect(toggleBox.x).toBeGreaterThanOrEqual(barBox.x);
+  expect(toggleBox.x + toggleBox.width).toBeLessThanOrEqual(
+    barBox.x + barBox.width,
+  );
+
+  await toggle.click();
+
+  const drawer = page.getByRole('dialog', {name: 'Navigation'});
+  const close = drawer.getByRole('button', {name: 'Close navigation'});
+  await expect(close).toBeVisible();
+
+  // The drawer slides in from the inline end; measure once it has settled.
+  await expect(close).toBeInViewport({ratio: 1});
+  const drawerBox = await boxOf(drawer);
+  const closeBox = await boxOf(close);
+  expect(closeBox.x).toBeGreaterThanOrEqual(drawerBox.x);
+  expect(closeBox.x + closeBox.width).toBeLessThanOrEqual(
+    drawerBox.x + drawerBox.width,
+  );
+});

package/src/TreeList/TreeList.test.tsx

@@ -942,6 +942,34 @@ describe('TreeList', () => {
         expect(screen.queryByText('File')).not.toBeInTheDocument();
       });
 
+      it("exposes a disabled row's toggle and action as aria-disabled and keeps them inert", () => {
+        const onClick = vi.fn();
+        const {container} = render(
+          <TreeList
+            items={underRoot([
+              {id: 'run', label: 'Run', onClick, isDisabled: true},
+              {...folder, isDisabled: true},
+            ])}
+          />,
+        );
+        // spec:AST-085 FR1/FR2: no native disabled anywhere, and a click
+        // dispatched straight on the inner controls does nothing.
+        expect(container.querySelector('[disabled]')).toBeNull();
+        const toggle = container.querySelector<HTMLElement>(
+          '[data-tree-toggle][aria-disabled="true"]',
+        )!;
+        expect(toggle).not.toBeNull();
+        toggle.click();
+        fireEvent.keyDown(toggle, {key: 'Enter'});
+        expect(screen.queryByText('File')).not.toBeInTheDocument();
+        const action = Array.from(container.querySelectorAll('button')).find(
+          button => button.textContent?.includes('Run'),
+        )!;
+        expect(action).toHaveAttribute('aria-disabled', 'true');
+        action.click();
+        expect(onClick).not.toHaveBeenCalled();
+      });
+
       it('leaves a role-based control in start or end content to itself', () => {
         // Native and role-based controls alike keep their own activation,
         // the same rule link rows get from the shared enlarged-surface hook.

package/src/TreeList/TreeListItem.tsx

@@ -38,6 +38,7 @@ import {TreeListBranches} from './TreeListBranches';
 import type {TreeListDensity, TreeListVariant} from './TreeListTypes';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import {disabledInteractionProps} from '../utils/disabledInteraction';
 
 // =============================================================================
 // Styles
@@ -552,11 +553,13 @@ export function TreeListItem({
         // Stable identity for TreeList's activateItem selector — do not
         // remove without also updating TreeList.tsx.
         data-tree-toggle=""
-        disabled={isDisabled}
+        // Disabled stays focusable (spec:AST-085 FR1) but inert (FR2).
+        aria-disabled={isDisabled || undefined}
         // Roving tabindex lives on the treeitem row; the chevron toggle is not
         // a separate tab stop. Row-level Enter/Space forwards to this button.
         tabIndex={-1}
         onClick={handleToggle}
+        {...(isDisabled ? disabledInteractionProps() : null)}
         {...mergeProps(
           // Stable theme target for the expand/collapse control. `data-tree-toggle`
           // stays as the functional activation hook; this adds a themeable
@@ -608,7 +611,8 @@ export function TreeListItem({
         <button
           type="button"
           onClick={onClick}
-          disabled={isDisabled}
+          aria-disabled={isDisabled || undefined}
+          {...(isDisabled ? disabledInteractionProps() : null)}
           aria-labelledby={labelId}
           aria-describedby={description != null ? descriptionId : undefined}
           // Roving tabindex lives on the treeitem row; inner action is not a

package/src/Typeahead/Typeahead.test.tsx

@@ -1637,6 +1637,95 @@ describe('Typeahead edit mode', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it('empties the input when cleared while editing the selected value (#7038)', async () => {
+    const onChangeQuery = vi.fn();
+    function Controlled() {
+      const [value, setValue] = useState<SearchableItem | null>(fruits[0]);
+      return (
+        <Typeahead
+          label="Fruit"
+          searchSource={fruitSource}
+          value={value}
+          onChange={setValue}
+          onChangeQuery={onChangeQuery}
+          hasClear
+        />
+      );
+    }
+    render(<Controlled />);
+    const input = screen.getByRole<HTMLInputElement>('combobox');
+
+    // Enter edit mode: the token gives way to the label as editable text
+    fireEvent.click(screen.getByText(fruits[0].label).closest('div')!);
+    await waitFor(() => expect(input.value).toBe(fruits[0].label));
+
+    fireEvent.click(screen.getByRole('button', {name: 'Clear selection'}));
+
+    // The value and the visible text agree: nothing selected, nothing typed
+    await waitFor(() => expect(input.value).toBe(''));
+    expect(onChangeQuery).toHaveBeenLastCalledWith('');
+    expect(input).toHaveFocus();
+  });
+
+  // Escape and blur restore the token but leave the edit-mode label in the
+  // base's query, so a clear from the restored token faces the same stale text.
+  it.each([
+    [
+      'Escape',
+      (input: HTMLElement) => fireEvent.keyDown(input, {key: 'Escape'}),
+    ],
+    ['blur', (input: HTMLElement) => fireEvent.blur(input)],
+  ])(
+    'empties the input when cleared after %s restored the token (#7038)',
+    async (_name, leaveEditMode) => {
+      const onChangeQuery = vi.fn();
+      function Controlled() {
+        const [value, setValue] = useState<SearchableItem | null>(fruits[0]);
+        return (
+          <Typeahead
+            label="Fruit"
+            searchSource={fruitSource}
+            value={value}
+            onChange={setValue}
+            onChangeQuery={onChangeQuery}
+            hasClear
+          />
+        );
+      }
+      render(<Controlled />);
+      const input = screen.getByRole<HTMLInputElement>('combobox');
+
+      fireEvent.click(screen.getByText(fruits[0].label).closest('div')!);
+      await waitFor(() => expect(input.value).toBe(fruits[0].label));
+
+      leaveEditMode(input);
+      await screen.findByRole('button', {name: 'Clear selection'});
+
+      fireEvent.click(screen.getByRole('button', {name: 'Clear selection'}));
+
+      await waitFor(() => expect(input.value).toBe(''));
+      expect(onChangeQuery).toHaveBeenLastCalledWith('');
+    },
+  );
+
+  it('does not report a query change when cleared outside edit mode', () => {
+    const onChangeQuery = vi.fn();
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={fruits[0]}
+        onChange={vi.fn()}
+        onChangeQuery={onChangeQuery}
+        hasClear
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', {name: 'Clear selection'}));
+
+    expect(onChangeQuery).not.toHaveBeenCalled();
+  });
+
   it('restores token on blur without action', async () => {
     const onChange = vi.fn();
     render(

package/src/Typeahead/Typeahead.tsx

@@ -519,12 +519,25 @@ export function Typeahead<T extends SearchableItem>({
     [onChange],
   );
 
-  // Handle clear (explicit X button on token)
+  // Handle clear (explicit X button on token). Edit mode copied the label into
+  // the base's query, and the base only resets that query on a selection, so
+  // clearing the value has to empty it the way entering edit mode filled it
+  // (#7038): a native set plus a synthetic input event, which reaches the
+  // base's own change handler and its onChangeQuery.
   const handleClear = useCallback(() => {
+    const input = inputRef.current;
+    if (input && input.value !== '') {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value',
+      )?.set;
+      nativeInputValueSetter?.call(input, '');
+      input.dispatchEvent(new Event('input', {bubbles: true}));
+    }
     setIsEditing(false);
     setEditingValue(null);
     onChange(null);
-    inputRef.current?.focus();
+    input?.focus();
   }, [onChange]);
 
   // Handle Escape during edit mode — restore token

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

@@ -0,0 +1,86 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file DisabledTriggerFocus.a11y.chromium.spec.ts
+ * @input The `a11y/Disabled trigger focus` stories in a built Storybook.
+ * @output Real-engine proof of `spec:AST-085` FR4 for Selector and
+ *   ComplexSelector: a trigger disabled while it holds keyboard focus keeps
+ *   focus and reports itself disabled.
+ * @position Run in `pr-a11y`; a DOM emulator does not move focus off an
+ *   element that becomes disabled, so it cannot show the loss.
+ */
+
+import {expect, test} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+const CASES = [
+  {
+    storyId: 'a11y-disabled-trigger-focus--selector-trigger',
+    role: 'combobox',
+    name: 'Fruit',
+  },
+  {
+    storyId: 'a11y-disabled-trigger-focus--complex-selector-trigger',
+    role: 'button',
+    name: 'View options',
+  },
+] as const;
+
+for (const {storyId, role, name} of CASES) {
+  test(`${name}: a focused trigger keeps focus when it becomes disabled`, async ({
+    page,
+  }) => {
+    await page.goto(
+      `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+    );
+    const trigger = page.getByRole(role, {name});
+    await trigger.focus();
+    await expect(trigger).toBeFocused();
+
+    await page.evaluate(id => {
+      const channel = (
+        window as unknown as {
+          __STORYBOOK_ADDONS_CHANNEL__?: {
+            emit: (event: string, payload: unknown) => void;
+          };
+        }
+      ).__STORYBOOK_ADDONS_CHANNEL__;
+      if (channel == null) {
+        throw new Error('Storybook channel is unavailable');
+      }
+      channel.emit('updateStoryArgs', {
+        storyId: id,
+        updatedArgs: {isDisabled: true},
+      });
+    }, storyId);
+
+    // Wait for the disabled re-render in either form, so focus is checked
+    // after it lands.
+    await expect
+      .poll(async () =>
+        trigger.evaluate(
+          el =>
+            el.hasAttribute('disabled') ||
+            el.getAttribute('aria-disabled') === 'true',
+        ),
+      )
+      .toBe(true);
+    await expect(trigger).toBeFocused();
+  });
+}

package/src/hooks/useGridFocus.ts

@@ -298,7 +298,22 @@ export function useGridFocus<T extends HTMLElement = HTMLElement>(
     for (const el of targets) {
       setTabIndex(el, el === tabbable ? 0 : -1);
     }
-  }, [getFocusTargets, setTabIndex]);
+    // A cell that stopped being focusable (an aria-disabled day, for example,
+    // which stays reachable by focus) can still hold the stop from earlier
+    // navigation; it never stays tabbable, so the grid keeps one Tab stop.
+    for (const cell of getCells()) {
+      const el = cellFocusable(cell) ? null : resolveFocusTarget(cell);
+      if (el != null) {
+        setTabIndex(el, -1);
+      }
+    }
+  }, [
+    getFocusTargets,
+    getCells,
+    cellFocusable,
+    resolveFocusTarget,
+    setTabIndex,
+  ]);
 
   // Keep the tab stop valid across renders (cells added/removed, focusability
   // toggled). Runs after every commit but only when roving tabindex is on.

package/src/hooks/useMenuPress.ts

@@ -36,7 +36,9 @@
  *
  * The menu root is marked `data-astryx-menu-press` so a nested flyout (a DOM
  * descendant of its parent menu) can tell which level owns a press, and so a
- * surface can be recognised as carrying this model.
+ * surface can be recognised as carrying this model. A menu the root renders
+ * beside itself names the root with `data-astryx-menu-press-surface` and counts
+ * as nested in it.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
@@ -60,6 +62,14 @@ import {useLongPress, type UseLongPressHandlers} from './useLongPress';
 /** Marks a menu root that carries this press model. */
 export const MENU_PRESS_MARKER = 'data-astryx-menu-press';
 const MENU_PRESS_ROOT_SELECTOR = `[${MENU_PRESS_MARKER}]`;
+/**
+ * Carried by a menu root that another root renders beside itself rather than
+ * inside it, naming that root's `id`: the menu of a sub-menu with a header or
+ * footer, in a dialog beside the root's menu, is nested in that root for the
+ * press model, as a flyout inside the root's DOM is. Nothing else beside the
+ * root carries it, so a picker placed in a header or footer stays its own root.
+ */
+export const MENU_PRESS_SURFACE_ATTR = 'data-astryx-menu-press-surface';
 
 /** How long after a tracked release the browser's click is still swallowed. */
 export const MENU_PRESS_STRAY_CLICK_MS = 400;
@@ -246,16 +256,44 @@ function isRowFocusable(row: HTMLElement): boolean {
 function getOutermostRoot(menu: HTMLElement): HTMLElement {
   let root = menu;
   for (;;) {
-    const parent = root.parentElement?.closest<HTMLElement>(
-      MENU_PRESS_ROOT_SELECTOR,
-    );
-    if (parent == null) {
+    const parent =
+      root.parentElement?.closest<HTMLElement>(MENU_PRESS_ROOT_SELECTOR) ??
+      getSurfaceOwner(root);
+    if (parent == null || parent === root) {
       return root;
     }
     root = parent;
   }
 }
 
+/**
+ * The menu root that renders `menu` beside itself, if any (see
+ * `MENU_PRESS_SURFACE_ATTR`). Read off the menu itself, never an ancestor, so
+ * a root placed in a region of that surface is not adopted.
+ */
+function getSurfaceOwner(menu: HTMLElement): HTMLElement | null {
+  const ownerId = menu.getAttribute(MENU_PRESS_SURFACE_ATTR);
+  if (!ownerId) {
+    return null;
+  }
+  const owner = menu.ownerDocument.getElementById(ownerId);
+  return owner?.matches(MENU_PRESS_ROOT_SELECTOR) === true ? owner : null;
+}
+
+/**
+ * Whether `element` is inside the menu tree whose outermost root is `root`:
+ * inside the root itself, or inside a menu nested in it through a surface
+ * the root renders beside itself. Anything else in such a surface (a header
+ * field, say) is outside the menu, as the root's own regions are.
+ */
+function isInMenuTree(element: Element, root: HTMLElement): boolean {
+  if (root.contains(element)) {
+    return true;
+  }
+  const owner = element.closest<HTMLElement>(MENU_PRESS_ROOT_SELECTOR);
+  return owner != null && getOutermostRoot(owner) === root;
+}
+
 interface ResolvedPoint {
   row: HTMLElement | null;
   isInMenu: boolean;
@@ -332,14 +370,14 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
       }
       const root = menu == null ? null : getOutermostRoot(menu);
       const isInMenu =
-        root != null && element != null && root.contains(element);
+        root != null && element != null && isInMenuTree(element, root);
       const trigger = triggerRef?.current ?? null;
       const isOnTrigger =
         trigger != null && element != null && trigger.contains(element);
       let row: HTMLElement | null = null;
       if (isInMenu && element != null) {
         row = element.closest<HTMLElement>(itemSelector);
-        if (row != null && !root.contains(row)) {
+        if (row != null && !isInMenuTree(row, root)) {
           row = null;
         }
       }

package/src/utils/disabledInteraction.ts

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file disabledInteraction.ts
+ * @input An optional caller keydown handler
+ * @output Event props that keep a focusable, aria-disabled control inert
+ * @position Shared by controls that replace native `disabled` with
+ *   `aria-disabled` under spec:AST-085 (FR1, FR2)
+ */
+
+import type {KeyboardEvent, KeyboardEventHandler, MouseEvent} from 'react';
+
+/**
+ * Event props for a disabled control that stays focusable. Native `disabled`
+ * dispatched no click at all; without it, Enter and Space still synthesize a
+ * click that native listeners on the element (a wrapping Popover's trigger)
+ * receive. Cancelling those keys keeps the click from existing, and the click
+ * handler cancels pointer clicks and keeps them from reaching ancestors. Other
+ * keys still reach the caller's handler.
+ */
+export function disabledInteractionProps<T extends HTMLElement>(
+  onKeyDown?: KeyboardEventHandler<T>,
+): {
+  onClick: (event: MouseEvent<T>) => void;
+  onKeyDown: (event: KeyboardEvent<T>) => void;
+} {
+  return {
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+  };
+}

package/src/utils/timeParser.test.ts

@@ -260,6 +260,17 @@ describe('adjustTime', () => {
     expect(adjustTime('10:00' as ISOTimeString, NaN)).toBe('10:00');
   });
 
+  it('returns the input unchanged for a fractional delta', () => {
+    // `increment` is documented as minutes and typed `number`, so a caller can
+    // hand ArrowUp a fraction. A fractional minute reaching formatISOTime is
+    // not rounded: it pads to "30.5" and the field is left holding a string
+    // that is no longer a parseable time.
+    expect(adjustTime('10:30' as ISOTimeString, 0.5)).toBe('10:30');
+    expect(adjustTime('10:30:45' as ISOTimeString, -0.5, true)).toBe(
+      '10:30:45',
+    );
+  });
+
   it('wraps large negative deltas in constant time', () => {
     expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7)).toBe('10:00');
     expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe(

package/src/utils/timeParser.ts

@@ -372,6 +372,10 @@ export function clampTime(
 
 /**
  * Adjusts a time by adding/subtracting minutes.
+ *
+ * `deltaMinutes` is a whole number of minutes. A fractional delta leaves the
+ * time unchanged rather than returning a value that is no longer a time —
+ * `HH:MM` has no place for a fraction of a minute.
  */
 export function adjustTime(
   time: ISOTimeString,
@@ -384,8 +388,11 @@ export function adjustTime(
   }
 
   // A non-finite delta would spin the wrap-around forever (-Infinity) or
-  // produce "NaN:NaN" (NaN) — return the input unchanged instead.
-  if (!Number.isFinite(deltaMinutes)) {
+  // produce "NaN:NaN" (NaN), and a fractional one is never rounded on the way
+  // out — formatISOTime pads "30.5" to two characters and leaves it, so the
+  // caller gets back a value that is no longer a time. Steps are whole
+  // minutes: return the input unchanged instead.
+  if (!Number.isInteger(deltaMinutes)) {
     return time;
   }