Skip to content

Fix rehype accessible table plugins - #2493

Open
ShubhamOulkar wants to merge 11 commits into
expressjs:mainfrom
ShubhamOulkar:fix-rehype-accessible-table-plugins
Open

Fix rehype accessible table plugins#2493
ShubhamOulkar wants to merge 11 commits into
expressjs:mainfrom
ShubhamOulkar:fix-rehype-accessible-table-plugins

Conversation

@ShubhamOulkar

@ShubhamOulkar ShubhamOulkar commented Aug 30, 2026

Copy link
Copy Markdown
Member

This plugin was failing because it only handled standard Hypertext Abstract Syntax Tree format table nodes and missed tables authored as raw HTML inside MDX/Markdown (mdxJsxFlowElement, mdxJsxTextElement).

The fix registers the plugin in both Markdown and MDX pipelines and updates the transform to support both raw HTML and standard table nodes, ensuring consistent scrollable table behavior.

This fixes the missing wrapper for raw HTML tables: https://deploy-preview-2493--expressjscom-preview.netlify.app/en/5x/guide/behind-proxies/

and markdown-generated tables: https://deploy-preview-2493--expressjscom-preview.netlify.app/en/resources/middleware/

closes #2484

@ShubhamOulkar
ShubhamOulkar requested a review from a team as a code owner August 30, 2026 06:35
@netlify

netlify Bot commented Aug 30, 2026

Copy link
Copy Markdown

Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit 5a71467
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/6a9a46d5d3b7f70009688c24
😎 Deploy Preview https://deploy-preview-2493--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 97 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@krzysdz krzysdz left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somehow this PR breaks multiple things (other plugins?).

The tables in "Moving to Express 4" don't have scope on <th> elements, because <tbody> is missing:

Image

If I'm reading the code (and old comments) correctly these should have scope="row" (according to code, not really how it should be). On a closer look scope seems to be missing everywhere (e.g. in the routing guide).

As a side note, I've noticed that the HTML <table>s have <p>s inside cells if the text is multiline. In the big tables ("behind proxies") this is may not be obvious, but in "Migrating to Express 4" only some rows have <p> elements and this causes them to have much bigger padding than other rows - rewriting them to Markdown (#2485) lets us avoid this and fixes the table structure (missing <thead>).

Comment thread astro.config.mjs Outdated
Comment thread src/plugins/rehype-accessible-tables.mjs Outdated
…es and wrap tables without affecting traversal
@ShubhamOulkar

Copy link
Copy Markdown
Member Author

4e49d37 Uses separate passes to keep AST traversal predictable while supporting both HAST and MDX JSX tables. Build time remains unchanged.

Comment thread src/plugins/rehype-accessible-tables.mjs Outdated
krzysdz added a commit to krzysdz/expressjs.com that referenced this pull request Sep 2, 2026
@krzysdz

krzysdz commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

This wrapper from a table in 5.1 release post can also be removed.

<div markdown="1" style="overflow-x: auto; max-width: 100%;">

It doesn't do anything, because the table-scroller inside scrolls instead.

Firefox dev tools inspector: div with style "overflow-x: auto" that has a table-scroller dive inside. The table-scroller div is scrollable, because the table that it wraps overflows it. The outer div does nothing.

ShubhamOulkar and others added 2 commits September 3, 2026 05:35
Co-authored-by: krzysdz <12915102+krzysdz@users.noreply.github.com>


Co-authored-by: krzysdz <12915102+krzysdz@users.noreply.github.com>
@ShubhamOulkar
ShubhamOulkar requested a review from a team as a code owner September 3, 2026 05:37
@ShubhamOulkar
ShubhamOulkar requested review from krzysdz and removed request for a team September 3, 2026 05:37
@ShubhamOulkar

Copy link
Copy Markdown
Member Author

removed html wrapper in 07c9eca

image

@krzysdz

krzysdz commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

scroller (from <div class="table-scroller"> in the new docs) is not recognised by CSpell. This can be fixed by adding it to the project-words.txt.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A page in the documentation seems messy in small screens

2 participants