Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: improve a11y snapshot handling if the tree is not correct #9405

Merged
merged 1 commit into from Dec 13, 2022
+49 −1
Merged

fix: improve a11y snapshot handling if the tree is not correct #9405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/puppeteer-core/src/common/Accessibility.ts
View file
Open in desktop
Expand Up @@ -564,7 +564,10 @@ class AXNode {
}
for (const node of nodeById.values()) {
for (const childId of node.payload.childIds || []) {
node.children.push(nodeById.get(childId)!);
const child = nodeById.get(childId);
if (child) {
node.children.push(child);
}
}
}
return nodeById.values().next().value;
Expand Down
45 changes: 45 additions & 0 deletions test/src/accessibility.spec.ts
View file
Open in desktop
Expand Up @@ -163,6 +163,51 @@ describe('Accessibility', function () {
)
).toEqual(golden);
});
it('get snapshots while the tree is re-calculated', async () => {
// see https://github.com/puppeteer/puppeteer/issues/9404
const {page} = getTestState();

await page.setContent(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible name + aria-expanded puppeteer bug</title>
<style>
[aria-expanded="false"] + * {
display: none;
}
</style>
</head>
<body>
<button hidden>Show</button>
<p>Some content</p>
<script>
const button = document.querySelector('button');
button.removeAttribute('hidden')
button.setAttribute('aria-expanded', 'false');
button.addEventListener('click', function() {
button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') !== 'true')
if (button.getAttribute('aria-expanded') == 'true') {
button.textContent = 'Hide'
} else {
button.textContent = 'Show'
}
})
</script>
</body>
</html>`
);
async function getAccessibleName(page: any, element: any) {
return (await page.accessibility.snapshot({root: element})).name;
}
const button = await page.$('button');
expect(await getAccessibleName(page, button)).toEqual('Show');
await button?.click();
await page.waitForSelector('aria/Hide');
});
it('roledescription', async () => {
const {page} = getTestState();

Expand Down