Bug 1151648 - Construct accessible objects for SVG elements which have title or desc. r?surkov
According to SVG Accessibility API Mappings, an SVG element which has title or desc element must be exposed.
https://w3c.github.io/aria/svg-aam/svg-aam.html#include_elements
MozReview-Commit-ID: 5L2w5EFW8Ws
--- a/accessible/base/nsAccessibilityService.cpp
+++ b/accessible/base/nsAccessibilityService.cpp
@@ -128,16 +128,32 @@ MustBeAccessible(nsIContent* aContent, D
// for it.
nsAutoString id;
if (nsCoreUtils::GetID(aContent, id) && !id.IsEmpty())
return aDocument->IsDependentID(id);
return false;
}
+/**
+ * Return true if the SVG element should be accessible
+ */
+static bool
+MustBeSVGElementAccessible(nsIContent* aContent) {
+ // https://w3c.github.io/aria/svg-aam/svg-aam.html#include_elements
+ for (nsIContent* childElm = aContent->GetFirstChild(); childElm;
+ childElm = childElm->GetNextSibling()) {
+ if (childElm->IsAnyOfSVGElements(nsGkAtoms::title, nsGkAtoms::desc)) {
+ return true;
+ }
+ }
+ return false;
+}
+
+
////////////////////////////////////////////////////////////////////////////////
// Accessible constructors
static Accessible*
New_HTMLLink(nsIContent* aContent, Accessible* aContext)
{
// Only some roles truly enjoy life as HTMLLinkAccessibles, for details
// see closed bug 494807.
@@ -1164,25 +1180,27 @@ nsAccessibilityService::CreateAccessible
newAcc = new XULTabpanelAccessible(content, document);
}
}
}
if (!newAcc) {
if (content->IsSVGElement()) {
nsSVGPathGeometryFrame* pathGeometryFrame = do_QueryFrame(frame);
- if (pathGeometryFrame) {
+ if (pathGeometryFrame && MustBeSVGElementAccessible(content)) {
// A graphic elements: rect, circle, ellipse, line, path, polygon,
// polyline and image. A 'use' and 'text' graphic elements require
// special support.
newAcc = new EnumRoleAccessible<roles::GRAPHIC>(content, document);
} else if (content->IsSVGElement(nsGkAtoms::svg)) {
newAcc = new EnumRoleAccessible<roles::DIAGRAM>(content, document);
+ } else if (content->IsSVGElement(nsGkAtoms::g) &&
+ MustBeSVGElementAccessible(content)) {
+ newAcc = new EnumRoleAccessible<roles::GROUPING>(content, document);
}
-
} else if (content->IsMathMLElement()) {
const MarkupMapInfo* markupMap =
mMarkupMaps.Get(content->NodeInfo()->NameAtom());
if (markupMap && markupMap->new_func)
newAcc = markupMap->new_func(content, aContext);
// Fall back to text when encountering Content MathML.
if (!newAcc && !content->IsAnyOfMathMLElements(nsGkAtoms::annotation_,
--- a/accessible/tests/mochitest/role/test_svg.html
+++ b/accessible/tests/mochitest/role/test_svg.html
@@ -13,16 +13,17 @@
src="../role.js"></script>
<script type="application/javascript"
src="../attributes.js"></script>
<script type="application/javascript">
function doTests()
{
testRole("svg", ROLE_DIAGRAM);
+ testRole("g", ROLE_GROUPING);
testRole("rect", ROLE_GRAPHIC);
testRole("circle", ROLE_GRAPHIC);
testRole("ellipse", ROLE_GRAPHIC);
testRole("line", ROLE_GRAPHIC);
testRole("polygon", ROLE_GRAPHIC);
testRole("polyline", ROLE_GRAPHIC);
testRole("path", ROLE_GRAPHIC);
testRole("image", ROLE_GRAPHIC);
@@ -37,34 +38,61 @@
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=822983"
title="Map SVG graphic elements to accessibility API">
Bug 822983
</a>
+ <a target="_blank"
+ href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151648"
+ title="The Accessibility Tree doesn't reflect the accessible names that
+ are properly set within individual SVG graphics using the Title or
+ Desc elements.">
+ Mozilla Bug 1151648
+ </a>
+
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="g">
+ <title>g</title>
+ </g>
<rect width="300" height="100" id="rect"
- style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
+ style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)">
+ <title>rect</title>
+ </rect>
<circle cx="100" cy="50" r="40" stroke="black" id="circle"
- stroke-width="2" fill="red"/>
+ stroke-width="2" fill="red">
+ <title>circle</title>
+ </circle>
<ellipse cx="300" cy="80" rx="100" ry="50" id="ellipse"
- style="fill:yellow;stroke:purple;stroke-width:2"/>
+ style="fill:yellow;stroke:purple;stroke-width:2">
+ <title>ellipse</title>
+ </ellipse>
<line x1="0" y1="0" x2="200" y2="200" id="line"
- style="stroke:rgb(255,0,0);stroke-width:2"/>
+ style="stroke:rgb(255,0,0);stroke-width:2">
+ <title>line</title>
+ </line>
<polygon points="200,10 250,190 160,210" id="polygon"
- style="fill:lime;stroke:purple;stroke-width:1"/>
+ style="fill:lime;stroke:purple;stroke-width:1">
+ <title>polygon</title>
+ </polygon>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" id="polyline"
- style="fill:none;stroke:black;stroke-width:3" />
- <path d="M150 0 L75 200 L225 200 Z" id="path"/>
+ style="fill:none;stroke:black;stroke-width:3">
+ <title>polyline</title>
+ </polyline>
+ <path d="M150 0 L75 200 L225 200 Z" id="path">
+ <title>path</title>
+ </path>
<image x1="25" y1="80" width="50" height="20" id="image"
- xlink:href="../moz.png"/>
+ xlink:href="../moz.png">
+ <title>image</title>
+ </image>
</svg>
</body>
</html>
--- a/accessible/tests/mochitest/tree/a11y.ini
+++ b/accessible/tests/mochitest/tree/a11y.ini
@@ -37,15 +37,16 @@ skip-if = buildapp == "mulet"
[test_img.html]
[test_invalid_img.xhtml]
[test_invalidationlist.html]
[test_list.html]
[test_map.html]
[test_media.html]
skip-if = buildapp == "mulet"
[test_select.html]
+[test_svg.html]
[test_tabbox.xul]
[test_tabbrowser.xul]
[test_table.html]
[test_tree.xul]
[test_txtcntr.html]
[test_txtctrl.html]
[test_txtctrl.xul]
new file mode 100644
--- /dev/null
+++ b/accessible/tests/mochitest/tree/test_svg.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>SVG elements tests</title>
+ <link rel="stylesheet" type="text/css"
+ href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+
+ <script type="application/javascript"
+ src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+
+ <script type="application/javascript"
+ src="../common.js"></script>
+ <script type="application/javascript"
+ src="../role.js"></script>
+
+ <script type="application/javascript">
+ function doTest()
+ {
+ // svg1
+ const svgAccTree1 = {
+ role: ROLE_DIAGRAM,
+ children: []
+ };
+
+ testAccessibleTree("svg1", svgAccTree1);
+
+ // svg2
+ const svgAccTree2 = {
+ role: ROLE_DIAGRAM,
+ children: [
+ {
+ role: ROLE_GROUPING,
+ children: []
+ }
+ ]
+ };
+
+ testAccessibleTree("svg2", svgAccTree2);
+
+ // svg3
+ const svgAccTree3 = {
+ role: ROLE_DIAGRAM,
+ children: [
+ {
+ role: ROLE_GRAPHIC,
+ children: []
+ }
+ ]
+ };
+
+ testAccessibleTree("svg3", svgAccTree3);
+
+ // svg4
+ const svgAccTree4 = {
+ role: ROLE_DIAGRAM,
+ children: [
+ {
+ role: ROLE_GROUPING,
+ children: [
+ {
+ role: ROLE_GRAPHIC,
+ children: []
+ }
+ ]
+ }
+ ]
+ };
+
+ testAccessibleTree("svg4", svgAccTree4);
+
+ SimpleTest.finish();
+ }
+
+ SimpleTest.waitForExplicitFinish();
+ addA11yLoadEvent(doTest);
+ </script>
+</head>
+<body>
+
+ <a target="_blank"
+ href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151648"
+ title="The Accessibility Tree doesn't reflect the accessible names that
+ are properly set within individual SVG graphics using the Title or
+ Desc elements.">
+ Mozilla Bug 1151648
+ </a>
+
+ <p id="display"></p>
+ <div id="content" style="display: none"></div>
+ <pre id="test">
+ </pre>
+
+ <!-- no accessible objects -->
+ <svg id="svg1">
+ <g id="g1">
+ <rect width="300" height="100" id="rect1" style="fill:#00f" />
+ </g>
+ </svg>
+
+ <svg id="svg2">
+ <g id="g2">
+ <title>g</title>
+ <rect width="300" height="100" id="rect2" style="fill:#00f" />
+ </g>
+ </svg>
+
+ <svg id="svg3">
+ <g id="g3">
+ <rect width="300" height="100" id="rect3" style="fill:#00f">
+ <title>rect</title>
+ </rect>
+ </g>
+ </svg>
+
+ <svg id="svg4">
+ <g id="g4">
+ <title>g</title>
+ <rect width="300" height="100" id="rect4" style="fill:#00f">
+ <title>rect</title>
+ </rect>
+ </g>
+ </svg>
+
+</body>
+</html>