Fix sr-only table caption visibility in Firefox (#20510)

[abdelrhmanahmed255]

Problem

Applying .sr-only to a <table> does not visually hide its child <caption> elements in Firefox.

Because Firefox handles table captions as separate formatting roots outside the main table grid box, the parent table's overflow: hidden and clip-path: inset(50%) do not clip the caption content.

Solution

Added a rule in preflight.css ensuring captions in visually hidden tables inherit clipping:

:where(table.sr-only, .sr-only > table) > caption {
  clip-path: inherit;
  overflow: hidden;
}

[greptile-apps]

Confidence Score: 4/5

[Medium risk] Fixes screen-reader-only styling for table captions in Firefox.

The PR should not merge until captions inside visually hidden table wrappers remain hidden in Firefox.

_{Reviews (2) · Last reviewed commit: "fix(sr-only): make caption inherit clip-..."}

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 60faf9d3-4321-4dd0-8360-84d21e9e27a1

📥 Commits

Reviewing files that changed from the base of the PR and between 164cd1e and bfe1850.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/tailwindcss/preflight.css
• packages/tailwindcss/src/index.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• CHANGELOG.md

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 5 remain after this review.

---

Walkthrough

The preflight stylesheet applies clip-path: inherit to all caption elements and no longer sets overflow: hidden. Tests check the preflight caption rule and the clip-path declarations for sr-only and not-sr-only. The Unreleased changelog entry links to pull request 20521.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to bfe18

No actionable merge-blocking risk is identified in the supplied change context; the change appears ready to merge after normal checks.

Architecture Summary

Architecture risk: 🔵 Low · up to bfe18

The change affects 2 systems.

Changed systems: packages/tailwindcss, CHANGELOG.md

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — packages/tailwindcss (library) was modified; 3 changed files map to changed impact.
• observed — CHANGELOG.md (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in packages/tailwindcss/src/utilities.test.ts: Adds a test expecting the sr-only utility output to contain clip-path: inset(50%);.
• observed — Modified behavior in packages/tailwindcss/src/utilities.test.ts: Adds a test expecting the not-sr-only utility output to contain clip-path: none;.
• observed — Modified behavior in CHANGELOG.md: The Firefox table-caption clipping entry adds a link to pull request #20521.
• observed — Modified behavior in packages/tailwindcss/preflight.css: The comment now includes visually hidden table variants such as md:sr-only. The rule applies to every caption, replacing the selector limited to captions in visually hidden tables, and removes overflow: hidden; clip-path: inherit remains.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Firefox issue and the sr-only table caption visibility fix.
Description check	✅ Passed	The description explains the Firefox problem and the proposed preflight.css fix for captions inside visually hidden tables.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/tailwindcss/src/utilities.test.ts (1)

27-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover the preflight caption selector.

run(['sr-only']) uses @tailwind utilities by default. The added tests cannot exercise preflight.css. They assert only utility declarations. Add a preflight compilation test that checks the caption selector, clip-path: inherit, and overflow: hidden.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: bccfd727-c75c-4794-8f86-c16e5157408e

📥 Commits

Reviewing files that changed from the base of the PR and between fa81d69 and 164cd1e.

📒 Files selected for processing (3)

• CHANGELOG.md
• packages/tailwindcss/preflight.css
• packages/tailwindcss/src/utilities.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

[greptile-apps]

Wrapped table captions remain visible

For <div class="sr-only"><table><caption>…</caption></table></div>, the caption now inherits clip-path from the table, not the hidden wrapper. The table does not inherit the wrapper’s clip-path, so the caption receives none. Removing the selector that covered this pattern lets the caption remain visible in Firefox.

[greptile-apps]

Visible captions inherit clipping

A normal table with a decorative clip-path now passes that clipping to its caption, which previously kept the default clip-path: none. This can cut off a caption that should remain visible, so using a clipped table may require an extra caption override.