Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
nicolasgasco opened this issue Nov 11, 2022 · 1 comment · Fixed by #244
Closed

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

nicolasgasco opened this issue Nov 11, 2022 · 1 comment · Fixed by #244
Labels
bug

Comments

@nicolasgasco
Copy link

nicolasgasco commented Nov 11, 2022 •
edited
Loading

🐞 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

Screenshot 2022-11-11 at 08 49 57

Additional context

Bug observed in an Ember app.
@nicolasgasco nicolasgasco changed the title Screen readers confused by title when several svg-jars are used in the same template Screen reader reading the wrong title when several svg-jars are used in the same page Nov 11, 2022
@nicolasgasco nicolasgasco changed the title Screen reader reading the wrong title when several svg-jars are used in the same page Screen reader reading the wrong title when several svg-jars with same title id are used in the same page Nov 11, 2022
@nicolasgasco nicolasgasco changed the title Screen reader reading the wrong title when several svg-jars with same title id are used in the same page Screen reader reading the wrong title when several svg-jars are used in the same page Nov 11, 2022
mrloop added a commit to mrloop/ember-svg-jar that referenced this issue Nov 28, 2022
@mrloop
Use uniqueId for recurring title and desc
9e68481 
The current implementation uses `guidFor` this will cache ids and reuse
them if the same value is passed to `guidFor`, see
https://github.com/emberjs/ember.js/blob/4e3300bdfe75da14f9714b6b1539dbd1612c5af2/packages/%40ember/-internals/utils/lib/guid.ts#L97

The ids in a HTML document should be unique. However if a `title` or
`desc` is reused, for example you have a recurring element, then
`svg-jar` generates ids which match for the recurring element.

This commit uses the `uniqueId` function from the `unique-id` helper
to generate a unique id regardless of the `svg-jar` `title` or `desc`
matching previous `svg-jar`.

Unfortunately `uniqueId` is not exported so it is copy and pasted.
In the future it will be possible to import it, see
emberjs/ember.js#20165

Fixes evoactivity#243
@mrloop mrloop mentioned this issue Nov 28, 2022
Merged
@mrloop
Copy link
Contributor

mrloop commented Nov 28, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Use uniqueId for recurring title and desc mrloop/ember-svg-jar
2 participants
@mrloop @nicolasgasco