@transferwise/components 0.0.0-experimental-fa3aa98 → 0.0.0-experimental-f4a328f

package/src/Calendar/{TableLink → tableLink}/TableLink.tsx

@@ -3,7 +3,6 @@ import { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import messages from '../Calendar.messages';
-import SentimentSurface from '../../SentimentSurface';
 
 interface TableLinkProps {
   item: number;
@@ -11,11 +10,9 @@ interface TableLinkProps {
   title?: string;
   longTitle?: string;
   active: boolean;
-  outOfRange: boolean;
   disabled: boolean;
   today: boolean;
   autofocus?: boolean;
-  disabledReasonId?: string;
   onClick: (item: number) => void;
 }
 
@@ -25,11 +22,9 @@ const TableLink = ({
   title,
   longTitle,
   active,
-  outOfRange,
   disabled,
   today,
   autofocus,
-  disabledReasonId,
   onClick,
 }: TableLinkProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -43,49 +38,39 @@ const TableLink = ({
     }
   }, [autofocus]);
 
-  const onCalendarClick = (event: React.MouseEvent) => {
+  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
-    onClick(item);
+    if (!disabled) {
+      onClick(item);
+    }
   };
 
-  const isUnavailable = outOfRange || disabled;
-
   const calculateAriaLabel = () => {
-    let label = longTitle || title || '';
     if (active) {
-      label += `, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
-    }
-    if (isUnavailable) {
-      label += `, ${intl.formatMessage(messages.notAvailable)}`;
+      return `${longTitle || title || ''}, ${intl.formatMessage(
+        messages.selected,
+      )} ${intl.formatMessage(messages[type])}`;
     }
-    return label;
+    return longTitle || title;
   };
 
   return (
-    <SentimentSurface
-      // @ts-expect-error - Generic forwardRef limitation in SentimentSurface
+    <button
       ref={buttonRef}
-      as="button"
-      data-calendar-cell
-      aria-describedby={isUnavailable ? disabledReasonId : undefined}
-      aria-disabled={isUnavailable || undefined}
-      aria-label={calculateAriaLabel()}
-      aria-pressed={active}
+      type="button"
       className={clsx(
-        `wds-Calendar__option--${type}`,
         `tw-date-lookup-${type}-option np-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
-        { disabled: !!isUnavailable },
       )}
-      hasBaseStyles={false}
-      sentiment={isUnavailable ? 'negative' : 'neutral'}
+      disabled={disabled}
       tabIndex={autofocus ? 0 : -1}
-      type="button"
+      aria-label={calculateAriaLabel()}
+      aria-pressed={active}
       onClick={onCalendarClick}
     >
       {title || item}
-    </SentimentSurface>
+    </button>
   );
 };
 

package/src/DateLookup/DateLookup.test.tsx

@@ -110,13 +110,24 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -7],
       ['{ArrowDown}', +7],
-    ])("handles '%s' to step %d day(s) without changing value", async (text: string) => {
+    ])("handles '%s' to step %d day(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
+      expect(handleChange).not.toHaveBeenCalled();
+
       await user.keyboard(text);
 
-      expect(handleChange).not.toHaveBeenCalled();
+      const value = new Date(initialValue);
+      value.setDate(initialValue.getDate() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
     });
   });
 
@@ -126,7 +137,7 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d year(s) without changing value", async (text: string) => {
+    ])("handles '%s' to step %d year(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
@@ -135,9 +146,20 @@ describe('DateLookup', () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
+      expect(handleChange).not.toHaveBeenCalled();
+
       await user.keyboard(text);
 
-      expect(handleChange).not.toHaveBeenCalled();
+      const value = new Date(initialValue);
+      value.setFullYear(initialValue.getFullYear() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
+
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
+
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
     });
   });
 
@@ -147,7 +169,7 @@ describe('DateLookup', () => {
       ['{ArrowRight}', +1],
       ['{ArrowUp}', -4],
       ['{ArrowDown}', +4],
-    ])("handles '%s' to step %d month(s) without changing value", async (text: string) => {
+    ])("handles '%s' to step %d month(s)", async (text: string, step: number) => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
@@ -160,39 +182,20 @@ describe('DateLookup', () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
-      await user.keyboard(text);
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('focus vs selection separation', () => {
-    it('does not call onChange during arrow key navigation', async () => {
-      const handleChange = jest.fn();
-      render(<DateLookup value={new Date(2020, 0, 15)} onChange={handleChange} />);
-
-      // Open the panel
-      await user.click(screen.getByRole('button'));
       expect(handleChange).not.toHaveBeenCalled();
 
-      await user.keyboard('{ArrowRight}');
-
-      expect(handleChange).not.toHaveBeenCalled();
-    });
+      await user.keyboard(text);
 
-    it('calls onChange when Enter is pressed on a focused date', async () => {
-      const handleChange = jest.fn();
-      render(<DateLookup value={new Date(2020, 0, 15)} onChange={handleChange} />);
+      const value = new Date(initialValue);
+      value.setMonth(initialValue.getMonth() + step);
+      expect(handleChange).toHaveBeenCalledWith(value);
 
-      // Open the panel
-      await user.click(screen.getByRole('button'));
-      expect(handleChange).not.toHaveBeenCalled();
-
-      // Arrow to next date then confirm with Enter
-      await user.keyboard('{ArrowRight}');
-      await user.keyboard('{Enter}');
+      await user.keyboard('{Escape}');
+      await act(async () => {
+        await jest.runOnlyPendingTimersAsync();
+      });
 
-      expect(handleChange).toHaveBeenCalledWith(new Date(2020, 0, 16));
+      expect(handleChange).toHaveBeenCalledWith(initialValue);
     });
   });
 });
@@ -226,7 +229,7 @@ describe('DateLookup (events)', () => {
     const today = new Date();
     const todayDateLabel = today.toLocaleDateString('en-GB', {
       day: 'numeric',
-      month: 'long',
+      month: 'numeric',
       year: 'numeric',
     });
     const expectedHeaderText = today.toLocaleDateString('en-GB', {

package/src/DateLookup/DateLookup.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
 import Calendar from '../Calendar';
-import type { DateChangeMeta, DisabledRules, OnDateSelectParams } from '../Calendar/Calendar.types';
 import {
   Size,
   MonthFormat,
@@ -16,37 +15,19 @@ import { OverlayIdProvider } from '../Provider/overlay/OverlayIdProvider';
 import DateTrigger from './DateTrigger';
 
 export interface DateLookupProps {
-  /** The currently selected date, or `null` for no selection. */
-  value: Date | null;
-  /** Called when an enabled date is confirmed. Receives `null` when the value is cleared. */
-  onChange: (date: Date | null) => void;
-  /** HTML `id` applied to the trigger button, used for label association. */
   id?: string;
-  /** Earliest selectable date (inclusive). Dates before this are interactive but not selectable, and show a boundary prompt. */
+  value: Date | null;
   min?: Date | null;
-  /** Latest selectable date (inclusive). Dates after this are interactive but not selectable, and show a boundary prompt. */
   max?: Date | null;
-  /** Size of the trigger input. Defaults to `'md'`. */
   size?: SizeSmall | SizeMedium | SizeLarge;
-  /** Label text rendered above the trigger input. */
+  placeholder?: string;
   label?: string;
-  /** ID of an external element that labels the trigger, for use inside custom label contexts. */
   'aria-labelledby'?: string;
-  /** Placeholder text shown in the trigger when no date is selected. */
-  placeholder?: string;
-  /** Month name format in the calendar header. Defaults to `'long'` (e.g. "January"). */
   monthFormat?: `${MonthFormat}`;
-  /** When `true`, the trigger and calendar are non-interactive. */
   disabled?: boolean;
-  /** When `true`, a clear button is shown in the trigger to reset the value to `null`. */
   clearable?: boolean;
-  /** Rules for disabling specific weekdays, individual dates, or date ranges. The required `reason` is shown in an inline prompt and linked to disabled cells via `aria-describedby` for screen reader accessibility. */
-  disabledRules?: DisabledRules;
-  /** Called whenever any date is focused or clicked, including disabled and out-of-range dates. `isEnabled` is `false` when the date is not selectable. */
-  onDateSelect?: (params: OnDateSelectParams) => void;
-  /** Called when the calendar panel opens. */
+  onChange: (date: Date | null) => void;
   onFocus?: () => void;
-  /** Called when the calendar panel closes. */
   onBlur?: () => void;
 }
 
@@ -147,15 +128,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     }
   };
 
-  handleDateChange = (date: Date | null, meta: DateChangeMeta) => {
-    const { onDateSelect } = this.props;
-    if (date && onDateSelect) {
-      onDateSelect({ date, isEnabled: meta.isEnabled });
-    }
-  };
-
-  handleDateSelect = (date: Date | null) => {
-    if (!date) return;
+  handleDateChange = (date: Date | null) => {
     this.setState(
       (state) => {
         const originalDate = state.originalDate ?? this.props.value;
@@ -163,14 +136,18 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
       },
       () => {
         this.props.onChange(date);
-        this.close();
-        this.focusOn('.btn');
       },
     );
   };
 
+  handleDateSelect = (date: Date) => {
+    this.props.onChange(date);
+    this.close();
+    this.focusOn('.btn');
+  };
+
   getCalendar = () => {
-    const { value, min, max, monthFormat, placeholder, disabledRules } = this.props;
+    const { value, min, max, monthFormat, placeholder } = this.props;
     return (
       <div className="p-a-1">
         <Calendar
@@ -179,9 +156,8 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
           max={max}
           monthFormat={monthFormat}
           placeholder={placeholder}
-          disabledRules={disabledRules}
-          onDateFocus={this.handleDateChange}
-          onChange={this.handleDateSelect}
+          onChange={this.handleDateChange}
+          onSelect={this.handleDateSelect}
         />
       </div>
     );

package/src/DateLookup/_stories/DateLookup.story.tsx

@@ -1,23 +1,16 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import { action } from 'storybook/actions';
 import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import { storySourceWithoutNoise } from '../../../.storybook/helpers';
 import { Size } from '../../common';
-import Field from '../../Field';
 import DateLookup, { type DateLookupProps } from '..';
+import Field from '../../Field';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup',
-  args: {
-    onFocus: fn(),
-    onBlur: fn(),
-  },
   argTypes: {
     size: { control: 'select', options: [Size.SMALL, Size.MEDIUM, Size.LARGE] },
     disabled: { control: 'boolean' },
@@ -41,7 +34,7 @@ thePast.setUTCDate(epoch.getUTCDate() - 10);
 
 export const Sandbox = createSandboxStory({
   code: `const App = () => {
-  const [value, setValue] = React.useState(new Date(2024, 5, 14));
+  const [value, setValue] = React.useState(new Date('2024-06-15'));
 
   return (
     <DateLookup
@@ -51,11 +44,6 @@ export const Sandbox = createSandboxStory({
       placeholder="Choose date"
       clearable
       value={value}
-      disabledRules={{
-        weekdays: ['sat', 'sun'],
-        dates: [new Date(2024, 5, 19)],
-        reason: 'Weekends and holidays are unavailable.',
-      }}
       onChange={(date) => setValue(date)}
     />
   );
@@ -132,113 +120,3 @@ export const RightAligned: Story = {
     );
   },
 };
-
-/**
- * Use `disabledRules` to disable specific weekdays, individual dates, or date ranges.
- * Disabled dates remain focusable and keyboard-navigable — clicking or focusing one
- * keeps the panel open, fires `onDateSelect` with `isEnabled: false`, and shows a
- * negative inline prompt with the `reason` text. `min`/`max` out-of-range dates show
- * a built-in boundary prompt (e.g. "Please select a date between 9 December 2024 and
- * 22 January 2025.").
- *
- * The `reason` field is **required for accessibility**: it renders as an InlinePrompt
- * below the grid and is linked to every disabled cell via `aria-describedby`, so screen
- * reader users understand why a date is unavailable. For per-date reason customisation
- * see [DisabledDatesWithDynamicReason](#disabled-dates-with-dynamic-reason).
- */
-export const DisabledDates: Story = storySourceWithoutNoise({
-  args: {
-    size: Size.MEDIUM,
-    label: 'Select a date',
-    placeholder: 'Choose date',
-    monthFormat: 'long',
-  },
-  render: function Render(args: DateLookupProps) {
-    const min = new Date(2024, 11, 9);
-    const max = new Date(2025, 0, 22);
-    const bankHolidays = [new Date(2024, 11, 25), new Date(2024, 11, 26), new Date(2025, 0, 1)];
-    const [value, setValue] = useState<Date | null>(null);
-
-    return (
-      <DateLookup
-        {...args}
-        min={min}
-        max={max}
-        value={value}
-        disabledRules={{
-          weekdays: ['sat', 'sun'],
-          dates: bankHolidays,
-          ranges: [{ start: new Date(2024, 11, 23), end: new Date(2024, 11, 24) }],
-          reason: 'Some dates are unavailable for this service.',
-        }}
-        onChange={(date) => {
-          action('onChange')(date);
-          setValue(date);
-        }}
-        onDateSelect={({ date, isEnabled }) => {
-          action('onDateSelect')({ date, isEnabled });
-        }}
-      />
-    );
-  },
-});
-
-/**
- * When different disabled dates warrant different explanations, drive the `reason`
- * dynamically from `onDateSelect`. The `isEnabled` flag tells you whether the focused
- * date is selectable; from there you can look up the specific reason and update state.
- *
- * `min`/`max` out-of-range dates are handled automatically — the component shows a
- * built-in prompt with the boundary dates, so `determineReason` only needs to cover
- * rule-disabled dates.
- */
-export const DisabledDatesWithDynamicReason: Story = storySourceWithoutNoise({
-  args: {
-    size: Size.MEDIUM,
-    label: 'Select a date',
-    placeholder: 'Choose date',
-    monthFormat: 'long',
-  },
-  render: function Render(args: DateLookupProps) {
-    const DEFAULT_REASON = 'Some dates are unavailable for this service.';
-    const min = new Date(2024, 11, 9);
-    const max = new Date(2025, 0, 22);
-    const bankHolidays = [new Date(2024, 11, 25), new Date(2024, 11, 26), new Date(2025, 0, 1)];
-    const [value, setValue] = useState<Date | null>(null);
-    const [reason, setReason] = useState(DEFAULT_REASON);
-
-    function determineReason(date: Date, isEnabled: boolean): string {
-      if (isEnabled) return DEFAULT_REASON;
-      if (bankHolidays.some((holiday) => holiday.toDateString() === date.toDateString())) {
-        return 'This date is a bank holiday.';
-      }
-      if (date.getDay() === 0 || date.getDay() === 6) {
-        return 'We do not operate on weekends.';
-      }
-      return 'This date is unavailable due to scheduled maintenance.';
-    }
-
-    return (
-      <DateLookup
-        {...args}
-        min={min}
-        max={max}
-        value={value}
-        disabledRules={{
-          weekdays: ['sat', 'sun'],
-          dates: bankHolidays,
-          ranges: [{ start: new Date(2024, 11, 23), end: new Date(2024, 11, 24) }],
-          reason,
-        }}
-        onChange={(date) => {
-          action('onChange')(date);
-          setValue(date);
-        }}
-        onDateSelect={({ date, isEnabled }) => {
-          action('onDateSelect')({ date, isEnabled });
-          setReason(determineReason(date, isEnabled));
-        }}
-      />
-    );
-  },
-});

package/src/DateLookup/index.ts

@@ -1,8 +1,2 @@
 export { default } from './DateLookup';
 export type { DateLookupProps } from './DateLookup';
-export type {
-  DisabledRules,
-  DisabledDateRange,
-  WeekDayType,
-  OnDateSelectParams,
-} from '../Calendar/Calendar.types';

package/src/Markup/Markup.css

@@ -0,0 +1,28 @@
+.wds-markup-emphasis {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-style: normal;
+}
+.wds-markup-emphasis--important {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-markup-emphasis--positive {
+  color: #008026;
+  color: var(--color-content-positive);
+}
+.wds-markup-emphasis--negative {
+  color: #cf2929;
+  color: var(--color-content-negative);
+}
+.wds-markup-strong {
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+.wds-markup-strikethrough {
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+}
+.wds-markup-paragraph {
+  margin: 0;
+}

package/src/Markup/Markup.injection.test.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+
+import { render } from '../test-utils';
+
+import { Markup } from './Markup';
+
+/**
+ * Proof of Concept: Markup Injection via Attacker-Controlled Data
+ *
+ * These tests demonstrate Laszlo's concern: when untrusted data (e.g. a payee name,
+ * company name, or any string from an external source) is interpolated into a markup
+ * template string, the attacker can break out of their structural context and inject
+ * arbitrary allowed markup — links, emphasis, etc.
+ *
+ * This is NOT about XSS (script execution is blocked). It's about content spoofing
+ * and phishing within trusted UI.
+ */
+describe('Markup injection via attacker-controlled data', () => {
+  describe('the vulnerability: structural injection', () => {
+    it('default allowedHrefs blocks injected external links', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // The default allowlist blocks external domains — the link is NOT rendered
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).not.toBeInTheDocument();
+
+      // But the structural injection still works (emphasis renders)
+      const injectedEmphasis = container.querySelector('.wds-markup-emphasis--important');
+      expect(injectedEmphasis).toBeInTheDocument();
+      expect(injectedEmphasis).toHaveTextContent('ACTION REQUIRED: Verify your identity');
+    });
+
+    it('injected external links render when allowLinks="all"', () => {
+      const attackerControlledName =
+        'Acme Corp</strong>' +
+        '<link href="https://evil.example.com">' +
+        '<important>ACTION REQUIRED: Verify your identity</important>' +
+        '</link>' +
+        '<strong>';
+
+      const template = `Transfer <strong>£35.00</strong> to <strong>${attackerControlledName}</strong>`;
+
+      const { container } = render(<Markup allowLinks="all">{template}</Markup>);
+
+      // With allowLinks="all", the link renders — demonstrating the structural injection
+      const injectedLink = container.querySelector('a[href="https://evil.example.com"]');
+      expect(injectedLink).toBeInTheDocument();
+    });
+
+    it('default allowedHrefs blocks phishing links in paragraph injection', () => {
+      const attackerNote =
+        'Thanks!</p>' +
+        '<p><important>Your account has been compromised. ' +
+        'Contact support at </important>' +
+        '<link href="https://phishing.example.com">this secure link</link></p>' +
+        '<p>';
+
+      const template = `<p>Note from sender: ${attackerNote}</p>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      const phishingLink = container.querySelector('a[href="https://phishing.example.com"]');
+      expect(phishingLink).not.toBeInTheDocument();
+    });
+
+    it('attacker can inject misleading accessibility labels', () => {
+      const attackerValue =
+        'normal text</strong>' +
+        '<strong accessibilityLabel="Security alert: click to verify">' +
+        '<link href="https://evil.example.com">here</link>' +
+        '</strong>' +
+        '<strong>';
+
+      const template = `Your balance: <strong>${attackerValue}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      const misleadingElement = container.querySelector(
+        '[aria-label="Security alert: click to verify"]',
+      );
+      expect(misleadingElement).toBeInTheDocument();
+    });
+  });
+
+  describe('what IS blocked (XSS / script execution)', () => {
+    it('cannot inject arbitrary HTML elements', () => {
+      const xssAttempt = '<img src=x onerror=alert(1)>';
+      const template = `Hello <strong>${xssAttempt}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // <img> is not in the allow-list, so it's rendered as text
+      expect(container.querySelector('img')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent(/<img src=x onerror=alert\(1\)>/);
+    });
+
+    it('cannot inject script tags', () => {
+      const xssAttempt = '<script>alert("xss")</script>';
+      const template = `Hello <strong>${xssAttempt}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      expect(container.querySelector('script')).not.toBeInTheDocument();
+    });
+
+    it('blocks javascript: URLs in links', () => {
+      // Even if attacker injects a link, javascript: URLs are blocked
+      const attack = 'click</strong><link href="javascript:alert(1)">me</link><strong>';
+      const template = `<strong>${attack}</strong>`;
+
+      const { container } = render(<Markup>{template}</Markup>);
+
+      // The link renders but without the dangerous href (falls back to Fragment)
+      expect(container.querySelector('a[href*="javascript"]')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('the general nature of this problem', () => {
+    it('is identical to HTML injection via innerHTML', () => {
+      // This is the same class of bug — mixing code and data in a string
+      const attackerName = '<b>URGENT</b>';
+      const div = document.createElement('div');
+      div.innerHTML = `Hello ${attackerName}`;
+
+      // The attacker's data became structure
+      expect(div.querySelector('b')).not.toBeNull();
+      expect(div.querySelector('b')!).toHaveTextContent('URGENT');
+    });
+
+    it('react JSX prevents this by design', () => {
+      // In contrast, React treats variables as pure data — never as structure
+      const attackerName = '<strong>URGENT</strong>';
+
+      const { container } = render(<span>Hello {attackerName}</span>);
+
+      // React escapes the string — it renders as visible text, not as a <strong> tag
+      expect(container.querySelector('strong')).not.toBeInTheDocument();
+      expect(container).toHaveTextContent(/<strong>URGENT<\/strong>/);
+    });
+
+    it('demonstrates why Markup reintroduces the problem React solved', () => {
+      // The same attacker string that React handles safely...
+      const attackerName = '<strong>URGENT: Call +44 123 456 789 NOW</strong>';
+
+      // ...becomes dangerous when passed through Markup's string parser
+      const { container } = render(<Markup>{`Hello ${attackerName}`}</Markup>);
+
+      // The attacker's data has been promoted to structure
+      const injected = container.querySelector('strong');
+      expect(injected).toBeInTheDocument();
+      expect(injected).toHaveTextContent('URGENT: Call +44 123 456 789 NOW');
+    });
+  });
+});