Closed Bug 1151648 Opened 9 years ago Closed 4 years ago

The Accessibility Tree doesn't reflect the accessible names that are properly set within individual SVG graphics using the Title or Desc elements.

Categories

(Core :: Disability Access APIs, defect)

x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla79
Tracking Status
firefox79 --- fixed

People

(Reporter: bryan.garaventa, Assigned: Jamie)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 1 obsolete file)

Attached image sample.svg
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko

Steps to reproduce:

According to the SVG specification, it should be possible to assign a tooltip for every graphic within an SVG, including the primary SVG by adding a Title element as the first child of either the SVG or G element. This should be reflected in the Accessibility Tree as the accessible name for each graphic. Similarly, a Desc element can be added in the same manner to provide a long description of a graphic, which also should be reflected within the Accessibility Tree for each graphic.

Currently however, none of these accessible names or descriptions are reflected in the Accessibility Tree.

Sample markup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310" preserveAspectRatio="xMinYMin meet" width="100%" height="100%">
<title> Pie Chart Title </title>
<g transform="translate(157.5 157.5)">
<g class="arc">
<title> Component A 0% </title>
<path class="is-selected" style="fill: #13a7ff; stroke: #13a7ff; stroke-width: 0;" transform="scale(1.05)" d="M 8.75622e-015 -143 A 143 143 0 0 1 2.60797 -142.976 L 0 0 Z" />
</g>
<g class="arc">
<title> Component B 1% </title>
<path class="" style="fill: #0872b0; stroke: #fff; stroke-width: 1px;" transform="" d="M 2.60797 -142.976 A 143 143 0 0 1 7.82044 -142.786 L 0 0 Z" />
</g>
<g class="arc">
<title> Component C 13% </title>
<path class="" style="fill: #79cc26; stroke: #fff; stroke-width: 1px;" transform="" d="M 7.82044 -142.786 A 143 143 0 0 1 107.253 -94.5823 L 0 0 Z" />
</g>
<g class="arc">
<title> Component D 16% </title>
<path style="fill: #3f9818;" d="M 107.253 -94.5823 A 143 143 0 0 1 136.67 42.0758 L 0 0 Z" />
</g>
<g class="arc">
<title> Component E 34% </title>
<path style="fill: #ffd042;" d="M 136.67 42.0758 A 143 143 0 0 1 -106.821 95.0703 L 0 0 Z" />
</g>
<g class="arc">
<title> Component F 37% </title>
<path style="fill: #f86f11;" d="M -106.821 95.0703 A 143 143 0 0 1 -1.53278e-013 -143 L 0 0 Z" />
</g>
</g>
</svg>

To reproduce, use Object Inspector to view the MSAA Name properties for each graphic, and notice that there is no name assigned for any of the child graphics.


Actual results:

Assistive Technologies such as NVDA and JAWS cannot detect any of the child graphics nor their titles because of this bug.


Expected results:

The Accessibility Tree should reflect the accessible Name property for each child graphic that includes a Title element, and the Description property should be set for every graphic that includes a Desc element, which will then be recognized by ATs such as NVDA and JAWS.
Status: UNCONFIRMED → NEW
Ever confirmed: true
the problem is svg:g doesn't have an accessible and thus svg:title labels nothing. To resolve that we can make it accessible like

section svg:g, having accessible name from title
  graphic svg:path having no name

Still it doesn't make sense to make all svg:g accessible, i.e. svg:g is accessible <=> has title.

Alternatively if svg:g has only one graphic in children, we could not create accessible for svg:g but assigned its title to that graphic.

What do you think?
> Still it doesn't make sense to make all svg:g accessible, i.e. svg:g is accessible <=> has title.

I agree, this would only be valid if a graphic had a textual title or desc, otherwise it would be treated with an implicit role=presentation. I believe there is something in the SVG spec that makes mention of this being an implicit role.

> Alternatively if svg:g has only one graphic in children, we could not create accessible for svg:g but assigned its title to that graphic.

I think I understand, basically it would be good to expose an accessible name for one graphic if one graphic has a title or if the first child of SVG is a title/desc, assigning the name to the main graphic?

I'm not sure where desc fits in, but it would probably be good to track both at the same time since they likely share the same logic.

If it works and can follow the same spec syntax, I'll be happy however it's done :)
Comment on attachment 8790296 [details]
Bug 1151648 - Construct accessible objects for SVG elements which have title or desc.

https://reviewboard.mozilla.org/r/78180/#review76708

::: accessible/base/nsAccessibilityService.cpp:1188
(Diff revision 1)
>    }
>  
>    if (!newAcc) {
>      if (content->IsSVGElement()) {
>        nsSVGPathGeometryFrame* pathGeometryFrame = do_QueryFrame(frame);
> -      if (pathGeometryFrame) {
> +      if (pathGeometryFrame && MustBeSVGElementAccessible(content)) {

as I understand it all path elements should be accessible not depending wether they have name or not. Anyway, this seems unrelated with the bug

::: accessible/base/nsAccessibilityService.cpp:1197
(Diff revision 1)
>          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);

if the function is used only once, then I would keep its body here

::: accessible/tests/mochitest/role/test_svg.html:66
(Diff revision 1)
> +    <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>

why is this change?
Comment on attachment 8790296 [details]
Bug 1151648 - Construct accessible objects for SVG elements which have title or desc.

https://reviewboard.mozilla.org/r/78180/#review76790

::: accessible/base/nsAccessibilityService.cpp:1188
(Diff revision 1)
>    }
>  
>    if (!newAcc) {
>      if (content->IsSVGElement()) {
>        nsSVGPathGeometryFrame* pathGeometryFrame = do_QueryFrame(frame);
> -      if (pathGeometryFrame) {
> +      if (pathGeometryFrame && MustBeSVGElementAccessible(content)) {

> as I understand it all path elements should be accessible not depending wether they have name or not. Anyway, this seems unrelated with the bug

SVG-AAM intends UAs to only expose path elements which meets the criteria including whether elements have title or desc.

https://w3c.github.io/aria/svg-aam/svg-aam.html#details-id-54

> path
> graphics-symbol role mapping if the element meets the criteria for Including Elements in the Accessibility Tree; otherwise, no accessible object created

::: accessible/tests/mochitest/role/test_svg.html:66
(Diff revision 1)
> +    <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>

If we only expose elements which have title or desc, we need to add title or desc. Otherwise the elements are not exposed.
Assignee: nobody → taken.spc
(In reply to Takeshi Kurosawa from comment #5)

> > +      if (pathGeometryFrame && MustBeSVGElementAccessible(content)) {
> 
> > as I understand it all path elements should be accessible not depending wether they have name or not. Anyway, this seems unrelated with the bug
> 
> SVG-AAM intends UAs to only expose path elements which meets the criteria
> including whether elements have title or desc.
> 
> https://w3c.github.io/aria/svg-aam/svg-aam.html#details-id-54

ok, fair enough
Comment on attachment 8790296 [details]
Bug 1151648 - Construct accessible objects for SVG elements which have title or desc.

https://reviewboard.mozilla.org/r/78178/#review76794

r=me, thank you for fixing this
Comment on attachment 8790296 [details]
Bug 1151648 - Construct accessible objects for SVG elements which have title or desc.

https://reviewboard.mozilla.org/r/78180/#review76796
Attachment #8790296 - Flags: review?(surkov.alexander) → review+
Please mark the open issues as resolve in MozReview so that this can be autolanded.
Keywords: checkin-needed
Are there still plans to land this?
Flags: needinfo?(taken.spc)
(In reply to Robert Longson from comment #10)
> Are there still plans to land this?

I dropped my open issues sicne they were answered, however I cannot close Takeshi's ones, which are not real issues but answers on my issues. Can they be dropped somehow too?

Should this still be landed? It seems like the patch was ready to land other than technical issues with MozReview.

I got here because this bug is mentioned at https://css-tricks.com/accessible-svgs/

Flags: needinfo?(jteh)

I looked at the patch. I think it should be landed, yes, though there may be some bit-rot now. Also, I guess someone will need to "adopt" the patch. I'll try to take a look at this when I get some time.

Flags: needinfo?(jteh)

According to SVG Accessibility API Mappings, an SVG element which has title or desc element must be exposed.
https://w3c.github.io/svg-aam/#include_elements
Previously, we didn't expose <g> elements at all even if they had a title/desc, and we unconditionally exposed some other SVG elements even when they didn't.

Original patch by Takeshi Kurosawa.

Assignee: taken.spc → jteh
Flags: needinfo?(taken.spc)
Attachment #8790296 - Attachment is obsolete: true
Pushed by mzehe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f2da1b325e97
Construct accessible objects for SVG elements which have title or desc. r=MarcoZ

Backed out for failures on browser_accessibility_text_label_audit.js

backout: https://hg.mozilla.org/integration/autoland/rev/b543345dcbd7741b801d321de300a51c5aef39a0

push: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&revision=f2da1b325e97c9fad5d6a8fc6e16b509c6f3921d&selectedTaskRun=ODbMp_bcTN600wXmk2WJ7A-0

failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=304696543&repo=autoland&lineNumber=20003

[task 2020-06-02T10:07:03.426Z] 10:07:03 INFO - TEST-PASS | devtools/server/tests/browser/browser_accessibility_text_label_audit.js | Audit result for #svg-1 is correct. - null deepEqual null -
[task 2020-06-02T10:07:03.426Z] 10:07:03 INFO - SVGElement with no name and with ownerSVGElement with role=img that has a title
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Buffered messages finished
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - TEST-UNEXPECTED-FAIL | devtools/server/tests/browser/browser_accessibility_text_label_audit.js | Uncaught exception - at chrome://mochitests/content/browser/devtools/server/tests/browser/browser_accessibility_text_label_audit.js:1133 - TypeError: can't access property "audit", front is null
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Stack trace:
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - @chrome://mochitests/content/browser/devtools/server/tests/browser/browser_accessibility_text_label_audit.js:1133:19
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Async*Tester_execTest/<@chrome://mochikit/content/browser-test.js:1064:34
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Tester_execTest@chrome://mochikit/content/browser-test.js:1104:11
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - nextTest/<@chrome://mochikit/content/browser-test.js:927:14
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<@chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:918:23
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Leaving test bound
[task 2020-06-02T10:07:03.427Z] 10:07:03 INFO - Removing tab.

Flags: needinfo?(jteh)

Yura, the test for svg-2 is failing in devtools/server/tests/browser/browser_accessibility_text_label_audit.js. That rect no longer gets an accessible at all in conformance with the SVG a11y mapping spec, since it doesn't have a title, desc or applicable ARIA attribute. Should we just remove that particular test or is there something else you'd like to verify here instead; e.g. giving the rect a role="img" as well?

Flags: needinfo?(jteh) → needinfo?(yzenevich)
See Also: → 1582409
Pushed by jteh@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/13b2c57cb1fe
Construct accessible objects for SVG elements which have title or desc. r=MarcoZ,yzen
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla79
Flags: needinfo?(yzenevich)
Duplicate of this bug: 764422
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: