Reset the caption clipping in not-sr-only

`sr-only` clips `> caption` so that a table's caption is hidden in Firefox,
where a table's own `clip-path` does not clip it. `not-sr-only` has to undo
that, otherwise `sr-only md:not-sr-only` keeps the revealed table's caption
clipped. Covered by a new UI test that checks both breakpoints.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 7ee9c5ce-96b9-4d2b-a163-a6e5a4a4eb38

Author: snmsoodan

packages/tailwindcss/src/utilities.test.ts

@@ -41,6 +41,10 @@ test('not-sr-only', async () => {
       position: static;
       overflow: visible;
     }
+
+    .not-sr-only > caption {
+      clip-path: none;
+    }
     "
   `)
   expect(await run(['-not-sr-only', 'not-sr-only-[var(--value)]', 'not-sr-only/foo'])).toEqual('')

packages/tailwindcss/src/utilities.ts

@@ -613,6 +613,8 @@ export function createUtilities(theme: Theme) {
     ['overflow', 'visible'],
     ['clip-path', 'none'],
     ['white-space', 'normal'],
+    // `sr-only` also clips the caption of a table, so undo that here
+    () => styleRule('& > caption', [decl('clip-path', 'none')]),
   ])
 
   /**

packages/tailwindcss/tests/ui.spec.ts

@@ -1532,10 +1532,39 @@ test('sr-only also hides the caption of a table', async ({ page }) => {
 
   // Firefox applies the `clip-path` of the `<table>` to its inner grid box, and
   // a `<caption>` is rendered in the outer table wrapper box, so the caption is
-  // not clipped by the table itself and must be clipped explicitly.
+  // not clipped by the table itself and must be clipped explicitly. Asserting
+  // the rule that does it is all that can run here: the bug only reproduces in
+  // Firefox, which is not available in this environment.
   expect(await getPropertyValue('#caption', 'clip-path')).toEqual('inset(50%)')
 })
 
+test('not-sr-only also unclips the caption of a table', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <table id="table" class="sr-only md:not-sr-only">
+        <caption id="caption">
+          Caption
+        </caption>
+        <tbody>
+          <tr>
+            <td>Cell</td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  )
+
+  // the caption must become visible again together with the table it reveals,
+  // so the responsive reset has to win over the base `sr-only` rule
+  await page.setViewportSize({ width: 640, height: 768 })
+  expect(await getPropertyValue('#caption', 'clip-path')).toEqual('inset(50%)')
+
+  await page.setViewportSize({ width: 1024, height: 768 })
+  expect(await getPropertyValue('#table', 'clip-path')).toEqual('none')
+  expect(await getPropertyValue('#caption', 'clip-path')).toEqual('none')
+})
+
 test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) => {
   let { getPropertyList } = await render(
     page,