Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
abdelrhmanahmed255 wants to merge 5 commits into
base: main
Choose a base branch
from
+23 −0
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b7463a
test(sr-only): add test fixture for table caption visibility with sr-…
abdelrhmanahmed255 Sep 26, 2026
5fd34be
fix(sr-only): ensure table caption elements are clipped in Firefox (#…
abdelrhmanahmed255 Sep 26, 2026
3a62d6e
test(sr-only): verify not-sr-only resets caption visibility correctly
abdelrhmanahmed255 Sep 26, 2026
164cd1e
docs(sr-only): document Firefox caption clipping fix in changelog (#2…
abdelrhmanahmed255 Sep 26, 2026
bfe1850
fix(sr-only): make caption inherit clip-path to support variants and …
abdelrhmanahmed255 Sep 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Fixed

- Ensure table captions inside `.sr-only` elements are properly clipped in Firefox ([#20510](https://github.com/tailwindlabs/tailwindcss/issues/20510), [#20521](https://github.com/tailwindlabs/tailwindcss/pull/20521))
- Ensure watch mode detects changes to symlinked `@source` files whose real paths aren't otherwise scanned ([#20356](https://github.com/tailwindlabs/tailwindcss/pull/20356))
- Ensure custom variants using `@scope` wrap the generated utilities instead of nesting inside them ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
- Fix flattening of `@scope` at-rules ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
Expand Down
9 changes: 9 additions & 0 deletions packages/tailwindcss/preflight.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,15 @@ table {
border-collapse: collapse; /* 3 */
}

/*
Ensure table captions inside visually hidden tables (including variants like `md:sr-only`)
are properly clipped in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/20510)
*/

caption {
clip-path: inherit;
}
Comment on lines +179 to +181

@greptile-apps greptile-apps Bot Sep 26, 2026

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.

P1 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.

Comment on lines +179 to +181

@greptile-apps greptile-apps Bot Sep 26, 2026

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.

P2 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.


/*
Use the modern Firefox focus style for all focusable elements.
*/
Expand Down
5 changes: 5 additions & 0 deletions packages/tailwindcss/src/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,11 @@ describe('compiling CSS', () => {
).toMatchSnapshot()
})

test('preflight ensures table captions inherit clip-path for Firefox (#20510)', () => {
let preflight = fs.readFileSync(path.resolve(__dirname, '../preflight.css'), 'utf-8')
expect(preflight).toContain('caption {\n clip-path: inherit;\n}')
})

test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
expect(
await run(
Expand Down
8 changes: 8 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ test('sr-only', async () => {
expect(await run(['-sr-only', 'sr-only-[var(--value)]', 'sr-only/foo'])).toEqual('')
})

test('sr-only table caption (Firefox compatibility)', async () => {
expect(await run(['sr-only'])).toContain('clip-path: inset(50%);')
})
Comment thread
greptile-apps[bot] marked this conversation as resolved.

test('not-sr-only', async () => {
expect(await run(['not-sr-only'])).toMatchInlineSnapshot(`
"
Expand All @@ -42,6 +46,10 @@ test('not-sr-only', async () => {
expect(await run(['-not-sr-only', 'not-sr-only-[var(--value)]', 'not-sr-only/foo'])).toEqual('')
})

test('not-sr-only resets caption clipping', async () => {
expect(await run(['not-sr-only'])).toContain('clip-path: none;')
})

test('pointer-events', async () => {
expect(await run(['pointer-events-none', 'pointer-events-auto'])).toMatchInlineSnapshot(`
"
Expand Down