Merge bfe1850d73 into fa81d697fe

CHANGELOG.md

@@ -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))

packages/tailwindcss/preflight.css

@@ -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;
+}
+
 /*
   Use the modern Firefox focus style for all focusable elements.
 */

packages/tailwindcss/src/index.test.ts

@@ -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(

packages/tailwindcss/src/utilities.test.ts

@@ -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%);')
+})
+
 test('not-sr-only', async () => {
   expect(await run(['not-sr-only'])).toMatchInlineSnapshot(`
     "
@@ -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(`
     "