Screen reader reading the wrong title when several svg-jars are used in the same page

[nicolasgasco]

🐞 Bug Report

Describe the bug

When using several svg-jars in the same template and when providing a title for a11y reasons, screen readers get confused by which title belongs to which SVG since they all have the same id on the <title/> tag.

<svg role="img" aria-labelledby="title">. 
    <title id="title">Option deactivated</title>
    <path></path>
</svg>

Reproduce the bug

• Put several svg-jars in the same template
• Provide a different title to each of them
• Using a screen reader, they're all announced by the first title in the template.

Expected behavior

• Put several svg-jars in the same template
• Provide a different title to each of them
• Using a screen reader, they're all announced by their own title value.

Possible Solution

Add a random identifier to id of <title/> or maybe give the possibility to provide a custom id

Screenshots

Additional context

Bug observed in an Ember app.

[mrloop]

@nicolasgasco I've pushed up a fix #244 can you check this works as expected