fix(retarget): do not unconditionally retarget to enclosing label (#34229)

This commit is contained in:
Pavel Feldman 2025-01-07 11:15:00 -08:00 committed by GitHub
parent 9514f0fb9d
commit 7923d35e32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 3 deletions

View File

@ -531,10 +531,10 @@ export class InjectedScript {
if (!element.matches('a, input, textarea, button, select, [role=link], [role=button], [role=checkbox], [role=radio]') && if (!element.matches('a, input, textarea, button, select, [role=link], [role=button], [role=checkbox], [role=radio]') &&
!(element as any).isContentEditable) { !(element as any).isContentEditable) {
// Go up to the label that might be connected to the input/textarea. // 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; return element;
} }

View File

@ -109,6 +109,7 @@ it('enabled/disabled retargeting', async ({ page, asset }) => {
{ dom: domInButton(`<input id=target>`), enabled: true, locator: 'input' }, { dom: domInButton(`<input id=target>`), enabled: true, locator: 'input' },
{ dom: domInLink(`<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: 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: domInLabel(`<input id=target disabled>`), enabled: false, locator: 'label' },
{ dom: domLabelFor(`<input id=target disabled>`), enabled: false, locator: 'label' }, { dom: domLabelFor(`<input id=target disabled>`), enabled: false, locator: 'label' },
@ -116,6 +117,7 @@ it('enabled/disabled retargeting', async ({ page, asset }) => {
{ dom: domInButton(`<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: domInLink(`<input id=target disabled>`), enabled: false, locator: 'input' },
{ dom: domInButton(`<input id=target disabled>`, { disabled: true }), 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) { for (const { dom, enabled, locator } of cases) {
await it.step(`"${locator}" in "${dom}" should be enabled=${enabled}`, async () => { await it.step(`"${locator}" in "${dom}" should be enabled=${enabled}`, async () => {