Font Awesome <svg> arrow a11y

[inspector508]

arrow should use role "presentation", not "img". Assigning "img" role triggers ALT requirement, but ALT text is unnecessary as the purpose and content of the link are satisfied by the child text node (e.g., "SOFA"). Note: this is probably a better solution than FontAwesome in this use case.

FontAwesome recently updated to to not strip out role="presentation" from the SVG icon that is rendered. FortAwesome/Font-Awesome#14791

Proposed Solution

• Make sure our fontawesome dependency is up to date
• Audit our existing usage to make sure that classes don't break with the update
• Updated our markup to include role="presentation" and test to make sure it is not longer stripped out.

Follow-up

• Create a WYSIWYG Filter plugin that adds role presentation attribute to spans with the fa class.
• Update filtered_html and minimal to allow role attribute on span

[joewhitsitt]

Currently, the role cannot be controlled with the markup we use to implement the icons. This is hardcoded with fontawesome svgs. There is an issue to work on this: FortAwesome/Font-Awesome#14791

Since there is no guarantee that the solution will be implemented/controlled as the example in the issue suggests, I think we should hold off on this issue for now.

[joewhitsitt]

This is showing up in SiteImprove results

[joewhitsitt]

Maybe consider switching from the svg implementation of fontawesome in order to try and control the markup more.

[joewhitsitt]

We can upgrade to 5.8.2 and update our implementations to override the default:

FortAwesome/Font-Awesome#14791 (comment)

[joewhitsitt]

Oops. Looks like we already have this but need to update our markup
#2991

[pyrello]

Suggested method of resolution: Add an icon.html.twig file that takes in the icon class as an argument an replace all the instances of the icon in other templates with that template.

[joewhitsitt]

curious @pyrello what the icon template would look like. trying to understand if the juice is worth the squeeze if the majority of the markup is specifying the classes. I see the benefit of making mass changes, but I doubt this would change much.

<span role="presentation" class="fas fa-user"></span>