@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f899313

package/src/Link/Link.test.tsx

@@ -1,457 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Link.test.tsx
- * @input Uses vitest, @testing-library/react, Link component
- * @output Unit tests for Link component behavior
- * @position Testing; validates Link.tsx implementation
- *
- * SYNC: When Link.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {fireEvent, render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {hasPressedArm} from '../__tests__/pressState';
-import {Link} from './Link';
-import {LinkProvider} from './LinkProvider';
-
-function CustomLink({
-  children,
-  ref,
-  ...props
-}: React.ComponentPropsWithRef<'a'>) {
-  return (
-    <a ref={ref} data-custom-link {...props}>
-      {children}
-    </a>
-  );
-}
-
-describe('Link', () => {
-  it('renders children as link text', () => {
-    render(<Link href="/test">Click me</Link>);
-    expect(screen.getByRole('link', {name: 'Click me'})).toBeInTheDocument();
-  });
-
-  it('renders with href attribute', () => {
-    render(<Link href="/destination">Link</Link>);
-    expect(screen.getByRole('link')).toHaveAttribute('href', '/destination');
-  });
-
-  it('renders as a button when href is undefined', () => {
-    render(<Link>Action</Link>);
-    expect(screen.getByRole('button', {name: 'Action'})).toBeInTheDocument();
-  });
-
-  it('renders as a button when href is explicitly undefined', () => {
-    render(<Link href={undefined}>Action</Link>);
-    expect(screen.getByRole('button', {name: 'Action'})).toBeInTheDocument();
-  });
-
-  it('button fallback fires onClick', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    render(<Link onClick={handleClick}>Click me</Link>);
-
-    await user.click(screen.getByRole('button'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('button fallback stays focusable and inert when isDisabled', async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    render(
-      <Link isDisabled onClick={onClick}>
-        Disabled Action
-      </Link>,
-    );
-    const button = screen.getByRole('button');
-    expect(button).not.toHaveAttribute('disabled');
-    expect(button).toHaveAttribute('aria-disabled', 'true');
-    const nativeClick = vi.fn();
-    button.addEventListener('click', nativeClick);
-    await user.tab();
-    expect(button).toHaveFocus();
-    await user.keyboard('{Enter} ');
-    expect(nativeClick).not.toHaveBeenCalled();
-    fireEvent.click(button);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-
-  it('button fallback has type="button"', () => {
-    render(<Link>Action</Link>);
-    expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
-  });
-
-  it('button fallback supports aria-label via label prop', () => {
-    render(
-      <Link label="Close dialog">
-        <span aria-hidden="true">✕</span>
-      </Link>,
-    );
-    expect(screen.getByRole('button')).toHaveAttribute(
-      'aria-label',
-      'Close dialog',
-    );
-  });
-
-  it('does not render aria-label when label is omitted', () => {
-    render(<Link href="/test">Visible text</Link>);
-    expect(screen.getByRole('link')).not.toHaveAttribute('aria-label');
-  });
-
-  it('renders aria-label when label prop is provided', () => {
-    render(
-      <Link label="Accessible label" href="/test">
-        <span aria-hidden="true">🏠</span>
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toHaveAttribute(
-      'aria-label',
-      'Accessible label',
-    );
-  });
-
-  it('renders with different color values', () => {
-    const {rerender} = render(
-      <Link href="/test" color="accent">
-        Accent
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toBeInTheDocument();
-
-    rerender(
-      <Link href="/test" color="secondary">
-        Secondary
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toBeInTheDocument();
-
-    rerender(
-      <Link href="/test" color="inherit">
-        Inherit
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-
-  it('defaults the inner text type to body', () => {
-    render(<Link href="/test">Body link</Link>);
-    expect(screen.getByText('Body link')).toHaveClass('astryx-text');
-    expect(screen.getByText('Body link')).toHaveAttribute('data-type', 'body');
-  });
-
-  it('forwards type="inherit" so the link adopts the surrounding text type', () => {
-    render(
-      <Link href="/test" type="inherit">
-        Inline link
-      </Link>,
-    );
-    // The inner Text renders with the `inherit` type, so font-size/line-height
-    // inherit from the surrounding text rather than imposing the body type.
-    const text = screen.getByText('Inline link');
-    expect(text).toHaveClass('astryx-text');
-    expect(text).toHaveAttribute('data-type', 'inherit');
-    expect(text).not.toHaveAttribute('data-type', 'body');
-  });
-
-  it('applies hasUnderline style when true', () => {
-    render(
-      <Link href="/test" hasUnderline>
-        Underlined Link
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-
-  it('applies isDisabled state correctly', () => {
-    render(
-      <Link href="/test" isDisabled>
-        Disabled Link
-      </Link>,
-    );
-    // The href-less anchor keeps a Tab stop and an explicit link role.
-    const link = screen.getByRole('link', {name: 'Disabled Link'});
-    expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).toHaveAttribute('tabIndex', '0');
-    // Visual classes are preserved in the disabled state.
-    expect(link?.className).toContain('astryx-link');
-  });
-
-  it('disabled link has no href attribute', () => {
-    render(
-      <Link href="/test" isDisabled>
-        Disabled Link
-      </Link>,
-    );
-    const link = screen.getByText('Disabled Link').closest('a');
-    expect(link).not.toBeNull();
-    expect(link).not.toHaveAttribute('href');
-  });
-
-  it('clicking a disabled link cancels default navigation', () => {
-    render(
-      <Link href="/test" isDisabled>
-        Disabled Link
-      </Link>,
-    );
-    const link = screen.getByText('Disabled Link').closest('a');
-    expect(link).not.toBeNull();
-    // fireEvent bypasses pointer-events, simulating programmatic/AT
-    // activation. It returns false when preventDefault was called, i.e.
-    // any default navigation behavior is cancelled.
-    const notCancelled = fireEvent.click(link as HTMLAnchorElement);
-    expect(notCancelled).toBe(false);
-  });
-
-  it('disabled link with onClick fires neither navigation nor the consumer onClick', () => {
-    const handleClick = vi.fn();
-    const {container} = render(
-      <Link href="/test" isDisabled onClick={handleClick}>
-        Disabled Link
-      </Link>,
-    );
-    // With onClick present, a disabled Link renders as a disabled <button>
-    // (useInteractiveRole excludes a disabled href). Either way the rendered
-    // root must carry no live href and never invoke the consumer handler.
-    const el = container.firstElementChild as HTMLElement;
-    expect(el).not.toHaveAttribute('href');
-    fireEvent.click(el);
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('disabled link omits target and rel', () => {
-    render(
-      <Link href="https://example.com" isDisabled isExternalLink>
-        Disabled External
-      </Link>,
-    );
-    const link = screen.getByText('Disabled External').closest('a');
-    expect(link).not.toBeNull();
-    expect(link).not.toHaveAttribute('target');
-    expect(link).not.toHaveAttribute('rel');
-  });
-
-  it('disabled link renders a plain anchor, not the custom LinkComponent', () => {
-    render(
-      <LinkProvider component={CustomLink}>
-        <Link href="/custom" as={CustomLink} isDisabled>
-          Disabled Custom
-        </Link>
-      </LinkProvider>,
-    );
-    const link = screen.getByText('Disabled Custom').closest('a');
-    expect(link).not.toBeNull();
-    expect(link).not.toHaveAttribute('data-custom-link');
-    expect(link).not.toHaveAttribute('href');
-  });
-
-  it('renders external link with icon and target="_blank"', () => {
-    render(
-      <Link href="https://example.com" isExternalLink>
-        External Link
-      </Link>,
-    );
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    expect(link.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('announces the new-tab context via screen-reader text (obs-4)', () => {
-    render(
-      <Link href="https://example.com" isExternalLink>
-        Docs
-      </Link>,
-    );
-    // The link's accessible name includes the new-tab hint (the icon is
-    // decorative).
-    expect(
-      screen.getByRole('link', {name: 'Docs (opens in new tab)'}),
-    ).toBeInTheDocument();
-  });
-
-  it('supports a custom newTabLabel for localization', () => {
-    render(
-      <Link
-        href="https://example.com"
-        isExternalLink
-        newTabLabel="(new window)">
-        Docs
-      </Link>,
-    );
-    expect(
-      screen.getByRole('link', {name: 'Docs (new window)'}),
-    ).toBeInTheDocument();
-  });
-
-  it('does not add new-tab text to non-external links', () => {
-    render(<Link href="/internal">Internal</Link>);
-    expect(screen.getByRole('link', {name: 'Internal'})).toBeInTheDocument();
-  });
-
-  it('renders external link with existing rel merged', () => {
-    render(
-      <Link href="https://example.com" isExternalLink rel="sponsored">
-        External Link
-      </Link>,
-    );
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('rel', 'sponsored noopener noreferrer');
-  });
-
-  it('renders with custom target without isExternalLink', () => {
-    render(
-      <Link href="/test" target="_parent">
-        Parent Link
-      </Link>,
-    );
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('target', '_parent');
-  });
-
-  it('adds safe rel tokens for explicit target="_blank"', () => {
-    render(
-      <Link href="/test" target="_blank">
-        Blank Link
-      </Link>,
-    );
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-  });
-
-  it('preserves existing rel tokens for explicit target="_blank"', () => {
-    render(
-      <Link href="/test" target="_blank" rel="sponsored noopener">
-        Blank Link
-      </Link>,
-    );
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('rel', 'sponsored noopener noreferrer');
-  });
-
-  it('handles click events', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn((e: React.MouseEvent<HTMLAnchorElement>) => {
-      e.preventDefault();
-    });
-    render(
-      <Link href="/test" onClick={handleClick}>
-        Click me
-      </Link>,
-    );
-
-    await user.click(screen.getByRole('link'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('forwards ref correctly', () => {
-    const ref = vi.fn();
-    render(
-      <Link href="/test" ref={ref}>
-        Test
-      </Link>,
-    );
-    expect(ref).toHaveBeenCalledWith(expect.any(HTMLAnchorElement));
-  });
-
-  it('renders standalone link', () => {
-    render(
-      <Link href="/standalone" isStandalone>
-        Standalone Link
-      </Link>,
-    );
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-
-  it('renders link with tooltip', () => {
-    render(
-      <Link href="/settings" tooltip="Configure settings">
-        Settings
-      </Link>,
-    );
-    const link = screen.getByRole('link', {name: 'Settings'});
-    expect(link).toBeInTheDocument();
-  });
-
-  it('renders custom component when as is provided', () => {
-    render(
-      <Link href="/custom" as={CustomLink}>
-        Custom Link
-      </Link>,
-    );
-    const link = screen.getByRole('link', {name: 'Custom Link'});
-    expect(link).toHaveAttribute('data-custom-link');
-    expect(link).toHaveAttribute('href', '/custom');
-  });
-
-  it('renders custom component from LinkProvider', () => {
-    render(
-      <LinkProvider component={CustomLink}>
-        <Link href="/provider">Provider Link</Link>
-      </LinkProvider>,
-    );
-    const link = screen.getByRole('link', {name: 'Provider Link'});
-    expect(link).toHaveAttribute('data-custom-link');
-  });
-
-  it('as prop overrides LinkProvider', () => {
-    function AnotherLink({
-      children,
-      ref,
-      ...props
-    }: React.ComponentPropsWithRef<'a'>) {
-      return (
-        <a ref={ref} data-another-link {...props}>
-          {children}
-        </a>
-      );
-    }
-    render(
-      <LinkProvider component={AnotherLink}>
-        <Link href="/override" as={CustomLink}>
-          Override Link
-        </Link>
-      </LinkProvider>,
-    );
-    const link = screen.getByRole('link', {name: 'Override Link'});
-    expect(link).toHaveAttribute('data-custom-link');
-    expect(link).not.toHaveAttribute('data-another-link');
-  });
-
-  it('renders astryx-* class names for theme targeting', () => {
-    render(
-      <Link href="/test" color="secondary">
-        Themed Link
-      </Link>,
-    );
-    const link = screen.getByRole('link', {name: 'Themed Link'});
-    expect(link.className).toContain('astryx-link');
-    expect(link).toHaveAttribute('data-color', 'secondary');
-  });
-});
-
-describe('pressed state', () => {
-  it('paints the pressed overlay behind a link while it is pressed', () => {
-    render(<Link href="/docs">Docs</Link>);
-    expect(hasPressedArm(screen.getByRole('link', {name: 'Docs'}))).toBe(true);
-  });
-
-  it('paints it on the button form too', () => {
-    render(<Link onClick={() => {}}>Open</Link>);
-    expect(hasPressedArm(screen.getByRole('button', {name: 'Open'}))).toBe(
-      true,
-    );
-  });
-
-  it('does not press a disabled link', () => {
-    render(
-      <Link href="/docs" isDisabled>
-        Docs
-      </Link>,
-    );
-    expect(hasPressedArm(screen.getByText('Docs').closest('a')!)).toBe(false);
-  });
-});

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

@@ -1,153 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y scope ^(internal/a11y-spec/src/patterns/link\.|packages/core/src/Link/|apps/storybook/stories/LinkA11y)
-
-/**
- * Real-browser and accessibility-tree binding evidence for Link.
- *
- * A link's activation leaves no trace on the link, so the binding counts every
- * navigation the story requests: native navigations through the browser's
- * Navigation API (cancelled, so the story stays mounted), router navigations
- * the story's router component records, and new tabs the page opens.
- */
-
-import {expect, test, type CDPSession, type Page} from '@playwright/test';
-import {
-  LINK_PATTERN,
-  blockingResults,
-  checkAccessibilitySpec,
-  formatFailures,
-  neverExercised,
-  summarize,
-  type BindingResult,
-} from '@astryxdesign/a11y-spec';
-import {
-  createChromiumHarness,
-  holdMotionStill,
-} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-import {LINK_A11Y_STATES, type LinkA11yRow} from './Link.a11y.states';
-
-const SUBJECT_SELECTOR = '[data-a11y-link]';
-const NEW_TAB_SETTLE_MS = 500;
-let storybook: StaticServer;
-
-interface NavigationWindow extends Window {
-  __a11yLinkNavigations?: number;
-}
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => storybook?.close());
-
-function storyUrl(id: string): string {
-  return `${storybook.origin}/iframe.html?id=${id}&viewMode=story`;
-}
-
-async function countNavigations(
-  page: Page,
-  opensNewTab: boolean,
-): Promise<() => Promise<number>> {
-  let newTabs = 0;
-  page.context().on('page', opened => {
-    newTabs += 1;
-    void opened.close();
-  });
-  await page.evaluate(() => {
-    const target = window as NavigationWindow & {navigation: EventTarget};
-    target.__a11yLinkNavigations = 0;
-    target.navigation.addEventListener('navigate', event => {
-      target.__a11yLinkNavigations = (target.__a11yLinkNavigations ?? 0) + 1;
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-    });
-  });
-  return async () => {
-    // A new tab reaches the test through the browser's target events, after
-    // the click or key that opened it has returned. Give it time to arrive so
-    // a later reading cannot miss a navigation an earlier one started.
-    if (opensNewTab) {
-      await page.waitForTimeout(NEW_TAB_SETTLE_MS);
-    }
-    const inPage = await page.evaluate(
-      () => (window as NavigationWindow).__a11yLinkNavigations ?? 0,
-    );
-    return inPage + newTabs;
-  };
-}
-
-async function runState(
-  page: Page,
-  cdp: CDPSession,
-  state: LinkA11yRow,
-): Promise<BindingResult> {
-  let navigations: () => Promise<number> = async () => {
-    throw new Error('the Link story was not mounted');
-  };
-  return checkAccessibilitySpec({
-    spec: LINK_PATTERN,
-    binding: 'Link',
-    state: state.id,
-    facts: state.facts,
-    mount: async () => {
-      await page.goto(storyUrl(state.storyId), {waitUntil: 'load'});
-      await holdMotionStill(page);
-      const subject = page.locator(SUBJECT_SELECTOR);
-      await subject.waitFor({state: 'visible'});
-      await expect(subject).toHaveCount(1);
-      navigations = await countNavigations(
-        page,
-        state.id === 'external-new-tab',
-      );
-      return createChromiumHarness({page, cdp, subject});
-    },
-    activations: async () => navigations(),
-  });
-}
-
-// Checking coverage runs every state again, which on a loaded runner nears
-// the per-test timeout as one test. It runs as one serial part per state,
-// sharing their results, then one check over all of them.
-test.describe('every Link expectation is exercised by at least one Link state', () => {
-  test.describe.configure({mode: 'serial'});
-  const results: BindingResult[] = [];
-
-  for (const state of LINK_A11Y_STATES) {
-    test(`runs ${state.id}`, async ({page}) => {
-      const cdp = await page.context().newCDPSession(page);
-      results.push(await runState(page, cdp, state));
-    });
-  }
-
-  test('no expectation is left unexercised', () => {
-    // Every part ran in this worker; this test alone proves nothing.
-    expect(results.map(result => result.state).sort()).toEqual(
-      LINK_A11Y_STATES.map(state => state.id).sort(),
-    );
-    expect(neverExercised(results)).toEqual([]);
-  });
-});
-
-for (const state of LINK_A11Y_STATES) {
-  test(`Link [${state.id}] — ${state.summary}`, async ({page}) => {
-    const cdp = await page.context().newCDPSession(page);
-    const result = await runState(page, cdp, state);
-    const report = summarize(LINK_PATTERN, [result]);
-    expect(formatFailures(blockingResults([result]))).toBe('');
-    expect(
-      result.results
-        .filter(row => row.status === 'fail')
-        .map(row => `${row.expectation}: ${row.detail ?? ''}`),
-    ).toEqual([]);
-    expect(report.unrunLayers).toEqual([]);
-    expect(report.counts.unexpectedPass).toBe(0);
-  });
-}

package/src/Link/__tests__/Link.a11y.renders.tsx

@@ -1,97 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/** Stable Link renders shared by jsdom, Storybook, and Chromium. */
-
-import type {ComponentProps, MouseEvent, ReactElement} from 'react';
-import {Icon} from '../../Icon';
-import {Link} from '../Link';
-import {LinkProvider} from '../LinkProvider';
-import {LINK_A11Y_DESTINATION, type LinkA11yRow} from './Link.a11y.states';
-
-interface NavigationWindow extends Window {
-  __a11yLinkNavigations?: number;
-}
-
-/**
- * A minimal client-side router link. It takes over activation the way router
- * links do — cancel the browser navigation, then navigate itself — and counts
- * each navigation on the window, where the browser binding reads it.
- */
-function RouterLink({onClick, children, ...props}: ComponentProps<'a'>) {
-  const navigate = (event: MouseEvent<HTMLAnchorElement>) => {
-    onClick?.(event);
-    if (event.defaultPrevented) {
-      return;
-    }
-    event.preventDefault();
-    const target = window as NavigationWindow;
-    target.__a11yLinkNavigations = (target.__a11yLinkNavigations ?? 0) + 1;
-  };
-  return (
-    // eslint-disable-next-line @astryx/no-hardcoded-anchor -- this stands in for a third-party router's own anchor, which Link receives through LinkProvider and `as`.
-    <a {...props} data-a11y-link-router onClick={navigate}>
-      {children}
-    </a>
-  );
-}
-
-/** A tab stop after the link, so focus has somewhere to go when it leaves. */
-function Frame({children}: {children: ReactElement}) {
-  return (
-    <div>
-      {children}
-      <button type="button">After</button>
-    </div>
-  );
-}
-
-export const LINK_A11Y_RENDERS: Readonly<
-  Record<LinkA11yRow['id'], () => ReactElement>
-> = {
-  'text-native': () => (
-    <Frame>
-      <Link data-a11y-link href={LINK_A11Y_DESTINATION}>
-        Documentation
-      </Link>
-    </Frame>
-  ),
-  'icon-labelled': () => (
-    <Frame>
-      <Link data-a11y-link href={LINK_A11Y_DESTINATION} label="Close dialog">
-        <Icon icon="close" />
-      </Link>
-    </Frame>
-  ),
-  'current-page': () => (
-    <Frame>
-      <Link aria-current="page" data-a11y-link href={LINK_A11Y_DESTINATION}>
-        Overview
-      </Link>
-    </Frame>
-  ),
-  'external-new-tab': () => (
-    <Frame>
-      <Link data-a11y-link href={LINK_A11Y_DESTINATION} isExternalLink>
-        GitHub
-      </Link>
-    </Frame>
-  ),
-  'provider-router': () => (
-    <LinkProvider component={RouterLink}>
-      <Frame>
-        <Link data-a11y-link href="/projects">
-          Projects
-        </Link>
-      </Frame>
-    </LinkProvider>
-  ),
-  'as-router': () => (
-    <Frame>
-      <Link as={RouterLink} data-a11y-link href="/settings">
-        Settings
-      </Link>
-    </Frame>
-  ),
-};