A11y | <title> doesn't make an svg screen reader friendly

[Lora Rusinouskaya]

Hi Tane,

I've noticed that the title prop isn't behaving as expected for SVG accessibility. According to the Accessibility API Mappings spec, the <title> element in SVG should be exposed to assistive technology through the accessibility tree. However, currently, on Mac VoiceOver, it's being read simply as image. Additionally, there's no tooltip displayed when I hover over an icon, which should show the text from the <title> element. I've tested this with other components that use svgs (not ReactSVG) and the title is being read by a screen reader and a tooltip is also being displayed.

In Chrome, the correct naming behavior occurs when a developer provides content in an aria-label, provided that aria-hidden is set to false. I'm using this approach for standalone icons with no text next to them.

Another potential solution could involve adding an id attribute to the <title> element so that it could be bound to the SVG. However, this feels like a more complex approach since we don't have direct access to modify the <title> element with props.

Is this behavior expected? Am I missing anything?

Thank you,
Lora.