chore(breaking): do not include hidden elements in aria snapshot (#35684)

packages/injected/src/ariaSnapshot.ts

@@ -17,7 +17,7 @@
 import { Map, Set } from '@isomorphic/builtins';
 import { escapeRegExp, longestCommonSubstring, normalizeWhiteSpace } from '@isomorphic/stringUtils';
 
-import { getElementComputedStyle, getGlobalOptions } from './domUtils';
+import { getElementComputedStyle, getGlobalOptions, isElementVisible } from './domUtils';
 import * as roleUtils from './roleUtils';
 import { yamlEscapeKeyIfNeeded, yamlEscapeValueIfNeeded } from './yaml';
 
@@ -86,6 +86,10 @@ export function generateAriaTree(rootElement: Element, generation: number): Aria
       }
     }
 
+    // Skip all the leaf nodes that are not visible as they can't be interacted with.
+    if (!ariaChildren.length && !isElementVisible(element))
+      return;
+
     addElement(element);
     const childAriaNode = toAriaNode(element);
     if (childAriaNode)

tests/library/inspector/cli-codegen-aria.spec.ts

@@ -68,7 +68,6 @@ test.describe(() => {
     await recorder.trustedClick();
     await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
     await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
-      - textbox
       - text: '- button "Submit"'
     `);
   });

tests/page/page-aria-snapshot.spec.ts

@@ -730,3 +730,15 @@ it('ref mode can be used to stitch all frame snapshots', async ({ page, server }
   - text: Hi, I'm frame
   `.trim());
 });
+
+it('should not include hidden input elements', async ({ page }) => {
+  await page.setContent(`
+    <button>One</button>
+    <button style="width: 0; height: 0; appearance: none; border: 0; padding: 0;">Two</button>
+    <button>Three</button>
+  `);
+
+  const snapshot = await page.locator('body').ariaSnapshot();
+  expect(snapshot).toContain(`- button \"One\"
+- button \"Three\"`);
+});