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

feat(role): add more tests for accessible name (#13154)

Browse source
This commit is contained in:
Dmitry Gozman 2022-03-29 11:59:44 -07:00 committed by GitHub
parent 54f6e5db19
commit 6b48631eed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 1168 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -459,7 +459,9 @@ function getElementAccessibleNameInternal(element: Element, options: AccessibleN
const title = element.getAttribute('title') || '';
if (title.trim())
return title;
return 'Submit Query';
// SPEC DIFFERENCE.
// Spec says return localized "Submit Query", but browsers and axe-core insist on "Sumbit".
return 'Submit';
}
// https://w3c.github.io/html-aam/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-url-and-textarea-element
@ -538,6 +540,11 @@ function getElementAccessibleNameInternal(element: Element, options: AccessibleN
}
}
// SPEC DIFFERENCE.
// Spec does not say a word about <table summary="...">, but all browsers actually support it.
const summary = element.getAttribute('summary') || '';
if (summary)
return summary;
// SPEC DIFFERENCE.
// Spec says "if the table element has a title attribute, then use that attribute".
// We ignore title to pass "name_from_content-manual.html".
}

3
tests/assets/axe-core/README.md
View file

@ -4,4 +4,5 @@ Includes:
- `LICENSE`
Modifed:
- `implicit-role.js` contains extracted test cases from `/test/commons/aria/implicit-role.js`
- `implicit-role.js` contains test cases extracted from `/test/commons/aria/implicit-role.js`
- `accessible-text.js` contains test cases extracted from `/test/commons/aria/accessible-text.js`

1119
tests/assets/axe-core/accessible-text.js Normal file
View file

File diff suppressed because it is too large Load diff

40
tests/library/role-utils.spec.ts
View file

@ -80,7 +80,7 @@ test('wpt accname', async ({ page, asset, server, browserName }) => {
}
});
test('axe-core implicit role', async ({ page, asset, server }) => {
test('axe-core implicit-role', async ({ page, asset, server }) => {
await page.goto(server.EMPTY_PAGE);
const testCases = require(asset('axe-core/implicit-role'));
for (const testCase of testCases) {
@ -101,3 +101,41 @@ test('axe-core implicit role', async ({ page, asset, server }) => {
});
}
});
test('axe-core accessible-text', async ({ page, asset, server }) => {
await page.goto(server.EMPTY_PAGE);
const testCases = require(asset('axe-core/accessible-text'));
for (const testCase of testCases) {
await test.step(`checking ${JSON.stringify(testCase)}`, async () => {
await page.setContent(`
<body>
${testCase.html}
</body>
<script>
for (const template of document.querySelectorAll("template[shadow]")) {
const shadowRoot = template.parentElement.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content);
template.remove();
}
</script>
`);
// Use $eval to force injected script.
const targets = toArray(testCase.target);
const expected = toArray(testCase.accessibleText);
const received = await page.$eval('body', (_, selectors) => {
return selectors.map(selector => {
const injected = (window as any).__injectedScript;
const element = injected.querySelector(injected.parseSelector('css=' + selector), document, false);
if (!element)
throw new Error(`Unable to resolve "${selector}"`);
return injected.getElementAccessibleName(element);
});
}, targets);
expect(received, `checking ${JSON.stringify(testCase)}`).toEqual(expected);
});
}
});
function toArray(x: any): any[] {
return Array.isArray(x) ? x : [x];
}