Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 17:55:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1578494 - when checking for mouse only interactivity, add additional checks for text leafs and showlongdesc actions. r=nchevobbe

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D44868

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Yura Zenevich 2019-09-06 12:24:18 +00:00
parent 6dc6bb2287
commit 2b061cd207
3 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
devtools/server/actors/accessibility/audit/keyboard.js
View File

@ -44,6 +44,9 @@ const {
// Specified by the author CSS rule type.
const STYLE_RULE = 1;
// Accessible action for showing long description.
const SHOW_LONG_DESC_ACTION = "showlongdesc";
/**
* Focus specific pseudo classes that the keyboard audit simulates to determine
* focus styling.
@ -337,8 +340,21 @@ function semanticsRule(accessible) {
return { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS };
}
if (accessible.actionCount > 0) {
return { score: FAIL, issue: MOUSE_INTERACTIVE_ONLY };
if (
// Ignore text leafs.
accessible.role === Ci.nsIAccessibleRole.ROLE_TEXT_LEAF ||
// Ignore accessibles with no accessible actions.
accessible.actionCount === 0
) {
return null;
}
// Long desc action might be present for images, ignore it in the list of
// actions.
for (let i = 0; i < accessible.actionCount; i++) {
if (accessible.getActionName(i) !== SHOW_LONG_DESC_ACTION) {
return { score: FAIL, issue: MOUSE_INTERACTIVE_ONLY };
}
}
return null;

35
devtools/server/tests/browser/browser_accessibility_keyboard_audit.js
View File

@ -68,7 +68,13 @@ add_task(async function() {
issue: INTERACTIVE_NO_ACTION,
},
],
["Interactive accessible (link with valid hred).", "#link-2", null],
["Interactive accessible (link with valid href).", "#link-2", null],
["Interactive accessible (link with # as href).", "#link-3", null],
[
"Interactive accessible (link with empty string as href).",
"#link-4",
null,
],
["Interactive accessible with no tabindex.", "#button-3", null],
[
"Interactive accessible with -1 tabindex.",
@ -107,6 +113,22 @@ add_task(async function() {
{ score: FAIL, issue: INTERACTIVE_NOT_FOCUSABLE },
],
["Focusable, ARIA button with a click handler.", "#button-8", null],
["Regular image, no keyboard checks should flag an issue.", "#img-1", null],
[
"Image with a longdesc (accessible will have showlongdesc action).",
"#img-2",
null,
],
[
"Clickable image with a longdesc (accessible will have click and showlongdesc actions).",
"#img-3",
{ score: FAIL, issue: MOUSE_INTERACTIVE_ONLY },
],
[
"Clickable image (accessible will have click action).",
"#img-4",
{ score: FAIL, issue: MOUSE_INTERACTIVE_ONLY },
],
];
for (const [description, selector, expected] of tests) {
@ -121,6 +143,17 @@ add_task(async function() {
);
}
info("Text leaf inside a link (jump action is propagated to the text link)");
const node = await walker.querySelector(walker.rootNode, "#link-5");
const parent = await a11yWalker.getAccessibleFor(node);
const front = (await parent.children())[0];
const audit = await front.audit({ types: [KEYBOARD] });
Assert.deepEqual(
audit[KEYBOARD],
null,
"Text leafs are excluded from semantics rule."
);
await accessibility.disable();
await waitForA11yShutdown();
await target.destroy();

7
devtools/server/tests/browser/doc_accessibility_keyboard_audit.html
View File

@ -22,6 +22,9 @@
<input id="input-4" type="text" />
<a id="link-1">Though a link, I'm not interactive.</a>
<a id="link-2" href="example.com">I'm a proper link.</a>
<a id="link-3" href="#">Link 3</a>
<a id="link-4" href="">Link 4</a>
<a id="link-5" href="https://example.com">Website</a>
<button id="button-3">Button with no tabindex</button>
<button id="button-4" tabindex="-1">Button with -1 tabindex</button>
<button id="button-5" tabindex="0">Button with 0 tabindex</button>
@ -33,5 +36,9 @@
<div id="focusable-4" onclick="console.log('foo');" tabindex="0">Button no semantics</div>
<div id="button-7" onclick="console.log('foo');" role="button">Semantic button not focusable</div>
<div id="button-8" onclick="console.log('foo');" role="button" tabindex="0">Button</div>
<img id="img-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-2" longdesc="https://example.com" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-3" longdesc="https://example.com" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
<img id="img-4" onclick="console.log('foo');" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAJklEQVRIie3NMREAAAgAoe9fWls4eAzMVM0xoVAoFAqFQqFQ+C9chp4NHvu+4Q4AAAAASUVORK5CYII=" alt="alt text">
</body>
</html>