Problem/Motivation

When using inline SVGs, the title attribute is automatically added to the SVG. A non-unique ID is automatically assigned to that title element (e.g., <title id="field_svg_icon__title-0">...</title>) and if there are multiple SVGs on the page, accessibility tests throw an error because there shouldn't be elements with duplicate IDs on a page.

Steps to reproduce

There are probably a number of ways to recreate (maybe even just a multi-value field), but in our case we used inline SVG in a paragraph field and the paragraph could be added more than once inside the same page. Once you add multiple to a page, you see the ID duplication.

Proposed resolution

Generate an ID (and aria-labelledby attribute on the SVG itself) that are somehow unique to the SVG field (maybe populate with the same data you automatically populate the title contents from?).

Otherwise, this has been an excellent module for our project. Thank you!

CommentFileSizeAuthor
#11 interdiff-3173878-9-11.txt3.04 KBjeroent
#11 3173878-11.patch3.5 KBjeroent
#9 3173878-9.patch1.16 KBjeroent
#7 title_field_duplicate_id-3173878-1.patch1.06 KBkevinn
#4 screenshot.png299.06 KBevanmwillhite
#3 Screenshot from 2020-10-12 09-06-48.png95.41 KBgnikolovski

Comments

evanmwillhite created an issue. See original summary.

gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented
Assigned: Unassigned » gnikolovski
gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented
Status: Active » Postponed (maintainer needs more info)
StatusFileSize
new Screenshot from 2020-10-12 09-06-48.png95.41 KB

Just tested this with Paragraphs and I can't replicate it.

The ID is unique for each image (field_svgs__title-0 and field_svgs__title-1), check the screentshoot bellow.

SVG

evanmwillhite’s picture

evanmwillhite commented
StatusFileSize
new screenshot.png299.06 KB

Hmm.. maybe something specific to our setup then. In case it helps, I'll provide a little more detail and a screenshot. Our usage is a content type that has a paragraphs field. That field can reference an "Icon Card" paragraph that has a field that uses this module for its display formatter. In our situation, we have added multiple "Icon Card" paragraphs separately (so the SVGs are in separate paragraphs). The settings are set to:

Output SVG inline (checked)
Sanitize inline SVG (checked)
Set image dimensions (checked)

and no tokens or anything used in the Alt/Title fields. See screenshot for error. Hope this helps!

gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented

Yeah, so if the SVGs are in separate paragraphs then that makes sense.

I tested it with just one paragraph and multi value SVG field.

The title ID is generated like this:

$title_id = $this->fieldName . '__title-' . $delta;

Letharion’s picture

Letharion commented

I have the same problem, where icons can be attached to menu items. Because the icon field is then rendered multiple times, but attached to different entities, this also generates identical IDs, once for every menu entry.

To work around the accessibility issues I've hacked in the file id into the generated ID, but I don't know how applicable that is to others, the same file entity could also be rendered more than once on the same page.

What exactly is the purpose of the ids? Can we maybe have the option to just disable their generation, as a less hacky solution?

The purpose of the id appears to be for the aria labelled by. Perhaps we allow the aria information to be inlined as one option instead of putting it in a separate element? Is having a even allowed the way it's rendered now? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title says

The element is always used within a page's block.

which isn't the case here.

Nevermind, found you can have titles in SVGs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

kevinn’s picture

kevinn commented
StatusFileSize
new title_field_duplicate_id-3173878-1.patch1.06 KB

Im getting this issue to, here is a patch with a workaround.

Letharion’s picture

Letharion commented
Status: Postponed (maintainer needs more info) » Active

One way to make the ID more unique would be to include the entity ID as well, such as:

$title_id = $entity_id . '__' . $this->fieldName . '__title-' . $delta;

That'll get us a little further, but would still break in the same way as soon as someone renders the same entity twice.

It would also break the current IDs so it should probably then only be in a version 2.x of the module.

Another solution that wouldn't break backwards compatibility would be to add an alter here, so everyone with unusual needs could easily use whatever strategy they want.

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Active » Needs review
StatusFileSize
new 3173878-9.patch1.16 KB

Drupal has a method in core that generates unique HTML IDs.Html::getUniqueId().

Status: Needs review » Needs work

The last submitted patch, 9: 3173878-9.patch, failed testing. View results

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Needs work » Needs review
StatusFileSize
new 3173878-11.patch3.5 KB
new interdiff-3173878-9-11.txt3.04 KB
gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented
Version: 8.x-1.14 » 2.0.x-dev
gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented
Status: Needs review » Fixed

Since this breaks existing IDs this goes to version 2.x only.

Thanks!

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented

It seems this patch wasn’t committed yet?

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Fixed » Needs review

  • gnikolovski committed 9796359 on 2.0.x authored by JeroenT 
    Issue #3173878 by JeroenT, kevinn, gnikolovski, evanmwillhite, Letharion...
gnikolovski’s picture

gnikolovski
Primary language Serbian
Location Subotica, Serbia
commented
Status: Needs review » Fixed

Sorry about that.

I pushed it to Github but not to Drupal.org

I tagged a new release, please use beta 2.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.