fix(role): hidden pseudos should not contribute to accessible name (#…

…32251)
microsoft · Aug 21, 2024 · 571f25a · 571f25a
1 parent d5a7495
commit 571f25a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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];
 }