RE: Shadow DOM and SVG use elements

> From: Travis Leithead [mailto:travis.leithead@microsoft.com]
> Sent: 24 October 2015 04:42
> Well, since SVG 'use' is mostly about replicating the composed tree
anyway,
> it seems that is should probably render the composed tree--e.g., this
seems
> natural, because use would "replicate" the host element, which would then
> render it's shadow DOM.

Thinking out loud here... There is a problem with the way <defs> and <use>
work that may be relevant, or even resolvable here. SVG has little implicit
accessibility, so it has to be applied explicitly.

When you define something in <defs> and duplicate it with <use>, the
accessibility has to be applied inside the <defs>. When the accessibility
sits inside the <defs> it creates problems. For example this would result in
duplicated ID values in the rendered document:

<svg width="250" height="100">
<defs>
<g id="rect2" role="img" aria-labelledby="t2">
<title id="t2">First rectangle</title>
<rect width="100%" height="100%" style="fill: #c8a2c8;" />
</defs>

<use x="0" y="0" height="50" width="75" xlink:href="#rect2" />
<use x="100" y="0" height="50" width="75" xlink:href="#rect2" />
</svg>

It isn't possible to apply more than basic accessibility to the <use>
element, and it doesn't seem to be possible to cross the streams to
reference things inside the <defs> from outside.

Léonie.

-- 
Senior accessibility engineer @PacielloGroup @LeonieWatson

Received on Tuesday, 27 October 2015 06:40:32 UTC