@astryxdesign/core 0.6.2 → 0.6.3-canary.0788c49

package/src/Kbd/Kbd.test.tsx

@@ -10,13 +10,14 @@
  */
 
 import {render, screen} from '@testing-library/react';
-import {describe, it, expect, afterEach} from 'vitest';
+import {describe, it, expect, afterEach, vi} from 'vitest';
 import {Kbd} from './Kbd';
 
 describe('Kbd', () => {
   const originalPlatform = navigator.platform;
 
   afterEach(() => {
+    vi.restoreAllMocks();
     // Restore platform after any test that spoofs it \u2014 ensures no
     // test pollution even if an assertion fails mid-test.
     Object.defineProperty(navigator, 'platform', {
@@ -72,6 +73,61 @@ describe('Kbd', () => {
     expect(screen.getByText('Esc')).toBeInTheDocument();
   });
 
+  it.each([
+    {alias: 'esc', display: 'Esc', label: 'Escape'},
+    {alias: 'return', display: '\u21B5', label: 'Enter'},
+  ])('normalizes the $alias key alias', ({alias, display, label}) => {
+    render(<Kbd keys={alias} />);
+    expect(screen.getByText(display)).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', label);
+  });
+
+  it.each([
+    {alias: 'esc', canonical: 'escape'},
+    {alias: 'return', canonical: 'enter'},
+  ])('$alias renders identically to $canonical', ({alias, canonical}) => {
+    const {container, rerender} = render(<Kbd keys={canonical} />);
+    const text = container.textContent;
+    const label = screen.getByRole('img').getAttribute('aria-label');
+    rerender(<Kbd keys={alias} />);
+    expect(container.textContent).toBe(text);
+    expect(screen.getByRole('img').getAttribute('aria-label')).toBe(label);
+  });
+
+  it.each([
+    {keys: 'ctrl + ESC', display: 'Esc', label: 'Control + Escape'},
+    {keys: 'shift + RETURN', display: '\u21B5', label: 'Shift + Enter'},
+  ])('normalizes aliases inside the $keys combo', ({keys, display, label}) => {
+    render(<Kbd keys={keys} />);
+    expect(screen.getByText(display)).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', label);
+  });
+
+  it('keeps child keys unique after alias normalization', () => {
+    const consoleError = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const {container} = render(
+      <Kbd keys="escape+esc+ESC+enter+return+return" />,
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(
+      Array.from(container.querySelectorAll('kbd'), key => key.textContent),
+    ).toEqual(['Esc', 'Esc', 'Esc', '↵', '↵', '↵']);
+  });
+
+  it.each(['constructor', '__proto__'])(
+    'renders the unknown %s key without consulting object prototypes',
+    key => {
+      render(<Kbd keys={key} />);
+      expect(screen.getByText(key.toUpperCase())).toBeInTheDocument();
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'aria-label',
+        key.toUpperCase(),
+      );
+    },
+  );
+
   it('exposes a spoken accessible name and hides the glyphs (obs-1)', () => {
     render(<Kbd keys="mod+shift+k" />);
     // The wrapper carries a screen-reader name built from spoken key labels

package/src/Kbd/Kbd.tsx

@@ -4,8 +4,8 @@
 
 /**
  * @file Kbd.tsx
- * @input Uses React, StyleX, theme tokens
- * @output Exports Kbd component and KbdProps
+ * @input Uses React, StyleX, theme tokens, shortcut key names and aliases
+ * @output Exports Kbd component and KbdProps with canonical shortcut labels
  * @position Core implementation; renders styled keyboard shortcut indicators
  *
  * SYNC: When modified, update:
@@ -61,20 +61,25 @@ const styles = stylex.create({
  * Note: `mod` is not in this map — it resolves dynamically via platform
  * detection inside the component.
  */
-const KEY_DISPLAY: Record<string, string> = {
-  ctrl: '\u2303', // ⌃
-  alt: '\u2325', // ⌥
-  shift: '\u21E7', // ⇧
-  enter: '\u21B5', // ↵
-  backspace: '\u232B', // ⌫
-  escape: 'Esc',
-  tab: '\u21E5', // ⇥
-  up: '\u2191',
-  down: '\u2193',
-  left: '\u2190',
-  right: '\u2192',
-  plus: '+',
-};
+const KEY_DISPLAY = new Map<string, string>([
+  ['ctrl', '\u2303'], // ⌃
+  ['alt', '\u2325'], // ⌥
+  ['shift', '\u21E7'], // ⇧
+  ['enter', '\u21B5'], // ↵
+  ['backspace', '\u232B'], // ⌫
+  ['escape', 'Esc'],
+  ['tab', '\u21E5'], // ⇥
+  ['up', '\u2191'],
+  ['down', '\u2193'],
+  ['left', '\u2190'],
+  ['right', '\u2192'],
+  ['plus', '+'],
+]);
+
+const KBD_KEY_ALIASES = new Map<string, string>([
+  ['esc', 'escape'],
+  ['return', 'enter'],
+]);
 
 /**
  * Resolves a key name to its display string. Handles the platform-aware
@@ -85,7 +90,7 @@ function getKeyDisplay(key: string, isMac: boolean): string {
   if (key === 'mod') {
     return isMac ? '\u2318' : 'Ctrl';
   }
-  return KEY_DISPLAY[key] ?? key.toUpperCase();
+  return KEY_DISPLAY.get(key) ?? key.toUpperCase();
 }
 
 /**
@@ -93,26 +98,26 @@ function getKeyDisplay(key: string, isMac: boolean): string {
  * (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
  * accessible name for the shortcut is built from these words instead.
  */
-const KEY_LABEL: Record<string, string> = {
-  ctrl: 'Control',
-  alt: 'Alt',
-  shift: 'Shift',
-  enter: 'Enter',
-  backspace: 'Backspace',
-  escape: 'Escape',
-  tab: 'Tab',
-  up: 'Up arrow',
-  down: 'Down arrow',
-  left: 'Left arrow',
-  right: 'Right arrow',
-  plus: 'Plus',
-};
+const KEY_LABEL = new Map<string, string>([
+  ['ctrl', 'Control'],
+  ['alt', 'Alt'],
+  ['shift', 'Shift'],
+  ['enter', 'Enter'],
+  ['backspace', 'Backspace'],
+  ['escape', 'Escape'],
+  ['tab', 'Tab'],
+  ['up', 'Up arrow'],
+  ['down', 'Down arrow'],
+  ['left', 'Left arrow'],
+  ['right', 'Right arrow'],
+  ['plus', 'Plus'],
+]);
 
 function getKeyLabel(key: string, isMac: boolean): string {
   if (key === 'mod') {
     return isMac ? 'Command' : 'Control';
   }
-  return KEY_LABEL[key] ?? key.toUpperCase();
+  return KEY_LABEL.get(key) ?? key.toUpperCase();
 }
 
 function subscribeToPlatformChanges(): () => void {
@@ -127,7 +132,9 @@ export interface KbdProps extends BaseProps<HTMLSpanElement> {
   ref?: React.Ref<HTMLSpanElement>;
   /**
    * Keyboard shortcut string. Use "+" to separate keys.
-   * Special keys: mod (Cmd on Mac), ctrl, alt, shift, enter, backspace, escape.
+   * Special keys: mod (Cmd on Mac), ctrl, alt, shift, enter, backspace, escape,
+   * tab, up, down, left, and right.
+   * Aliases: "esc" for "escape" and "return" for "enter".
    * Use "plus" to render a literal "+" key (e.g. "shift+plus").
    *
    * @example
@@ -163,11 +170,24 @@ export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
     getServerPlatformSnapshot,
   );
 
-  const parts = keys.split('+').map(key => key.trim().toLowerCase());
+  const keyOccurrences = new Map<string, number>();
+  const parts = keys
+    .split('+')
+    .map(key => key.trim().toLowerCase())
+    .map(sourceKey => {
+      const occurrence = keyOccurrences.get(sourceKey) ?? 0;
+      keyOccurrences.set(sourceKey, occurrence + 1);
+      return {
+        key: KBD_KEY_ALIASES.get(sourceKey) ?? sourceKey,
+        reactKey: `${sourceKey}:${occurrence}`,
+      };
+    });
 
   // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
   // the visual glyphs below are announced meaninglessly by assistive tech.
-  const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
+  const accessibleName = parts
+    .map(({key}) => getKeyLabel(key, isMac))
+    .join(' + ');
 
   return (
     <span
@@ -181,8 +201,8 @@ export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
         className,
         style,
       )}>
-      {parts.map(key => (
-        <kbd key={key} aria-hidden="true" {...stylex.props(styles.kbd)}>
+      {parts.map(({key, reactKey}) => (
+        <kbd key={reactKey} aria-hidden="true" {...stylex.props(styles.kbd)}>
           {getKeyDisplay(key, isMac)}
         </kbd>
       ))}

package/src/Layout/LayoutFooter.doc.mjs

@@ -8,6 +8,23 @@ export const docs = {
   displayName: 'Layout Footer',
   isHiddenFromOverview: true,
   description: 'Bottom bar for action bars, pagination, and status bars.',
+  playground: {
+    defaults: {
+      children: 'Footer content: status bar or actions',
+      hasDivider: true,
+    },
+    wrapper: {
+      component: 'Layout',
+      slotProp: 'footer',
+      props: {
+        content: {
+          __element: 'LayoutContent',
+          props: {},
+          children: 'Main content area',
+        },
+      },
+    },
+  },
   props: [
     {
       name: 'children',

package/src/Link/Link.doc.mjs

@@ -38,7 +38,8 @@ export const docs = {
         {
           name: 'href',
           type: 'string',
-          description: 'Link destination URL',
+          description:
+            'Link destination URL. Astryx-owned links and clickable surfaces block javascript:, vbscript:, and data:text/html after control-character removal, outer-whitespace trimming, and case-insensitive scheme inspection. The same rule covers native anchors, custom routers, Markdown links, and every activation method. Relative paths, fragments, protocol-relative URLs, HTTP(S), mailto, tel, safe custom schemes, and accepted downloads keep their existing behavior. A rejected destination renders inertly without invoking a custom router. There is no bypass prop; exceptional behavior requires caller-owned custom rendering outside this guarantee. Images and other resource URLs have separate policies.',
         },
         {
           name: 'hasUnderline',
@@ -151,7 +152,8 @@ export const docs = {
         {
           name: 'component',
           type: 'LinkComponentType',
-          description: 'Component to use for all link elements',
+          description:
+            'Component to use for all link elements. It receives accepted `href` and `to` values under the shared navigation rule described on the Link `href` prop. Supported structured destinations, including their `protocol`, are checked without changing object identity. If either supplied destination is rejected, Astryx renders inert content without invoking this component; it does not pass undefined or fall back to the other destination.',
           required: true,
         },
         {
@@ -164,6 +166,17 @@ export const docs = {
     },
   ],
   usage: {
+    accessibility: [
+      {
+        name: 'Link text',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'Link text must have at least 4.5:1 contrast with the background behind it. For Pointer down, measure against the pressed overlay the link paints behind its text.',
+      },
+    ],
     description:
       'A styled anchor for inline and standalone text navigation. Supports external links, underline variants, tooltips, and custom link components for router integration. Use it for navigating between pages or to external URLs.',
     bestPractices: [
@@ -344,7 +357,7 @@ export const docsDense = {
       propDescriptions: {
         as: 'Custom component to render instead of <a>',
         label: 'Accessible label (aria-label). Only for non-text content like icon-only links.',
-        href: 'Link destination URL',
+        href: 'Link destination URL. Shared rule blocks javascript:, vbscript:, data:text/html after scheme normalization on every Astryx-owned navigation path. Ordinary URLs, fragments, safe custom schemes, and accepted downloads are preserved. Rejected => inert, no custom router. No bypass prop; exceptional caller-owned rendering is outside the guarantee. Image/resource policy is separate.',
         hasUnderline: 'Always show underline',
         isDisabled: 'Disables link',
         isExternalLink: 'Opens new tab w/ external icon and safe rel tokens',
@@ -365,7 +378,7 @@ export const docsDense = {
       description:
         'Provider setting default link component for all Astryx links in subtree.',
       propDescriptions: {
-        component: 'Component for all link elements',
+        component: 'Component for all link elements. Accepted href/to follow the Link href rule; structured fields including protocol are checked, preserving identity. Either rejected => inert content, no router invocation or fallback.',
         children: 'Subtree',
       },
     },

package/src/Link/Link.test.tsx

@@ -12,6 +12,7 @@
 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';
 
@@ -417,3 +418,26 @@ describe('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/Link.tsx

@@ -45,6 +45,7 @@ import {computeTargetAndRel} from './computeTargetAndRel';
 import {useInteractiveRole} from '../hooks/useInteractiveRole';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useTranslator} from '../i18n';
 
 /**
@@ -368,6 +369,9 @@ export function Link({
             styles.base,
             styles.buttonReset,
             linkColorStyles[color],
+            // The system's pressed overlay behind the text; the hover stays the
+            // colour change above, so a press is the one background it paints.
+            !isDisabled && interactionOverlayStyles.pressedBackgroundColor,
             hasUnderline && styles.hasUnderline,
             isStandalone && styles.standalone,
             isDisabled && styles.disabled,
@@ -427,6 +431,7 @@ export function Link({
           focusOutlineProps.focusVisible(
             styles.base,
             linkColorStyles[color],
+            !isDisabled && interactionOverlayStyles.pressedBackgroundColor,
             hasUnderline && styles.hasUnderline,
             isStandalone && styles.standalone,
             isDisabled && styles.disabled,

package/src/Link/LinkProvider.doc.mjs

@@ -13,7 +13,7 @@ export const docs = {
     description: 'Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   },
   props: [
-    {name: 'component', type: 'LinkComponentType', required: true, description: 'Link component to use for all link elements in the subtree (e.g. Next.js Link).'},
+    {name: 'component', type: 'LinkComponentType', required: true, description: 'Link component to use for all link elements in the subtree (e.g. Next.js Link). It receives accepted `href` and `to` values under the shared navigation rule described on the Link `href` prop. Supported structured destinations, including their `protocol`, are checked without changing object identity. If either supplied destination is rejected, Astryx renders inert content without invoking this component; it does not pass undefined or fall back to the other destination.'},
     {name: 'children', type: 'ReactNode', required: true, description: 'Content to render with the link provider.'},
   ],
 };
@@ -25,6 +25,6 @@ export const docsDense = {
     description: 'Wraps app to replace default <a> tag w/ framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.',
   },
   propDescriptions: {
-    component: 'link component for all link elements in subtree (e.g. Next.js Link)',
+    component: 'link component for all link elements in subtree (e.g. Next.js Link). Accepted href/to follow the Link href rule; structured fields including protocol are checked, preserving identity. Either rejected => inert content, no router invocation or fallback.',
   },
 };

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();
+  }
+});