Closed dave-fink closed 1 year ago
I have signed the Adobe CLA document - I'm not sure why it's not passing.
Thanks a lot @dave-fink, this is great. We just have a timing collision, the decorateIcons
function has been discussed a lot recently because we are observing tons of issues. Consequence is that it is being re-implemented completely. This is still being "finalised" (see #15) and your PR will become soon obsolete.
But I definitively see the need for accessibility improvements and ideally, your PR could be updated to fix the issue in the context of the new implementation.
@kptdobe Thank you Alexander for the update - let me know if I can be of any help once the new implementation is ready. Shall I close this PR?
Thanks a lot @dave-fink for raising this issue.
The new implementation is in and it invalides this PR. But... it might be worth now in terms of accessibility since it creates an image with the icon but does not add any title
nor alt
text. Opened https://github.com/adobe/aem-lib/issues/18 to follow up and closing this PR.
When an author links a :svg-icon: (common use case for the brand logo in the header), the resulting HTML is an A tag without textual content or an aria-label, which incurs a lighthouse accessibility ding.
Modified the decorateIcons() function to add an aria-lable attribute with the icon name to the parent A tag when it exist.
Here's an example page - https://svg-icon-link-issue--franklin-demo--dave-fink.hlx.live/icons-link-issue
13
https://github.com/adobe/aem-lib/issues/13
Motivation and Context
Fixes accessibility issue impacting lighthouse score
How Has This Been Tested?
Add a SVG :icon-name: to a document and then hyperlink it. Preview the page and run a lighthouse scan with accessibility checked. You will see that there is an issue present.
Types of changes
Checklist: