Broken ARIA reference in SVG icon

[giulioturetta]

BUG/PROBLEM REPORT (OR OTHER COMMON ISSUE)

What I did:

Triggered a status info message just by e.g. logging in, and checking the SVG tag of the icon next to the message text.

The issue came up while testing accessibility with the WAVE Web Accessibility Evaluation Tool browser extension https://wave.webaim.org/extension/.

What I expect to happen:

The aria-labelledby attribute in the SVG element should reference a title tag with an id="title" attribute (or, even better, a more specific id attribute value) inside the SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="plone-icon statusmessage-icon mb-1 me-2 bi bi-info-circle-fill" viewBox="0 0 16 16" aria-labelledby="title" style="">
  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
  <title id="title">statusmessage_mtype_info</title>
</svg>

Furthermore, a role="img" attribute could be added to the SVG tag, q.v. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg.

What actually happened:

An aria-labelledby reference exists, but the target for the reference does not exist.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="plone-icon statusmessage-icon mb-1 me-2 bi bi-info-circle-fill" viewBox="0 0 16 16" aria-labelledby="title" style="">
  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
  <title>statusmessage_mtype_info</title>
</svg>

What version of Plone/ Addons I am using:

Plone 6.0.0a2 (6002)

[agitator]

We should extend the icon resolver here...
Either we have an optional role attribute to set or we set the role to "presentation" if not alt attribute is set.

@thomasmassmann would you add the additional discussed cases that should be handled?
and do we have a developer doc where we explain how this should be used?

[thomasmassmann]

I created a codepen with different variations for presentational svg images and decorative images: https://codepen.io/thomasmassmann/pen/KKXbVVy

All tests have been done with VoiceOver on Firefox.

So far I would opt for:

• role="img", title (alt_tag) and description (if available) for svg images with meaning in context
• role="presentation", no title (alt_tag), no description, aria-hidden="true" for svg images without meaning (decorative)

[thomasmassmann]

On note regarding aria-labelledby and aria-describedby: they need to reference ids, and those need to be unique. So if that is used, we need to ensure that the id used for the title tag and referenced in aria-labelledby is unique for every icon on the page, even if the page shows the same icon multiple times! Same goes for the desc tag, if used.

But in my tests those are not required. An existing title and desc tag are all we need.

One more thing: according to the spec, title and desc should be the first children withen an svg:

For backward compatibility with SVG 1.1, <title> elements should be the first child element of their parent.

Currently the title tag is the last element.