Commit b0376a86 authored by Yura Zenevich's avatar Yura Zenevich
Browse files

Bug 1582409 - ensure that we handle SVGs with role=img correctly when running...

Bug 1582409 - ensure that we handle SVGs with role=img correctly when running text-label checks. r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D55976

--HG--
extra : moz-landing-system : lando
parent 82689761
......@@ -30,6 +30,13 @@ loader.lazyRequireGetter(
true
);
loader.lazyRequireGetter(
this,
"getAriaRoles",
"devtools/server/actors/utils/accessibility",
true
);
const {
accessibility: {
AUDIT_TYPE: { KEYBOARD },
......@@ -127,27 +134,6 @@ function isInvalidNode(node) {
);
}
/**
* Get role attribute for an accessible object if specified for its
* corresponding DOMNode.
*
* @param {nsIAccessible} accessible
* Accessible for which to determine its role attribute value.
*
* @returns {null|String}
* Role attribute value if specified.
*/
function getAriaRoles(accessible) {
try {
return accessible.attributes.getStringProperty("xml-roles");
} catch (e) {
// No xml-roles. nsPersistentProperties throws if the attribute for a key
// is not found.
}
return null;
}
/**
* Determine if accessible is focusable with the keyboard.
*
......
......@@ -5,6 +5,14 @@
"use strict";
const { Ci } = require("chrome");
loader.lazyRequireGetter(
this,
"getAriaRoles",
"devtools/server/actors/utils/accessibility",
true
);
const {
accessibility: {
AUDIT_TYPE: { TEXT_LABEL },
......@@ -137,6 +145,23 @@ const dialogRule = shouldHaveNonEmptyNameRule.bind(null, DIALOG_NO_NAME);
*/
const imageRule = function(accessible) {
const name = getAccessibleName(accessible);
const { DOMNode } = accessible;
if (
DOMNode instanceof DOMNode.ownerGlobal.SVGElement &&
DOMNode.ownerSVGElement
) {
let ownerSVGAccessible = accessible.parent;
while (ownerSVGAccessible.DOMNode.ownerSVGElement) {
ownerSVGAccessible = ownerSVGAccessible.parent;
}
const ariaRoles = getAriaRoles(ownerSVGAccessible);
if (ariaRoles && ariaRoles.includes("img")) {
// Do not require a defined name if a wrapping SVG has a role="img".
return null;
}
}
return name != null ? null : { score: FAIL, issue: IMAGE_NO_NAME };
};
......
......@@ -103,7 +103,29 @@ function isWebRenderEnabled(win) {
return false;
}
/**
* Get role attribute for an accessible object if specified for its
* corresponding DOMNode.
*
* @param {nsIAccessible} accessible
* Accessible for which to determine its role attribute value.
*
* @returns {null|String}
* Role attribute value if specified.
*/
function getAriaRoles(accessible) {
try {
return accessible.attributes.getStringProperty("xml-roles");
} catch (e) {
// No xml-roles. nsPersistentProperties throws if the attribute for a key
// is not found.
}
return null;
}
exports.getAriaRoles = getAriaRoles;
exports.isDefunct = isDefunct;
exports.isWebRenderEnabled = isWebRenderEnabled;
exports.loadSheetForBackgroundCalculation = loadSheetForBackgroundCalculation;
exports.removeSheetForBackgroundCalculation = removeSheetForBackgroundCalculation;
exports.isWebRenderEnabled = isWebRenderEnabled;
......@@ -1062,6 +1062,66 @@ add_task(async function() {
{ score: FAIL, issue: TOOLBAR_NO_NAME },
],
["Non-unique aria toolbar with aria-labelledby", "#toolbar-4", null],
["SVGElement with role=img that has a title", "#svg-1", null],
[
"SVGElement with no name and with ownerSVGElement with role=img that has a title",
"#svg-2",
null,
],
["SVGElement without role=img that has a title", "#svg-3", null],
[
"SVGElement with no name and with ownerSVGElement without role=img",
"#svg-4",
{ score: FAIL, issue: IMAGE_NO_NAME },
],
[
"SVGElement with role=img and no name",
"#svg-5",
{ score: FAIL, issue: IMAGE_NO_NAME },
],
[
"SVGElement with no name and with ownerSVGElement with role=img",
"#svg-6",
null,
],
[
"SVGElement with no name",
"#svg-7",
{ score: FAIL, issue: IMAGE_NO_NAME },
],
[
"SVGElement with no name and with ownerSVGElement with no name",
"#svg-8",
{ score: FAIL, issue: IMAGE_NO_NAME },
],
["SVGElement with a name", "#svg-9", null],
[
"SVGElement with a name and with ownerSVGElement with a name",
"#svg-10",
null,
],
["SVGElement with a title", "#svg-11", null],
[
"SVGElement with a name and with ownerSVGElement with a title",
"#svg-12",
null,
],
["SVGElement with role=img that has a title", "#svg-13", null],
[
"SVGElement with a name and with ownerSVGElement with role=img that has a title",
"#svg-14",
null,
],
[
"SVGElement with role=img and no title",
"#svg-15",
{ score: FAIL, issue: IMAGE_NO_NAME },
],
[
"SVGElement with a name and with ownerSVGElement with role=img and no title",
"#svg-16",
null,
],
];
for (const [description, selector, expected] of tests) {
......
......@@ -433,5 +433,33 @@
<span id="toolbar-3" role="toolbar" aria-labelledby="toolbar-3-label"></span>
<p id="toolbar-4-label">Toolbar</p>
<span id="toolbar-4" role="toolbar" aria-labelledby="toolbar-4-label"></span>
<svg id="svg-1" role="img" viewbox="0 0 100 10" height="10px">
<title id="siteLogoTitle">Site Logo</title>
<rect id="svg-2" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-3" viewbox="0 0 100 10" height="10px">
<title id="siteLogoTitle">Site Logo</title>
<rect id="svg-4" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-5" role="img" viewbox="0 0 100 10" height="10px">
<rect id="svg-6" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-7" viewbox="0 0 100 10" height="10px">
<rect id="svg-8" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-9" aria-label="foo" viewbox="0 0 100 10" height="10px">
<rect id="svg-10" aria-label="bar" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-11" viewbox="0 0 100 10" height="10px">
<title id="siteLogoTitle">Site Logo</title>
<rect id="svg-12" aria-label="foo" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-13" role="img" viewbox="0 0 100 10" height="10px">
<title id="siteLogoTitle">Site Logo</title>
<rect aria-label="foo" id="svg-14" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
<svg id="svg-15" role="img" viewbox="0 0 100 10" height="10px">
<rect aria-label="foo" id="svg-16" x="0" y="00" width="100" height="10" fill="red"></rect>
</svg>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment