diff --git a/apps/storybook/stories/Review5563.stories.tsx b/apps/storybook/stories/Review5563.stories.tsx
new file mode 100644
index 00000000000..cf9df97ffac
--- /dev/null
+++ b/apps/storybook/stories/Review5563.stories.tsx
@@ -0,0 +1,85 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {List, ListItem} from '@astryxdesign/core/List';
+import {Markdown} from '@astryxdesign/core/Markdown';
+import {MetadataList, MetadataListItem} from '@astryxdesign/core/MetadataList';
+import {NavHeadingMenu, NavHeadingMenuItem} from '@astryxdesign/core/NavMenu';
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+import {Token} from '@astryxdesign/core/Token';
+import {
+  TopNavMenu,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+} from '@astryxdesign/core/TopNav';
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {TypeaheadItem} from '@astryxdesign/core/Typeahead';
+
+const meta: Meta = {
+  title: 'Review/PR5563',
+  parameters: {layout: 'padded'},
+};
+
+export default meta;
+type Story = StoryObj;
+
+const consumerHighlight = {outline: '2px solid rgb(217, 70, 239)'};
+
+export const Matrix: Story = {
+  render: () => (
+    <div
+      className="review-5563-matrix"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        gap: 24,
+        width: 980,
+      }}>
+      <section><h3>List</h3><List><ListItem label="First item" /><ListItem label="Second item" /></List></section>
+      <section><h3>Markdown</h3><Markdown>**Forwarded** markdown</Markdown></section>
+      <section><h3>MetadataListItem</h3><MetadataList><MetadataListItem label="Owner">Cindy</MetadataListItem></MetadataList></section>
+      <section><h3>NavHeadingMenu</h3><NavHeadingMenu aria-label="Review menu"><NavHeadingMenuItem label="Overview" /></NavHeadingMenu></section>
+      <section><h3>Timestamp</h3><Timestamp value="2026-08-26T18:00:00Z" format="date_time" hasTooltip={false} /></section>
+      <section><h3>Token</h3><Token label="Design" href="#design" onRemove={() => {}} /></section>
+      <section data-case="topnav"><h3>TopNavMenu styled pass-through</h3><TopNavMenu label="Products" items={[{title: 'Analytics', href: '#analytics'}]} style={consumerHighlight} /></section>
+      <section data-case="mega"><h3>TopNavMegaMenu styled pass-through</h3><TopNavMegaMenu label="Solutions" items={<TopNavMegaMenuItem title="Platform" href="#platform" />} style={consumerHighlight} /></section>
+      <section><h3>TreeList</h3><TreeList items={[{id: 'src', label: 'src'}, {id: 'readme', label: 'README.md'}]} /></section>
+      <section data-case="typeahead"><h3>TypeaheadItem styled pass-through</h3><TypeaheadItem item={{id: 'one', label: 'Typeahead result'}} style={consumerHighlight} /></section>
+    </div>
+  ),
+};
+
+function CancellationProbe() {
+  const [treeSeen, setTreeSeen] = useState('none');
+  const [menuSeen, setMenuSeen] = useState('none');
+  return (
+    <div className="review-5563-cancellation" style={{display: 'flex', gap: 48}}>
+      <section>
+        <h3>TreeList</h3>
+        <TreeList
+          items={[{id: 'one', label: 'Tree one'}, {id: 'two', label: 'Tree two'}]}
+          onKeyDown={event => {
+            setTreeSeen(document.activeElement?.textContent?.trim() ?? 'none');
+            event.preventDefault();
+          }}
+        />
+        <output data-testid="tree-seen">{treeSeen}</output>
+      </section>
+      <section>
+        <h3>NavHeadingMenu control</h3>
+        <NavHeadingMenu
+          onKeyDown={event => {
+            setMenuSeen(document.activeElement?.textContent?.trim() ?? 'none');
+            event.preventDefault();
+          }}>
+          <NavHeadingMenuItem label="Menu one" />
+          <NavHeadingMenuItem label="Menu two" />
+        </NavHeadingMenu>
+        <output data-testid="menu-seen">{menuSeen}</output>
+      </section>
+    </div>
+  );
+}
+
+export const Cancellation: Story = {render: () => <CancellationProbe />};