@astryxdesign/core 0.6.2 → 0.6.3-canary.0899f21

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

@@ -0,0 +1,261 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Link.navigation.a11y.chromium.spec.ts
+ * @input Built Storybook navigation fixture and real Chromium activation
+ * @output Blocked-scheme and accepted-navigation evidence across every sink
+ * @position Browser proof for the shared navigation-destination contract
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+const storyId = 'core-link-navigation--destinations';
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+async function mount(page: Page, href: string) {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${storyId}&viewMode=story`,
+  );
+  await expect(page.getByTestId('navigation-fixture')).toBeVisible();
+  await page.evaluate(
+    ({storyId, href}) => {
+      const channel = (
+        window as unknown as {
+          __STORYBOOK_ADDONS_CHANNEL__: {
+            emit: (event: string, payload: unknown) => void;
+          };
+        }
+      ).__STORYBOOK_ADDONS_CHANNEL__;
+      channel.emit('updateStoryArgs', {storyId, updatedArgs: {href}});
+    },
+    {storyId, href},
+  );
+  await expect(page.getByTestId('navigation-fixture')).toHaveAttribute(
+    'data-destination',
+    href,
+  );
+}
+
+const blocked = [
+  'javascript:window.__navigationExecuted=true',
+  'vbscript:MsgBox(1)',
+  'data:text/html,<script>window.__navigationExecuted=true</script>',
+  ' \u0000JaVa\tsCrIpT:window.__navigationExecuted=true',
+];
+
+for (const href of blocked) {
+  test(`rejected ${JSON.stringify(href)} is inert across native, router, Markdown, and imperative paths`, async ({
+    page,
+    context,
+  }) => {
+    await mount(page, href);
+    const originalUrl = page.url();
+    await page.evaluate(() => {
+      (
+        window as unknown as {__navigationExecuted: boolean}
+      ).__navigationExecuted = false;
+    });
+    const pagesBefore = context.pages().length;
+    for (const id of [
+      'native',
+      'provider',
+      'as',
+      'structured',
+      'citation',
+      'download',
+    ]) {
+      const target = page.getByTestId(id);
+      await expect(target).not.toHaveAttribute('href');
+      await expect(target).not.toHaveAttribute('data-router');
+      await target.click();
+      await target.click({button: 'middle'});
+    }
+    await expect(page.getByTestId('markdown').locator('a')).toHaveCount(0);
+    await expect(page.getByTestId('delegated').locator('a[href]')).toHaveCount(
+      0,
+    );
+    for (const id of ['imperative', 'imperative-blank', 'delegated']) {
+      const target =
+        id === 'delegated'
+          ? page.getByText('Delegated card surface', {exact: true})
+          : page.getByTestId(id);
+      await target.click();
+      await target.click({modifiers: ['Control']});
+      await target.click({modifiers: ['Meta']});
+      await target.click({button: 'middle'});
+    }
+    // Drain browser activation tasks before checking that no sink fired.
+    await page.evaluate(
+      async () =>
+        new Promise<void>(resolve =>
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+        ),
+    );
+    expect(page.url()).toBe(originalUrl);
+    expect(context.pages()).toHaveLength(pagesBefore);
+    expect(
+      await page.evaluate(
+        () =>
+          (window as unknown as {__navigationExecuted: boolean})
+            .__navigationExecuted,
+      ),
+    ).toBe(false);
+  });
+}
+
+test('ordinary schemes keep native attributes, custom routing, and downloads', async ({
+  page,
+}) => {
+  for (const href of [
+    '#fragment',
+    '/relative',
+    'https://example.com/docs',
+    'http://example.com/docs',
+    'mailto:a@example.com',
+    'tel:+1234567890',
+    'custom:document',
+    'data:text/plain,download',
+  ]) {
+    await mount(page, href);
+    for (const id of [
+      'native',
+      'provider',
+      'as',
+      'structured',
+      'citation',
+      'download',
+    ]) {
+      await expect(page.getByTestId(id)).toHaveAttribute('href', href);
+    }
+    for (const id of ['provider', 'as', 'structured']) {
+      await expect(page.getByTestId(id)).toHaveAttribute('data-router', 'true');
+    }
+    await expect(page.getByTestId('download')).toHaveAttribute(
+      'download',
+      'note.txt',
+    );
+    await expect(page.getByTestId('markdown').locator('a')).toHaveAttribute(
+      'href',
+      href,
+    );
+  }
+});
+
+for (const id of [
+  'native',
+  'provider',
+  'as',
+  'structured',
+  'imperative',
+  'delegated',
+]) {
+  test(`${id} retains real same-tab navigation`, async ({page}) => {
+    const href = '/navigation-destination?source=' + id;
+    await page.route('**/navigation-destination?*', async route =>
+      route.fulfill({
+        contentType: 'text/html',
+        body: '<h1>Destination reached</h1>',
+      }),
+    );
+    await mount(page, href);
+    const target =
+      id === 'delegated'
+        ? page.getByText('Delegated card surface', {exact: true})
+        : page.getByTestId(id);
+    await target.click();
+    await expect(page).toHaveURL(`${storybook.origin}${href}`);
+    await expect(
+      page.getByRole('heading', {name: 'Destination reached'}),
+    ).toBeVisible();
+  });
+}
+
+for (const activation of ['blank', 'control', 'meta', 'middle'] as const) {
+  test(`imperative ${activation} retains real new-tab navigation`, async ({
+    page,
+    context,
+  }) => {
+    const href = `${storybook.origin}/navigation-destination?source=${activation}`;
+    await context.route('**/navigation-destination?*', async route =>
+      route.fulfill({
+        contentType: 'text/html',
+        body: '<h1>Destination reached</h1>',
+      }),
+    );
+    await mount(page, href);
+    const originalUrl = page.url();
+    const opened = context.waitForEvent('page');
+    await page
+      .getByTestId(activation === 'blank' ? 'imperative-blank' : 'imperative')
+      .click({
+        button: activation === 'middle' ? 'middle' : 'left',
+        modifiers:
+          activation === 'control'
+            ? ['Control']
+            : activation === 'meta'
+              ? ['Meta']
+              : [],
+      });
+    const popup = await opened;
+    await expect(popup).toHaveURL(href);
+    await expect(
+      popup.getByRole('heading', {name: 'Destination reached'}),
+    ).toBeVisible();
+    expect(page.url()).toBe(originalUrl);
+    await popup.close();
+  });
+}
+
+test('native anchors retain real downloads and same-document fragments', async ({
+  page,
+}) => {
+  await mount(page, 'data:text/plain,download');
+  const downloadEvent = page.waitForEvent('download');
+  await page.getByTestId('download').click();
+  const download = await downloadEvent;
+  expect(download.suggestedFilename()).toBe('note.txt');
+  expect(await download.failure()).toBeNull();
+  await mount(page, '#destination');
+  await page.getByTestId('native').click();
+  await expect(page).toHaveURL(/#destination$/);
+});
+
+test('native anchors retain real middle-click and external target navigation', async ({
+  page,
+  context,
+}) => {
+  const href = 'https://example.com/navigation-destination';
+  await context.route(href, async route =>
+    route.fulfill({
+      contentType: 'text/html',
+      body: '<h1>External destination</h1>',
+    }),
+  );
+  for (const id of ['native', 'citation']) {
+    await mount(page, href);
+    const opened = context.waitForEvent('page');
+    await page
+      .getByTestId(id)
+      .click({button: id === 'native' ? 'middle' : 'left'});
+    const popup = await opened;
+    await expect(popup).toHaveURL(href);
+    await expect(
+      popup.getByRole('heading', {name: 'External destination'}),
+    ).toBeVisible();
+    await popup.close();
+  }
+});

package/src/Link/useLinkComponent.test.tsx

@@ -208,6 +208,339 @@ describe('useLinkComponent — to prop', () => {
   });
 });
 
+// =============================================================================
+// href scheme rule
+// =============================================================================
+
+describe('useLinkComponent — href scheme rule', () => {
+  // Kept in a const so the JSX stays lint-clean — the test is ABOUT this URL.
+  const scriptUrl = 'javascript:alert(1)';
+
+  function HrefConsumer({href}: {href: string}) {
+    const LinkComponent = useLinkComponent();
+    return (
+      <LinkComponent href={href} data-testid="resolved-link">
+        Link
+      </LinkComponent>
+    );
+  }
+
+  function propSpy() {
+    return vi.fn(
+      ({
+        children,
+        ...props
+      }: {
+        children?: React.ReactNode;
+        [key: string]: unknown;
+      }) => (
+        <a data-testid="spy-link" href={props.href as string}>
+          {children}
+        </a>
+      ),
+    );
+  }
+
+  it('forwards ordinary hrefs to a custom component untouched', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        <HrefConsumer href="/docs/button" />
+      </LinkProvider>,
+    );
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({href: '/docs/button', to: '/docs/button'}),
+    );
+  });
+
+  it('withholds a script-scheme href from a custom component (href and to alike)', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        {/* eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never navigates */}
+        <HrefConsumer href={scriptUrl} />
+      </LinkProvider>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+    expect(screen.getByTestId('resolved-link')).not.toHaveAttribute('href');
+  });
+
+  it('an explicit `to` passes the same check instead of riding through ...rest', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    function ToConsumer({to}: {to: string}) {
+      const LinkComponent = useLinkComponent();
+      return (
+        <LinkComponent href="/fallback" to={to} data-testid="resolved-link">
+          Link
+        </LinkComponent>
+      );
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        {/* eslint-disable-next-line @eslint-react/dom-no-script-url -- the test proves this URL never reaches the router */}
+        <ToConsumer to={scriptUrl} />
+      </LinkProvider>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+    expect(screen.getByTestId('resolved-link')).not.toHaveAttribute('href');
+  });
+
+  it('an ordinary explicit `to` keeps its precedence over href', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    function ToConsumer() {
+      const LinkComponent = useLinkComponent();
+      return (
+        <LinkComponent
+          href="/fallback"
+          to="/routed"
+          data-testid="resolved-link">
+          Link
+        </LinkComponent>
+      );
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        <ToConsumer />
+      </LinkProvider>,
+    );
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({href: '/fallback', to: '/routed'}),
+    );
+  });
+});
+
+// =============================================================================
+// structured router `to`
+// =============================================================================
+
+describe('useLinkComponent — structured router `to`', () => {
+  const scriptUrl = 'javascript:alert(1)';
+
+  function propSpy() {
+    return vi.fn(
+      ({
+        children,
+        ...props
+      }: {
+        children?: React.ReactNode;
+        [key: string]: unknown;
+      }) => (
+        <a data-testid="spy-link" href={props.href as string}>
+          {children}
+        </a>
+      ),
+    );
+  }
+
+  function ToConsumer({to}: {to: unknown}) {
+    const LinkComponent = useLinkComponent();
+    return (
+      <LinkComponent href="/fallback" to={to} data-testid="resolved-link">
+        Link
+      </LinkComponent>
+    );
+  }
+
+  it('preserves a structured destination for the router (no crash, same object)', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    const to = {pathname: '/docs', search: '?q=1', hash: '#top'};
+    render(
+      <LinkProvider component={SpyLink}>
+        <ToConsumer to={to} />
+      </LinkProvider>,
+    );
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({href: '/fallback', to}),
+    );
+    expect(spy.mock.calls[0][0].to).toBe(to);
+  });
+
+  it('preserves a structured destination that carries no pathname', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    const to = {search: '?page=2'};
+    render(
+      <LinkProvider component={SpyLink}>
+        <ToConsumer to={to} />
+      </LinkProvider>,
+    );
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({to}));
+  });
+
+  it('withholds a structured destination whose pathname is a script scheme', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        <ToConsumer to={{pathname: scriptUrl}} />
+      </LinkProvider>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+    expect(screen.getByTestId('resolved-link')).not.toHaveAttribute('href');
+  });
+
+  it('withholds a structured destination whose href is a script scheme', () => {
+    const spy = propSpy();
+    function SpyLink(props: {[key: string]: unknown}) {
+      return spy(props);
+    }
+    render(
+      <LinkProvider component={SpyLink}>
+        <ToConsumer to={{href: scriptUrl}} />
+      </LinkProvider>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+    expect(screen.getByTestId('resolved-link')).not.toHaveAttribute('href');
+  });
+});
+
+// =============================================================================
+// Shared native and router boundary
+// =============================================================================
+
+describe('useLinkComponent — rejected destinations are inert', () => {
+  function Consumer({
+    href,
+    to,
+    as,
+    onClick,
+    linkRef,
+  }: {
+    href?: unknown;
+    to?: unknown;
+    as?: LinkComponentType;
+    onClick?: () => void;
+    linkRef?: React.Ref<HTMLAnchorElement>;
+  }) {
+    const Component = useLinkComponent(as);
+    return (
+      <Component
+        href={href}
+        to={to}
+        ref={linkRef}
+        onClick={onClick}
+        className="consumer-class"
+        aria-label="Destination"
+        data-testid="destination">
+        Go
+      </Component>
+    );
+  }
+
+  for (const mode of ['native', 'provider', 'as'] as const) {
+    it.each([
+      {href: 'javascript:alert(1)'},
+      {href: 'vbscript:MsgBox(1)'},
+      {href: 'data:text/html,<b>x</b>'},
+      {href: 'java\nscript:alert(1)'},
+      {href: '/safe', to: 'javascript:alert(1)'},
+      {href: 'vbscript:MsgBox(1)', to: '/safe'},
+      {href: {protocol: 'javascript:', pathname: 'alert(1)'}},
+      {href: '/safe', to: {protocol: 'data:', pathname: 'text/html,x'}},
+    ])(`${mode}: rejects %j without calling a router`, props => {
+      const router = vi.fn(() => {
+        throw new Error('rejected router invoked');
+      });
+      const onClick = vi.fn();
+      const linkRef = vi.fn();
+      render(
+        <LinkProvider component={mode === 'provider' ? router : 'a'}>
+          <Consumer
+            {...props}
+            as={mode === 'as' ? router : undefined}
+            onClick={onClick}
+            linkRef={linkRef}
+          />
+        </LinkProvider>,
+      );
+      const node = screen.getByTestId('destination');
+      expect(router).not.toHaveBeenCalled();
+      expect(node.tagName).toBe('A');
+      expect(node).not.toHaveAttribute('href');
+      expect(node).not.toHaveAttribute('to');
+      expect(node).not.toHaveAttribute('aria-disabled');
+      expect(node).toHaveAttribute('aria-label', 'Destination');
+      expect(node).toHaveClass('consumer-class');
+      expect(linkRef.mock.calls[0][0]).toBe(node);
+      node.click();
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+  }
+
+  it.each([
+    '/relative',
+    '#fragment',
+    'https://example.com',
+    'http://example.com',
+    'mailto:a@example.com',
+    'tel:+1234567890',
+    'custom:document',
+    'data:text/plain,download',
+  ])('preserves native href and download affordances for %s', href => {
+    function Download() {
+      const Component = useLinkComponent();
+      return (
+        <Component
+          href={href}
+          download="note.txt"
+          target="_blank"
+          rel="noopener"
+          data-testid="download">
+          Download
+        </Component>
+      );
+    }
+    render(<Download />);
+    const node = screen.getByTestId('download');
+    expect(node).toHaveAttribute('href', href);
+    expect(node).toHaveAttribute('download', 'note.txt');
+    expect(node).toHaveAttribute('target', '_blank');
+    expect(node).toHaveAttribute('rel', 'noopener');
+  });
+
+  it('preserves both structured prop identities and safe explicit precedence', () => {
+    const router = vi.fn<(props: {href?: unknown; to?: unknown}) => null>(
+      () => null,
+    );
+    const href = {
+      protocol: 'https:',
+      hostname: 'example.com',
+      pathname: '/docs',
+    };
+    const to = {pathname: '/next', search: '?q=1', hash: '#top'};
+    render(<Consumer as={router} href={href} to={to} />);
+    expect(router.mock.calls[0][0].href).toBe(href);
+    expect(router.mock.calls[0][0].to).toBe(to);
+  });
+
+  it('keeps the native node stable while accepted props update', () => {
+    const {rerender} = render(<Consumer href="/first" />);
+    const node = screen.getByTestId('destination');
+    rerender(<Consumer href="/second" />);
+    expect(screen.getByTestId('destination')).toBe(node);
+    expect(node).toHaveAttribute('href', '/second');
+  });
+});
+
 // =============================================================================
 // LinkProvider
 // =============================================================================