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

package/src/Resizable/useResizable.test.ts

@@ -1680,3 +1680,46 @@ describe('ResizableProps source compatibility (AST-010 API5)', () => {
     expect(prePr._onResizeCancel).toBeUndefined();
   });
 });
+
+describe('useResizable window reads after a commit', () => {
+  // React re-reads a useSyncExternalStore snapshot after the commit whenever
+  // getSnapshot is a new function, and a window size read after the DOM has
+  // changed forces a layout of the whole page. A re-render with unchanged
+  // inputs reads the window during render only.
+  function readsAfterCommit(direction: 'horizontal' | 'vertical') {
+    const reads = {count: 0};
+    const width = vi.spyOn(window, 'innerWidth', 'get');
+    const height = vi.spyOn(window, 'innerHeight', 'get');
+    width.mockImplementation(() => {
+      reads.count += 1;
+      return 1024;
+    });
+    height.mockImplementation(() => {
+      reads.count += 1;
+      return 768;
+    });
+    function Region({tick}: {tick: number}) {
+      useResizable({defaultSize: 240, direction});
+      // Runs in the commit, before passive effects: every read counted
+      // after it happened after the DOM changed.
+      useLayoutEffect(() => {
+        reads.count = 0;
+      });
+      return createElement('div', {'data-tick': tick});
+    }
+    const {rerender} = render(createElement(Region, {tick: 0}));
+    act(() => rerender(createElement(Region, {tick: 1})));
+    const count = reads.count;
+    width.mockRestore();
+    height.mockRestore();
+    return count;
+  }
+
+  it('reads the window width again only during render, not after the commit', () => {
+    expect(readsAfterCommit('horizontal')).toBe(0);
+  });
+
+  it('reads the window height again only during render, not after the commit', () => {
+    expect(readsAfterCommit('vertical')).toBe(0);
+  });
+});

package/src/Resizable/useResizable.ts

@@ -306,6 +306,34 @@ const SERVER_BASIS = 1200;
 
 /** A store that never changes on its own; the snapshot is re-read on render. */
 const noopSubscribe = () => () => {};
+
+// The window snapshots are module functions, so their identity is stable:
+// React re-reads a snapshot after the commit whenever getSnapshot is a new
+// function, and a window size read after the DOM changed forces a layout of
+// the whole page. With these, the window is read during render only.
+
+/** The viewport width, the basis without a container. */
+function readViewportBasis(): number {
+  return typeof window === 'undefined' ? SERVER_BASIS : window.innerWidth;
+}
+
+function readServerBasis(): number {
+  return SERVER_BASIS;
+}
+
+/** The window's extent along a horizontal hook's axis. */
+function readWindowWidth(): number | null {
+  return typeof window === 'undefined' ? null : window.innerWidth;
+}
+
+/** The window's extent along a vertical hook's axis. */
+function readWindowHeight(): number | null {
+  return typeof window === 'undefined' ? null : window.innerHeight;
+}
+
+function readNoWindowExtent(): null {
+  return null;
+}
 const DEFAULT_SIZE_FALLBACK = 250;
 const RESIZABLE_SIZE_GUIDANCE =
   'Use a non-negative number of pixels, an exact "Npx" string, an exact ' +
@@ -698,8 +726,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   );
   const viewportBasis = useSyncExternalStore(
     subscribeToViewport,
-    () => (typeof window === 'undefined' ? SERVER_BASIS : window.innerWidth),
-    () => SERVER_BASIS,
+    readViewportBasis,
+    readServerBasis,
   );
 
   // The window's extent along the hook's axis, for the REPORTED maximum of an
@@ -710,13 +738,8 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
   // (component:Resizable Performance and resources).
   const windowExtent = useSyncExternalStore(
     noopSubscribe,
-    () =>
-      typeof window === 'undefined'
-        ? null
-        : direction === 'vertical'
-          ? window.innerHeight
-          : window.innerWidth,
-    () => null,
+    direction === 'vertical' ? readWindowHeight : readWindowWidth,
+    readNoWindowExtent,
   );
 
   // With a container, its content box is the basis; without one, the released

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -562,6 +562,90 @@ describe('SegmentedControl disabled state', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it("does not run a caller's onClick on a disabled segment", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+    const handleChange = vi.fn();
+
+    render(
+      <SegmentedControl value="grid" onChange={handleChange} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem
+          value="list"
+          label="List"
+          isDisabled
+          onClick={handleClick}
+        />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).not.toHaveBeenCalled();
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it("does not run a caller's onClick when the whole group is disabled", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        isDisabled>
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" onClick={handleClick} />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("does not run a caller's onClick on a focusable disabled segment", async () => {
+    // A group disabled with a reason keeps its selected segment in the tab
+    // order, so Enter and Space can reach it and synthesize a click.
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        isDisabled
+        disabledMessage="Choose a project to switch views">
+        <SegmentedControlItem value="grid" label="Grid" onClick={handleClick} />
+        <SegmentedControlItem value="list" label="List" />
+      </SegmentedControl>,
+    );
+
+    const selected = screen.getByRole('radio', {name: 'Grid'});
+    selected.focus();
+    expect(selected).toHaveFocus();
+    await user.keyboard('{Enter}');
+    await user.keyboard(' ');
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it("still runs a caller's onClick on an enabled segment", async () => {
+    const user = userEvent.setup({pointerEventsCheck: 0});
+    const handleClick = vi.fn();
+    const handleChange = vi.fn();
+
+    render(
+      <SegmentedControl value="grid" onChange={handleChange} label="View mode">
+        <SegmentedControlItem value="grid" label="Grid" />
+        <SegmentedControlItem value="list" label="List" onClick={handleClick} />
+      </SegmentedControl>,
+    );
+
+    await user.click(screen.getByRole('radio', {name: 'List'}));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith('list');
+  });
+
   it('skips disabled items during keyboard navigation', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -210,11 +210,17 @@ export function SegmentedControlItem({
 
   // Consumer-first: a consumer onClick can call preventDefault() to opt out of
   // selection; otherwise selection proceeds when enabled and not selected.
-  const handleClick = composeEventHandlers(onClickProp, () => {
-    if (!isItemDisabled && !isSelected) {
-      ctx.onChange(value);
-    }
-  });
+  // A disabled segment invokes no caller callback (spec:AST-085 FR2), so the
+  // consumer onClick is left out while it is disabled, including the selected
+  // segment of a group disabled with a reason, which stays focusable.
+  const handleClick = composeEventHandlers(
+    isItemDisabled ? undefined : onClickProp,
+    () => {
+      if (!isItemDisabled && !isSelected) {
+        ctx.onChange(value);
+      }
+    },
+  );
 
   const iconElement = icon ? (
     <span {...stylex.props(styles.icon, iconSizeStyles[size])}>{icon}</span>

package/src/Selector/Selector.test.tsx

@@ -9,7 +9,15 @@
  * SYNC: When Selector.tsx API changes, update these tests.
  */
 
-import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import {readFileSync} from 'node:fs';
 import {
   act,
@@ -61,6 +69,15 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
 }
 
 // Mock showPopover and hidePopover methods since they're not implemented in jsdom
+// The bottom-sheet presentation renders BottomSheet through React.lazy. Its
+// first import transforms the BottomSheet module tree, which on a loaded
+// runner takes longer than a query's 1 s wait, so the first sheet test timed
+// out before the dialog existed. Load the module once up front: lazy() then
+// resolves from the module cache and every sheet test waits only on the open.
+beforeAll(async () => {
+  await import('../BottomSheet/BottomSheet');
+});
+
 beforeEach(() => {
   // The live regions are a document-level singleton; start each test clean.
   __resetLiveRegionsForTest();
@@ -276,6 +293,13 @@ function expectSilentBusySpinner() {
   expect(screen.queryByRole('status', {name: 'Loading'})).toBeNull();
 }
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each test's open waits only for the open.
+beforeAll(async () => {
+  await import('../BottomSheet/BottomSheet');
+});
+
 describe('Selector', () => {
   it('uses a bottom sheet and closes after a selection when requested', async () => {
     const user = userEvent.setup();
@@ -4271,6 +4295,71 @@ describe('Selector popup theme target', () => {
   });
 });
 
+describe('Selector light dismiss focus (spec:Popover AR4)', () => {
+  function closeByLightDismiss() {
+    const popover = document.querySelector('[popover]') as HTMLElement;
+    act(() => {
+      popover.dispatchEvent(
+        Object.assign(new Event('toggle'), {
+          oldState: 'open',
+          newState: 'closed',
+        }),
+      );
+    });
+  }
+
+  it('leaves focus on the field a press moved it to', async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <Selector
+          label="Fruit"
+          options={OPTIONS}
+          value="Banana"
+          onChange={() => {}}
+          placement="below"
+        />
+        <input aria-label="Notes" />
+      </>,
+    );
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    // The press on another field focuses it before the browser's light
+    // dismiss closes the list.
+    const notes = screen.getByRole('textbox', {name: 'Notes'});
+    act(() => {
+      notes.focus();
+    });
+    closeByLightDismiss();
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(notes).toHaveFocus();
+  });
+
+  it('returns focus to the trigger when the press lands on nothing focusable', async () => {
+    const user = userEvent.setup();
+    render(
+      <Selector
+        label="Fruit"
+        options={OPTIONS}
+        value="Banana"
+        onChange={() => {}}
+        placement="below"
+      />,
+    );
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+    act(() => {
+      (document.activeElement as HTMLElement | null)?.blur();
+    });
+    closeByLightDismiss();
+
+    expect(trigger).toHaveFocus();
+  });
+});
+
 describe('Selector option-row theme target', () => {
   const ROW_OPTIONS = ['Apple', 'Banana', 'Orange'];
 

package/src/Selector/__tests__/Selector.combobox.a11y.test.tsx

@@ -4,7 +4,7 @@
 
 import {cleanup, render, screen, waitFor, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {describe, expect, it} from 'vitest';
+import {beforeAll, describe, expect, it} from 'vitest';
 import {
   COMBOBOX_PATTERN,
   expectAccessibilitySpec,
@@ -20,6 +20,13 @@ import {SELECTOR_COMBOBOX_KNOWN_FAILURES} from './Combobox.a11y.known-failures';
 
 installListboxDialogStubs();
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each scenario's open waits only for the open.
+beforeAll(async () => {
+  await import('../../BottomSheet/BottomSheet');
+});
+
 const hidden = {hidden: true} as const;
 
 function subjectFor(scenario: SelectorComboboxScenario): HTMLElement {

package/src/Selector/__tests__/Selector.listbox.a11y.test.tsx

@@ -9,7 +9,7 @@
 
 import {cleanup, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {describe, expect, it} from 'vitest';
+import {beforeAll, describe, expect, it} from 'vitest';
 import {
   expectAccessibilitySpec,
   LISTBOX_PATTERN,
@@ -20,6 +20,13 @@ import {installListboxDialogStubs} from './Listbox.a11y.dom';
 
 installListboxDialogStubs();
 
+// The bottom sheet is loaded on demand (SelectorBottomSheet's lazy import).
+// Loading its module is not part of an open, so the file waits for it once
+// here, and each scenario's open waits only for the open.
+beforeAll(async () => {
+  await import('../../BottomSheet/BottomSheet');
+});
+
 const scenarios = LISTBOX_SCENARIOS.filter(
   scenario => scenario.component === 'Selector',
 );

package/src/Selector/useSelectorPresentation.ts

@@ -34,6 +34,13 @@ interface UseSelectorPresentationOptions {
   onShow: () => void;
   popoverOptions: Omit<UsePopoverOptions, 'onHide' | 'onShow'>;
   triggerRef: RefObject<HTMLElement | null>;
+  /**
+   * Return focus to the trigger on every close, even when a press already
+   * moved focus to another element. A caller-rendered trigger needs this
+   * (spec:AST-055 AR3); the built-in trigger leaves focus where the press put
+   * it (spec:Popover AR4).
+   */
+  isFocusReturnAlways?: boolean;
 }
 
 interface SelectorPresentationController {
@@ -55,6 +62,7 @@ export function useSelectorPresentation({
   onShow,
   popoverOptions,
   triggerRef,
+  isFocusReturnAlways = false,
 }: UseSelectorPresentationOptions): SelectorPresentationController {
   const resolvedPresentation = useAdaptivePresentation(presentation);
   const activePresentationRef =
@@ -68,6 +76,9 @@ export function useSelectorPresentation({
   const onHideRef = useRef(onHide);
   const onShowRef = useRef(onShow);
   const didShowPopoverRef = useRef(false);
+  // The open list's container, read when the popover hides to tell focus that
+  // is still inside the list from focus that moved to another element.
+  const popoverContentRef = useRef<HTMLDivElement | null>(null);
   const {
     isFocusRingSuppressed,
     onFocusReturnTargetFocus,
@@ -78,10 +89,26 @@ export function useSelectorPresentation({
   onShowRef.current = onShow;
 
   const handlePopoverHide = useCallback(() => {
-    prepareFocusReturn();
     onHideRef.current();
-    triggerRef.current?.focus();
-  }, [prepareFocusReturn, triggerRef]);
+    const trigger = triggerRef.current;
+    // A light dismiss caused by pressing another focusable element has already
+    // moved focus there; taking it back would leave the next key on this
+    // closed Selector (spec:Popover AR4 returns focus only when it would
+    // otherwise be lost). Escape, a choice in the list, or a press on nothing
+    // focusable still returns focus to the trigger.
+    const active = document.activeElement;
+    const focusLandedElsewhere =
+      !isFocusReturnAlways &&
+      active instanceof HTMLElement &&
+      active !== document.body &&
+      active !== trigger &&
+      !popoverContentRef.current?.contains(active);
+    if (focusLandedElsewhere) {
+      return;
+    }
+    prepareFocusReturn();
+    trigger?.focus();
+  }, [isFocusReturnAlways, prepareFocusReturn, triggerRef]);
   const handlePopoverShow = useCallback(() => {
     didShowPopoverRef.current = true;
     resetFocusReturn();
@@ -92,6 +119,7 @@ export function useSelectorPresentation({
     onHide: handlePopoverHide,
     onShow: handlePopoverShow,
   });
+  popoverContentRef.current = popover.contentRef.current;
   const {hide: hidePopover, show: showPopover} = popover;
 
   const show = useCallback((): boolean => {

package/src/SideNav/SideNav.test.tsx

@@ -492,6 +492,33 @@ describe('SideNavHeading', () => {
       );
     });
 
+    it('moves focus one item per arrow key in a NavHeadingMenu (APG menu)', async () => {
+      __resetMenuPressForTest();
+      const user = userEvent.setup();
+      render(
+        <SideNavHeading
+          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('closes when a mouse pressed on a NavHeadingMenu item is released outside the menu (useMenuPress FR3)', async () => {
       __resetMenuPressForTest();
       const user = userEvent.setup();
@@ -937,10 +964,71 @@ describe('SideNavItem', () => {
     expect(button).not.toHaveAttribute('aria-current');
   });
 
-  it('disables the button when isDisabled', () => {
+  // spec:AST-085 FR1, FR2: a disabled item stays focusable but is inert.
+  it('keeps a disabled item focusable and exposes aria-disabled', () => {
     render(<SideNavItem label="Dashboard" isDisabled />);
-    const button = screen.getByRole('button');
-    expect(button).toBeDisabled();
+    const button = screen.getByRole('button', {name: 'Dashboard'});
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    button.focus();
+    expect(button).toHaveFocus();
+  });
+
+  it('does not run onClick on a disabled item from a click, Enter or Space', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    render(<SideNavItem label="Dashboard" onClick={handleClick} isDisabled />);
+    const button = screen.getByRole('button', {name: 'Dashboard'});
+    fireEvent.click(button);
+    button.focus();
+    await user.keyboard('{Enter}');
+    await user.keyboard(' ');
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('renders a disabled item with href as a focusable button that does not navigate', () => {
+    const handleClick = vi.fn();
+    render(
+      <SideNavItem
+        label="Dashboard"
+        href="/dashboard"
+        onClick={handleClick}
+        isDisabled
+      />,
+    );
+    expect(screen.queryByRole('link')).toBeNull();
+    const button = screen.getByRole('button', {name: 'Dashboard'});
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).not.toHaveAttribute('href');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('exposes aria-disabled on the primary of a disabled split row', () => {
+    render(
+      <SideNavItem label="Settings" href="/settings" collapsible isDisabled>
+        <SideNavItem label="General" href="/settings/general" />
+      </SideNavItem>,
+    );
+    const primary = screen.getByRole('button', {name: 'Settings'});
+    expect(primary).not.toHaveAttribute('disabled');
+    expect(primary).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('keeps focus on an item that becomes disabled while focused', () => {
+    const item = (isDisabled: boolean) => (
+      <SideNavItem
+        label="Dashboard"
+        onClick={() => {}}
+        isDisabled={isDisabled}
+      />
+    );
+    const {rerender} = render(item(false));
+    const button = screen.getByRole('button', {name: 'Dashboard'});
+    button.focus();
+    rerender(item(true));
+    expect(screen.getByRole('button', {name: 'Dashboard'})).toHaveFocus();
   });
 
   it('calls onClick handler', async () => {
@@ -2420,6 +2508,18 @@ describe('SideNavItem — mobile drawer close-on-activate', () => {
     expect(closeMobileNav).not.toHaveBeenCalled();
   });
 
+  it('does not close the mobile nav when a disabled item is activated', async () => {
+    const user = userEvent.setup();
+    const {closeMobileNav} = renderInDrawer(
+      <SideNavItem label="Home" href="/" isDisabled data-testid="item" />,
+    );
+    const item = screen.getByTestId('item');
+    fireEvent.click(item);
+    item.focus();
+    await user.keyboard('{Enter}');
+    expect(closeMobileNav).not.toHaveBeenCalled();
+  });
+
   it('does not close the mobile nav when a row action is clicked', async () => {
     const user = userEvent.setup();
     const onActionClick = vi.fn();
@@ -2468,7 +2568,7 @@ describe('SideNav keyboard operation', () => {
     expect(screen.getByRole('button', {name: 'Settings'})).toHaveFocus();
   });
 
-  it('skips a disabled item in the tab order', async () => {
+  it('keeps a disabled item in the tab order', async () => {
     const user = userEvent.setup();
     render(
       <SideNav>
@@ -2481,6 +2581,8 @@ describe('SideNav keyboard operation', () => {
     await user.tab();
     expect(screen.getByRole('button', {name: 'Dashboard'})).toHaveFocus();
     await user.tab();
+    expect(screen.getByRole('button', {name: 'Archived'})).toHaveFocus();
+    await user.tab();
     expect(screen.getByRole('button', {name: 'Settings'})).toHaveFocus();
   });
 
@@ -3974,6 +4076,51 @@ describe('SideNavItem collapsed-from-mount rail tooltip', () => {
     expect(spy.mock.contexts).toContain(layer);
   });
 
+  it('describes a disabled rail item on the control that takes focus', async () => {
+    // spec:AST-085 FR5: the disabled control keeps its tab stop, so the label
+    // tooltip has to describe it, not the row around it.
+    renderRail(
+      <SideNavItem
+        label="Analytics (Coming Soon)"
+        icon={StubIcon}
+        href="/analytics"
+        isDisabled
+      />,
+    );
+    await act(async () => {});
+    const button = screen.getByRole('button', {
+      name: 'Analytics (Coming Soon)',
+    });
+    expect(button).not.toHaveAttribute('disabled');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+    expect(railTooltipFor(button)).toHaveTextContent('Analytics (Coming Soon)');
+    expect(button.parentElement).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('shows a disabled rail item its label when Tab focuses it', async () => {
+    // The row listens for the tooltip, but it is not focusable itself, so it
+    // has to hear the focus that bubbles up from the control.
+    const user = userEvent.setup();
+    const spy = vi.spyOn(HTMLElement.prototype, 'showPopover');
+    showPopover = spy;
+    renderRail(
+      <SideNavItem
+        label="Analytics (Coming Soon)"
+        icon={StubIcon}
+        href="/analytics"
+        isDisabled
+      />,
+    );
+    await act(async () => {});
+    const button = screen.getByRole('button', {
+      name: 'Analytics (Coming Soon)',
+    });
+
+    await user.tab();
+    expect(button).toHaveFocus();
+    expect(spy.mock.contexts).toContain(railTooltipFor(button));
+  });
+
   it('describes the link once a disabled item is enabled in the rail', () => {
     const item = (isDisabled: boolean) => (
       <SideNavItem