[bpamiri]

Summary

.prose table used display: block; overflow-x: auto so wide tables scroll on phones. But display: block on a <table> drops its implicit table role in Safari + VoiceOver. This replaces that stopgap with the accessible scrollable-region pattern:

• New shared plugin, @wheels-dev/ui/markdown/rehype-table-scroll.mjs: wraps each table in <div class="table-scroll" role="region" aria-label="Table" tabindex="0">. It has no dependencies, plain hast recursion like rehype-base-prefix.mjs, and never wraps a table twice.
• Blog: wired into markdown.rehypePlugins. Astro's GFM and Shiki defaults are unchanged.
• Packages: wired into the site's own unified() README renderer in src/lib/markdown.ts, after rehype-sanitize so the region attributes survive. That page uses set:html, so an astro.config entry wouldn't reach it.
• CSS: the .prose table rule is gone; tables get native display back. .table-scroll owns the scroll and shows a :focus-visible outline in --color-brand.

Unchanged:

• landing /ai: its hand-written tables already sit in a scrolling .table-wrap;
• the Starlight sites (guides, api): they don't use .prose.

Fixes #4575

Testing

• Plugin unit tests: node --test web/packages/ui/src/markdown/rehype-table-scroll.test.mjs, 5/5. Covers a top-level table, a nested table, siblings untouched, no double wrap, and several tables.
• Packages: pnpm --filter ./sites/packages test, 19/19, including a new case for the wrapper around a GFM table.
• Built HTML (blog + packages): every table is wrapped exactly once, including a post with three tables, and code highlighting is intact.
• Phone width (390px): a wide blog table scrolls inside its region and adds nothing to the page width. /ai is visually unchanged at 390px and 1280px.
• Keyboard: Tab reaches the region and shows the 2px brand outline.
• Not tested: Safari + VoiceOver.
• Visual-regression baselines: none change; no baseline page renders a markdown table.

🤖 Generated with Claude Code