Icon A11y improvements

[StephDriver]

Icons are not being handled accessibly.

Icons are non-text content as per WCAG 1.1.1. The key technique is H86 They must also be semantically identified, as per ARIA24 Technique.

Most of our icons come from Font Awesome, but there are a few others, such as the ORCiD logo, that need individual handling.

For Font Awesome:

• [x] consider implementing Font Awesome's auto accessibility feature
• [ ] if not using auto accessibility then update manually (syntax further down that same page). For each icon:
  • consider whether it is decorative or semantic
  • update icon syntax accordingly.
• [ ] update ORCiD logos to be accessible.
• [x] share icons have already been updated in #3936

[StephDriver]

from #4194

• Sample 1, item 9. The icon after author's name is not identified, simply 'link' <a itemprop="email" href="[redacted]" class="fa fa-envelope email-link"></a>
• Sample 2, item 21. The 'eye' icon next to views has no description at all, found by voice over, but has no description to give. <i class="fa fa-eye"></i>
• Sample 2, item 22. likewise, the 'download' icon. <i class="fa fa-download"></i>
• Sample 2, item 59. envelope icon following first author is missing alt text, such that is is read simply as 'link' with no description at all. <a itemprop="email" href="mailto:[redacted]" class="fa fa-envelope email-link"></a>
• Sample 2, item 74. <i class="fa fa-check-circle-o" style="color: green"></i> no alt for the icon, but also not marked as decorative.
• Sample 5.1, item 14. the icons for calendar and book that adorn the article details have no description, but are also not marked as decorative, so they can be navigated to and then give silence.
• Sample 5.2, item 11. article date and volume icons are focusable without having any description
• Sample 5.3, item 20. date and volume icons are focusable but not described.

[StephDriver]

@StephDriver to find a list of all icons we actually use.