Review decorateIcons accessibility

[kptdobe]

#13 and #14 reveals some accessibility issues with the old implementation of the decorateIcons. While new implementation does not make the use of svg element, it now uses an img element but does not add a alt nor a title to the image which is an accessibility issue.

We need to review and fix the decorateIcons accessibility issues including:

• simple icon
• linked icon - see decorateIcons() function accessibility improvement when hyperlinked #13

When icons were svgs, the title and description were extracted from the icon svg. Now that icons are images, this is not possible.
Note that adding an alt text is not always necessary (see https://dequeuniversity.com/rules/axe/4.7/image-redundant-alt) and that the problem is not fully trivial: adding alt text based on the image name can be useless (like icon arrow-up does not really help - while I agree it is better than nothing) and since icons are referenced like :arrow-up: in the content, they cannot be annotated.

[ramboz]

I'd say we will be in one of 2 possible cases with icons:

1. they are purely used for decoration purposes and do not convey any relevant information. In that case an alt=" " and/or role="presentation" would be enough
2. the icon is used to convey relevant information or context, and in that case we need to explicitly populate an alt or aria-label

I'd propose updating the decorateIcon (singular) to take a new optional parameter: decorateIcon(span, prefix = '', alt = ' '). By default, all icons would be purely decorative (most cases), but projects could opt-in to individually override icons they know should be descriptive either in their blocks or in the auto-blocking function. This also leaves the details of hyperlinked icons to the project (i.e. either auto-name based on icon name, or use an explicit label approach)