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

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 element in SVG should be exposed to assistive technology through the accessibility tree. However, currently, on Mac VoiceOver, it's being read simply as <code>image</code>. 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. </p> <p>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.</p> <p>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.</p> <p>Is this behavior expected? Am I missing anything? </p> <p>Thank you, Lora. </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

tanem / react-svg

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