[bpamiri]

Summary

Starlight styles markdown tables with display: block; overflow: auto, inside @layer starlight.content. On the guides and API sites, that drops the table role in Safari + VoiceOver, the same gap #4575 fixed on the blog.

Guides: rehypeTableScroll (the shared plugin from #4605) is added to markdown.rehypePlugins. Each markdown table is wrapped in <div class="table-scroll" role="region" aria-label="Table" tabindex="0">.

API: no plugin. Astro runs markdown.rehypePlugins before rehype-raw. The plugin can't see the raw <div class="wd-params-table"> around the generated parameter tables, so it would wrap them a second time.

• Those tables already get display: table back from .wd-params-table table, so they're left byte-identical.
• The one plain table, the versions list in src/content/docs/index.md, is wrapped by hand.
• A comment in astro.config.mjs records why.

starlight-theme.css:

• .sl-markdown-content .table-scroll > table { display: table; overflow: visible; }. It's unlayered, so it beats Starlight's layered rule. The wrapper's scroll and focus styles come from base.css.
• overflow-wrap: anywhere on .sl-markdown-content :not(pre) > code, matching the blog (web/blog: long inline code makes posts scroll sideways at phone width #4609). Starlight's reset already sets overflow-wrap: break-word on code, so this didn't fix a live overflow; it makes inline code wrap inside tables and flex layouts too.

Fixes #4608

Testing

• node --test web/packages/ui/src/markdown/rehype-table-scroll.test.mjs: 5/5. The plugin is unchanged.
• Built guides and API sites:
  • the guides server page has 17 tables and 17 wrappers, one each, none nested;
  • the API configuration/resources parameter page has its .wd-params-table and no .table-scroll, with markup identical to develop;
  • the API index has exactly one wrapper.
• Computed style: every wrapped table is display: table; the parameter tables are still display: table.
• 390px and 1280px: wide guides tables scroll inside their region, with no page-level horizontal scroll; API parameter pages look identical to develop.
• Keyboard: Tab reaches the region and shows the brand focus outline. Not tested: Safari + VoiceOver.
• Visual baselines: guides.png changes, because its canary page has a table that's now wrapped with native display. api.png doesn't change.

🤖 Generated with Claude Code