From 571f25a7d36f09a5d3c3ddf061d950d18f74c802 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Wed, 21 Aug 2024 11:14:41 -0700
Subject: [PATCH] fix(role): hidden pseudos should not contribute to accessible
 name (#32251)

---
 .../src/server/injected/roleUtils.ts          |  3 ++-
 tests/library/role-utils.spec.ts              | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/server/injected/roleUtils.ts b/packages/playwright-core/src/server/injected/roleUtils.ts
index 99f3cafa298e1..498fc189aace8 100644
--- a/packages/playwright-core/src/server/injected/roleUtils.ts
+++ b/packages/playwright-core/src/server/injected/roleUtils.ts
@@ -375,7 +375,8 @@ function getPseudoContent(element: Element, pseudo: '::before' | '::after') {
 }
 
 function getPseudoContentImpl(pseudoStyle: CSSStyleDeclaration | undefined) {
-  if (!pseudoStyle)
+  // Note: all browsers ignore display:none and visibility:hidden pseudos.
+  if (!pseudoStyle || pseudoStyle.display === 'none' || pseudoStyle.visibility === 'hidden')
     return '';
   const content = pseudoStyle.content;
   if ((content[0] === '\'' && content[content.length - 1] === '\'') ||
diff --git a/tests/library/role-utils.spec.ts b/tests/library/role-utils.spec.ts
index 067053ba11bb7..6c45686f6820a 100644
--- a/tests/library/role-utils.spec.ts
+++ b/tests/library/role-utils.spec.ts
@@ -475,6 +475,26 @@ test('should ignore stylesheet from hidden aria-labelledby subtree', async ({ pa
   expect.soft(await getNameAndRole(page, 'input')).toEqual({ role: 'textbox', name: 'hello' });
 });
 
+test('should not include hidden pseudo into accessible name', async ({ page }) => {
+  await page.setContent(`
+    <style>
+      span:before {
+        content: 'world';
+        display: none;
+      }
+      div:after {
+        content: 'bye';
+        visibility: hidden;
+      }
+    </style>
+    <a href="http://example.com">
+      <span>hello</span>
+      <div>hello</div>
+    </a>
+  `);
+  expect.soft(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello hello' });
+});
+
 function toArray(x: any): any[] {
   return Array.isArray(x) ? x : [x];
 }