dom-accessibility-api icon indicating copy to clipboard operation
dom-accessibility-api copied to clipboard

Accessible names not computed correctly when using SVG's `<title>` elements.

Open Lukas-Kullmann opened this issue 1 year ago • 0 comments

This issue results from https://github.com/testing-library/dom-testing-library/issues/1295

The problem is that the <title> element seems to be ignored on all SVG elements except the topmost <svg> element (so on things like <g>).

This means that these WPT fail: https://github.com/web-platform-tests/wpt/blob/master/svg-aam/name/comp_host_language_label.html

In short, a test like this fails:

<svg viewbox="0 0 300 100">
  <circle cx="26" cy="26" r="25" data-expectedlabel="circle label" data-testname="circle > title" class="ex"><title>circle label</title></circle>
  <rect x="60" y="1" width="50" height="50" data-expectedlabel="rect label" data-testname="rect > title" class="ex"><title>rect label</title></rect>
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" data-expectedlabel="polygon label" data-testname="polygon > title" class="ex"><title>polygon label</title></polygon>
</svg>

Note that it works if you explicitly define aria-labelledby:

<svg viewbox="0 0 300 100">
  <circle cx="26" cy="26" r="25" data-expectedlabel="circle label" data-testname="circle > title" class="ex" aria-labelledby="circle-id"><title id="circle-id">circle label</title></circle>
  <rect x="60" y="1" width="50" height="50" data-expectedlabel="rect label" data-testname="rect > title" class="ex" aria-labelledby="rect-id"><title id="rect-id">rect label</title></rect>
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" data-expectedlabel="polygon label" data-testname="polygon > title" class="ex" aria-labelledby="polygon-id"><title id="polygon-id">polygon label</title></polygon>
</svg>

Lukas-Kullmann avatar Apr 08 '24 12:04 Lukas-Kullmann