Improve a11y of SVG elements using ARIA

[schalkneethling]

After reading the tip Chris Mills recently learned with regards to setting role=img on an SVG, I did some more reading and found some additional things we can do to improve the a11y of our SVG images.

This means updating the current SVG elements of the icon system to make proper use of:

• role="img"
• ~aria-labeledby="title desc"~
• ~title with an id that matches the value of aria-labeledby~ *<title>
• <description> (as appropriate) with an id that matches the value of aria-labeledby
• role="presentation" on the SVG child element, unless the child is of type text

More can be read here: https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

Bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=1491779

[caugner]

Resolving this PR would mean going through all our SVGs and ...

1. Add role="img" on the <svg> element.
2. Add<title> element inside it with an appropriate title text.
3. Add ` element where it makes sense with an appropriate description text.
4. Add role="presentation" on SVG child elements like <circle>.

But probably we can ignore <svg>s that have aria-hidden="true".

[caugner]

Note that we have meanwhile used role="none" on some purely decorative SVGs.