tanem / react-svg

:art: A React component that injects SVG into the DOM.
https://npm.im/react-svg
MIT License
829 stars 92 forks source link

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

Open Arol15 opened 5 months ago

Arol15 commented 5 months ago

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>