Issue 13 - SVG icons adding aria-label to improve lighthouse score #14
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: