Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

cherry-pick(#18929): fix(role selector): expanded=false does not match elements without aria-expanded

Browse source 
Fixes #18920.
This commit is contained in:
Dmitry Gozman 2022-11-21 14:13:51 -08:00
parent 226eedf019
commit bbe27dc564
3 changed files with 49 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/playwright-core/src/server/injected/roleSelectorEngine.ts
View file

@ -72,6 +72,11 @@ function validateAttributes(attrs: AttributeSelectorPart[], role: string) {
validateSupportedRole(attr.name, kAriaExpandedRoles, role);
validateSupportedValues(attr, [true, false]);
validateSupportedOp(attr, ['<truthy>', '=']);
if (attr.op === '<truthy>') {
// Do not match "none" in "treeitem[expanded]".
attr.op = '=';
attr.value = true;
}
break;
}
case 'level': {

14
packages/playwright-core/src/server/injected/roleUtils.ts
View file

@ -670,14 +670,20 @@ export function getAriaPressed(element: Element): boolean | 'mixed' {
}
export const kAriaExpandedRoles = ['application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'row', 'rowheader', 'tab', 'treeitem', 'columnheader', 'menuitemcheckbox', 'menuitemradio', 'rowheader', 'switch'];
export function getAriaExpanded(element: Element): boolean {
export function getAriaExpanded(element: Element): boolean | 'none' {
// https://www.w3.org/TR/wai-aria-1.2/#aria-expanded
// https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
if (element.tagName === 'DETAILS')
return (element as HTMLDetailsElement).open;
if (kAriaExpandedRoles.includes(getAriaRole(element) || ''))
return getAriaBoolean(element.getAttribute('aria-expanded')) === true;
return false;
if (kAriaExpandedRoles.includes(getAriaRole(element) || '')) {
const expanded = element.getAttribute('aria-expanded');
if (expanded === null)
return 'none';
if (expanded === 'true')
return true;
return false;
}
return 'none';
}
export const kAriaLevelRoles = ['heading', 'listitem', 'row', 'treeitem'];

49
tests/page/selectors-role.spec.ts
View file

@ -169,26 +169,42 @@ test('should support pressed', async ({ page }) => {
test('should support expanded', async ({ page }) => {
await page.setContent(`
<button>Hi</button>
<button aria-expanded="true">Hello</button>
<button aria-expanded="false">Bye</button>
<div role="treeitem">Hi</div>
<div role="treeitem" aria-expanded="true">Hello</div>
<div role="treeitem" aria-expanded="false">Bye</div>
`);
expect(await page.locator(`role=button[expanded]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button aria-expanded="true">Hello</button>`,
expect(await page.locator('role=treeitem').evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem">Hi</div>`,
`<div role="treeitem" aria-expanded="true">Hello</div>`,
`<div role="treeitem" aria-expanded="false">Bye</div>`,
]);
expect(await page.locator(`role=button[expanded=true]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button aria-expanded="true">Hello</button>`,
expect(await page.getByRole('treeitem').evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem">Hi</div>`,
`<div role="treeitem" aria-expanded="true">Hello</div>`,
`<div role="treeitem" aria-expanded="false">Bye</div>`,
]);
expect(await page.getByRole('button', { expanded: true }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button aria-expanded="true">Hello</button>`,
expect(await page.locator(`role=treeitem[expanded]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem" aria-expanded="true">Hello</div>`,
]);
expect(await page.locator(`role=button[expanded=false]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button>Hi</button>`,
`<button aria-expanded="false">Bye</button>`,
expect(await page.locator(`role=treeitem[expanded=true]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem" aria-expanded="true">Hello</div>`,
]);
expect(await page.getByRole('button', { expanded: false }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<button>Hi</button>`,
`<button aria-expanded="false">Bye</button>`,
expect(await page.getByRole('treeitem', { expanded: true }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem" aria-expanded="true">Hello</div>`,
]);
expect(await page.locator(`role=treeitem[expanded=false]`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem" aria-expanded="false">Bye</div>`,
]);
expect(await page.getByRole('treeitem', { expanded: false }).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem" aria-expanded="false">Bye</div>`,
]);
// Workaround for expanded="none".
expect(await page.locator(`[role=treeitem]:not([aria-expanded])`).evaluateAll(els => els.map(e => e.outerHTML))).toEqual([
`<div role="treeitem">Hi</div>`,
]);
});
@ -403,4 +419,7 @@ test('errors', async ({ page }) => {
const e7 = await page.$('role=button[name]').catch(e => e);
expect(e7.message).toContain(`"name" attribute must have a value`);
const e8 = await page.$('role=treeitem[expanded="none"]').catch(e => e);
expect(e8.message).toContain(`"expanded" must be one of true, false`);
});