Description
In #14320 @s596757 attempted to add alt
tags on SVG icons. However, this is not allowed by specification and a number of solutions exists, including using <title>
elements inside <svg>
and a legacy workaround of using aria-label
/ aria-labelledby
.
If we were to use aria-labelledby
we would need to manually modify each SVG we insert to ensure unique identifiers, either:
- adding a unique suffix to SVGs on each injection (which however would need to benchmarked as this could lead to performance deterioration as more intelligent browsers would not be able to deduplicate DOM nodes as those would not longer be identical), or
- the SVG injector could instead only insert the
alt
/desc
tag once in a dedicated place in DOM (only inser it if an element with such an ID exists) and remove the element from SVG strings otherwise.
However, a better solution would be use of <title>
which could be combined with the <use>
tag which we previously also discussed in the performance meetings as a having a potential to improve performance of JupyterLab. An example for this patern is described in: https://css-tricks.com/accessible-svgs/#aa-icons
All solutions are problematic with respect to translations. We would need to write an extractor for strings and substitute them during injection.