fix(retarget): do not unconditionally retarget to enclosing label (mi…

…crosoft#34229)
ammar-knowledge · Jan 7, 2025 · 7923d35 · 7923d35
1 parent 9514f0f
commit 7923d35
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
@@ -531,10 +531,10 @@ export class InjectedScript {
       if (!element.matches('a, input, textarea, button, select, [role=link], [role=button], [role=checkbox], [role=radio]') &&
         !(element as any).isContentEditable) {
         // Go up to the label that might be connected to the input/textarea.
-        element = element.closest('label') || element;
+        const enclosingLabel: HTMLLabelElement | null = element.closest('label');
+        if (enclosingLabel && enclosingLabel.control)
+          element = enclosingLabel.control;
       }
-      if (element.nodeName === 'LABEL')
-        element = (element as HTMLLabelElement).control || element;
     }
     return element;
   }

diff --git a/tests/page/retarget.spec.ts b/tests/page/retarget.spec.ts
@@ -109,13 +109,15 @@ it('enabled/disabled retargeting', async ({ page, asset }) => {
     { dom: domInButton(`<input id=target>`), enabled: true, locator: 'input' },
     { dom: domInLink(`<input id=target>`), enabled: true, locator: 'input' },
     { dom: domInButton(`<input id=target>`, { disabled: true }), enabled: true, locator: 'input' },
+    { dom: domInLabel(`<li role=menuitem id=target aria-disabled=false></li>`), enabled: true, locator: 'li' },
 
     { dom: domInLabel(`<input id=target disabled>`), enabled: false, locator: 'label' },
     { dom: domLabelFor(`<input id=target disabled>`), enabled: false, locator: 'label' },
     { dom: domStandalone(`<input id=target disabled>`), enabled: false, locator: 'input' },
     { dom: domInButton(`<input id=target disabled>`), enabled: false, locator: 'input' },
     { dom: domInLink(`<input id=target disabled>`), enabled: false, locator: 'input' },
     { dom: domInButton(`<input id=target disabled>`, { disabled: true }), enabled: false, locator: 'input' },
+    { dom: domInLabel(`<li role=menuitem id=target aria-disabled=true></li>`), enabled: false, locator: 'li' },
   ];
   for (const { dom, enabled, locator } of cases) {
     await it.step(`"${locator}" in "${dom}" should be enabled=${enabled}`, async () => {