2022-03-21 17:26:45 -07:00
|
|
|
/**
|
|
|
|
|
* Copyright (c) Microsoft Corporation.
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
|
*
|
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
*
|
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
|
* limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
2022-03-25 15:05:50 -08:00
|
|
|
import { contextTest as test, expect } from '../config/browserTest';
|
2022-03-21 17:26:45 -07:00
|
|
|
import fs from 'fs';
|
|
|
|
|
|
2022-03-26 08:36:25 -07:00
|
|
|
test.skip(({ mode }) => mode !== 'default');
|
|
|
|
|
|
2022-06-09 13:51:48 -07:00
|
|
|
const ranges = [
|
|
|
|
|
'name_test_case_539-manual.html',
|
|
|
|
|
'name_test_case_721-manual.html',
|
|
|
|
|
];
|
2022-03-21 17:26:45 -07:00
|
|
|
|
2022-06-09 13:51:48 -07:00
|
|
|
for (let range = 0; range <= ranges.length; range++) {
|
|
|
|
|
test('wpt accname #' + range, async ({ page, asset, server, browserName }) => {
|
|
|
|
|
const skipped = [
|
|
|
|
|
// Spec clearly says to only use control's value when embedded in a label (step 2C).
|
|
|
|
|
'name_heading-combobox-focusable-alternative-manual.html',
|
|
|
|
|
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
|
|
|
|
|
'name_test_case_659-manual.html',
|
|
|
|
|
// This test expects ::before + title + ::after, which is neither 2F nor 2I.
|
|
|
|
|
'name_test_case_660-manual.html',
|
|
|
|
|
];
|
|
|
|
|
if (browserName === 'firefox') {
|
|
|
|
|
// This test contains the following style:
|
|
|
|
|
// [data-after]:after { content: attr(data-after); }
|
|
|
|
|
// In firefox, content is returned as "attr(data-after)"
|
|
|
|
|
// instead of being resolved to the actual value.
|
|
|
|
|
skipped.push('name_test_case_553-manual.html');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
await page.addInitScript(() => {
|
|
|
|
|
const self = window as any;
|
|
|
|
|
self.setup = () => {};
|
|
|
|
|
self.ATTAcomm = class {
|
|
|
|
|
constructor(data) {
|
|
|
|
|
self.steps = [];
|
|
|
|
|
for (const step of data.steps) {
|
|
|
|
|
if (!step.test.ATK)
|
2022-03-21 17:26:45 -07:00
|
|
|
continue;
|
2022-06-09 13:51:48 -07:00
|
|
|
for (const atk of step.test.ATK) {
|
|
|
|
|
if (atk[0] !== 'property' || atk[1] !== 'name' || atk[2] !== 'is' || typeof atk[3] !== 'string')
|
|
|
|
|
continue;
|
|
|
|
|
self.steps.push({ selector: '#' + step.element, name: atk[3] });
|
|
|
|
|
}
|
2022-03-21 17:26:45 -07:00
|
|
|
}
|
|
|
|
|
}
|
2022-06-09 13:51:48 -07:00
|
|
|
};
|
|
|
|
|
});
|
2022-03-21 17:26:45 -07:00
|
|
|
|
2022-06-09 13:51:48 -07:00
|
|
|
const testDir = asset('wpt/accname');
|
|
|
|
|
const testFiles = fs.readdirSync(testDir, { withFileTypes: true }).filter(e => e.isFile() && e.name.endsWith('.html')).map(e => e.name);
|
|
|
|
|
for (const testFile of testFiles) {
|
|
|
|
|
if (skipped.includes(testFile))
|
|
|
|
|
continue;
|
|
|
|
|
const included = (range === 0 || testFile >= ranges[range - 1]) && (range === ranges.length || testFile < ranges[range]);
|
|
|
|
|
if (!included)
|
|
|
|
|
continue;
|
|
|
|
|
await test.step(testFile, async () => {
|
|
|
|
|
await page.goto(server.PREFIX + `/wpt/accname/` + testFile);
|
|
|
|
|
// Use $eval to force injected script.
|
|
|
|
|
const result = await page.$eval('body', () => {
|
|
|
|
|
const result = [];
|
|
|
|
|
for (const step of (window as any).steps) {
|
|
|
|
|
const element = document.querySelector(step.selector);
|
|
|
|
|
if (!element)
|
|
|
|
|
throw new Error(`Unable to resolve "${step.selector}"`);
|
|
|
|
|
const received = (window as any).__injectedScript.getElementAccessibleName(element);
|
|
|
|
|
result.push({ selector: step.selector, expected: step.name, received });
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
});
|
|
|
|
|
for (const { selector, expected, received } of result)
|
2022-12-27 09:06:46 -08:00
|
|
|
expect.soft(received, `checking "${selector}" in ${testFile}`).toBe(expected);
|
2022-03-21 17:26:45 -07:00
|
|
|
});
|
2022-06-09 13:51:48 -07:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2022-03-28 15:22:50 -07:00
|
|
|
|
2022-03-29 11:59:44 -07:00
|
|
|
test('axe-core implicit-role', async ({ page, asset, server }) => {
|
2022-03-28 15:22:50 -07:00
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
|
const testCases = require(asset('axe-core/implicit-role'));
|
|
|
|
|
for (const testCase of testCases) {
|
|
|
|
|
await test.step(`checking ${JSON.stringify(testCase)}`, async () => {
|
|
|
|
|
await page.setContent(`
|
|
|
|
|
<body>
|
|
|
|
|
${testCase.html}
|
|
|
|
|
</body>
|
|
|
|
|
`);
|
|
|
|
|
// Use $eval to force injected script.
|
|
|
|
|
const received = await page.$eval('body', (_, selector) => {
|
|
|
|
|
const element = document.querySelector(selector);
|
|
|
|
|
if (!element)
|
|
|
|
|
throw new Error(`Unable to resolve "${selector}"`);
|
|
|
|
|
return (window as any).__injectedScript.getAriaRole(element);
|
|
|
|
|
}, testCase.target);
|
2022-12-27 09:06:46 -08:00
|
|
|
expect.soft(received, `checking ${JSON.stringify(testCase)}`).toBe(testCase.role);
|
2022-03-28 15:22:50 -07:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2022-03-29 11:59:44 -07:00
|
|
|
|
|
|
|
|
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);
|
2022-12-27 09:06:46 -08:00
|
|
|
expect.soft(received, `checking ${JSON.stringify(testCase)}`).toEqual(expected);
|
2022-03-29 11:59:44 -07:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2022-12-27 09:06:46 -08:00
|
|
|
test('accessible name with slots', async ({ page }) => {
|
|
|
|
|
// Text "foo" is assigned to the slot, should not be used twice.
|
|
|
|
|
await page.setContent(`
|
|
|
|
|
<button><div>foo</div></button>
|
|
|
|
|
<script>
|
|
|
|
|
(() => {
|
|
|
|
|
const container = document.querySelector('div');
|
|
|
|
|
const shadow = container.attachShadow({ mode: 'open' });
|
|
|
|
|
const slot = document.createElement('slot');
|
|
|
|
|
shadow.appendChild(slot);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
`);
|
|
|
|
|
const name1 = await page.$eval('button', e => (window as any).__injectedScript.getElementAccessibleName(e));
|
|
|
|
|
expect.soft(name1).toBe('foo');
|
|
|
|
|
|
|
|
|
|
// Text "foo" is assigned to the slot, should be used instead of slot content.
|
|
|
|
|
await page.setContent(`
|
|
|
|
|
<div>foo</div>
|
|
|
|
|
<script>
|
|
|
|
|
(() => {
|
|
|
|
|
const container = document.querySelector('div');
|
|
|
|
|
const shadow = container.attachShadow({ mode: 'open' });
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
shadow.appendChild(button);
|
|
|
|
|
const slot = document.createElement('slot');
|
|
|
|
|
button.appendChild(slot);
|
|
|
|
|
const span = document.createElement('span');
|
|
|
|
|
span.textContent = 'pre';
|
|
|
|
|
slot.appendChild(span);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
`);
|
|
|
|
|
const name2 = await page.$eval('button', e => (window as any).__injectedScript.getElementAccessibleName(e));
|
|
|
|
|
expect.soft(name2).toBe('foo');
|
|
|
|
|
|
|
|
|
|
// Nothing is assigned to the slot, should use slot content.
|
|
|
|
|
await page.setContent(`
|
|
|
|
|
<div></div>
|
|
|
|
|
<script>
|
|
|
|
|
(() => {
|
|
|
|
|
const container = document.querySelector('div');
|
|
|
|
|
const shadow = container.attachShadow({ mode: 'open' });
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
shadow.appendChild(button);
|
|
|
|
|
const slot = document.createElement('slot');
|
|
|
|
|
button.appendChild(slot);
|
|
|
|
|
const span = document.createElement('span');
|
|
|
|
|
span.textContent = 'pre';
|
|
|
|
|
slot.appendChild(span);
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
`);
|
|
|
|
|
const name3 = await page.$eval('button', e => (window as any).__injectedScript.getElementAccessibleName(e));
|
|
|
|
|
expect.soft(name3).toBe('pre');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('accessible name nested treeitem', async ({ page }) => {
|
|
|
|
|
await page.setContent(`
|
|
|
|
|
<div role=treeitem id=target>
|
|
|
|
|
<span>Top-level</span>
|
|
|
|
|
<div role=group>
|
|
|
|
|
<div role=treeitem><span>Nested 1</span></div>
|
|
|
|
|
<div role=treeitem><span>Nested 2</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`);
|
|
|
|
|
const name = await page.$eval('#target', e => (window as any).__injectedScript.getElementAccessibleName(e));
|
|
|
|
|
expect.soft(name).toBe('Top-level');
|
|
|
|
|
});
|
|
|
|
|
|
2022-03-29 11:59:44 -07:00
|
|
|
function toArray(x: any): any[] {
|
|
|
|
|
return Array.isArray(x) ? x : [x];
|
|
|
|
|
}
|
