1409253 - When <svg> is used as a background image, elements such as buttons may become unusable

Status: NEW

(Core :: DOM: Security, enhancement, P5)

Description

[Tom Ritter [:tjr]]

> Accessibility
>
> SVG used as background images shouldn't be used for information as part of
> an element and this happens sometimes etc but is somewhat fair game to
> ignore. SVG used as a node within a button however can convey important
> information that screen readers usually get context of, take for example
> https://github.com/tabatkins/bikeshed/issues/new in this case the icons
> above the text area have aria labels on their parent elements perhaps we
> should consider displaying this to users with disabled SVG elements?
> (Without this some pages become unusable) I think we have a recipe for
> fathom for getting an elements title too (Aka crawl the DOM for alt, title,
> aria-label).

Comment 1

[Tom Ritter [:tjr]]

jkt, could you elaborate a little on what you mean by "I think we have a recipe for fathom"?  What is fathom, and where might the code lie?

Comment 2

[Jonathan Kingston [:jkt] he/him]

Ultimately my point was with code like:

<button type="button" tabindex="-1" class="js-menu-target menu-target tooltipped tooltipped-n selected" aria-label="Add header text" aria-expanded="true" aria-haspopup="true">
        <svg aria-hidden="true" class="octicon octicon-text-size" height="16" version="1.1" viewBox="0 0 18 16" width="18"><path fill-rule="evenodd" d="M13.62 9.08L12.1 3.66h-.06l-1.5 5.42h3.08zM5.7 10.13S4.68 6.52 4.53 6.02h-.08l-1.13 4.11H5.7zM17.31 14h-2.25l-.95-3.25h-4.07L9.09 14H6.84l-.69-2.33H2.87L2.17 14H0l3.3-9.59h2.5l2.17 6.34L10.86 2h2.52l3.94 12h-.01z"></path></svg>
        <span class="dropdown-caret"></span>
      </button>

The button would not show to the user because the <svg element would be ignored, this quickly makes a lot of functions on pages useless. Instead we could render the element to have the content: "Add header text"

> Aka crawl the DOM for alt, title, aria-label

We could take a precedence order of attributes from parent nodes (ignoring meaningless elements to a certain ancestor level).

I think this could happen in the XML node that we add to the page to replace the svg so long as the page can't access this change.

---

Fathom is a library for extracting meaning from a page, it's likely never going to be suitable for within the browser however they have a lot of examples that help with getting meaning: https://github.com/mozilla/fathom
I can't actually find their title example that I mentioned here, or their other big list of rules they had. (you can probably ignore this point really)

Comment 3

[Daniel Veditz [:dveditz]]

If you suppress images, or suppress SVG, or suppress fonts even (stupid Yahoo and Twitter UI's use button icons from custom fonts) pages are going to break. How much parsing of other stuff do you want to do to fix it without introducing additional code and "attack surface" that Tor is apparently trying to avoid by disabling SVG in the first place?

Just stick in a "broken image" box for suppressed SVG elements and hope for the best. Just like with images sometimes it won't work at all, and most of the time it's better than pretending the element didn't exist at all