Issue 13 - SVG icons adding aria-label to improve lighthouse score#14
Issue 13 - SVG icons adding aria-label to improve lighthouse score#14dave-fink wants to merge 1 commit intoadobe:mainfrom
Conversation
|
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 |
|
@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 |
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
#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: