Need a way to add a title child element and ARIA attributes for sake of accessibility

There seems to be no way to add title or desc child elements, or their related ARIA attributes. Both are necessities for basic accessibility (a11y) affordances[1].

Two goals here:

1. Be understood by accessible browsing technology like screen readers

2. Ability to have a description of the item appear when a user hovers their mouse over the SVG icon.

Both goals can be accomplished by accommodating ARIA attributes and the title and/or desc child elements.

Remember: title and alt attributes added to the svg element are not valid, not supported by browsers, aren’t read by screen readers, and don’t display the tooltip on hover, and thus are insufficient for a11y concerns. To work reliably, it has to be the child element of svg, not an attribute.

With this change, I’d expect to have a title parameter on the Icon component, thusly:

<Icon 
  path={mdiShieldCheck}
  className="my-verified-badge" 
  title="Verified"
  titleId="myUniqueTitleID"
 />

Which you’d expect to yield something akin to this:

<svg aria-labelledby="myUniqueTitleID">
  <title id="..."></title>
  <path> ... </path>
</svg>

Specifically, using the mdi icon from my example:

<svg viewBox="0 0 24 24" class="my-verified-badge" aria-labelledby="myUniqueTitleID"><title id="myUniqueTitleID">Verified</title><path d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z"></path></svg>

Here’s an example using the desc attribute as well, which adds a description that will be read aloud by screen reader technology to give much-needed context to the SVG (here, an mdi icon):

<Icon 
  path={mdiShieldCheck}
  className="my-verified-badge" 
  title="Verified"
  titleId="myUniqueTitleID"
  description="This member is a verified member of the community."
  descId="myUniqueDescID"
 />

<svg aria-labelledby="myUniqueTitleID myUniqueDescID">
  <title id="..."></title>
  <desc id="..."></desc>
  <path> ... </path>
</svg>

Specifically, using the mdi icon from my example (line breaks added to aid in readability here):

<svg viewBox="0 0 24 24" class="my-verified-badge" aria-labelledby="myUniqueTitleID myUniqueDescID">
<title id="myUniqueTitleID">Verified</title>
<desc id="myUniqueDescID">This member is a verified member of the community.</desc>
<path d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z"></path>
</svg>

All that said… has anyone else run into this issue when trying to make the icons accessible?

[1] https://css-tricks.com/accessible-svgs/

[Templarian]

Published!

[Templarian]

Docs and a few more unit tests are in.

@boaticus Anything missing before we release it? Docs etc?