core/social-link component doesn't render accessible markup #18620
Labels
[Block] Social
Affects the Social Block - used to display Social Media accounts
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Good First Issue
An issue that's suitable for someone looking to contribute for the first time
Needs Accessibility Feedback
Need input from accessibility
[Status] In Progress
Tracking issues with work in progress
Describe the bug
The anchor markup rendered by
core/social-link
isn't accessible. Anchors need text to describe the links to a screen reader.Render method
To reproduce
Steps to reproduce the behavior:
Links do not have a discernible name
, multiplied by the number of inserted anchors.Expected behavior
In the current implementation, anchor elements simply wrap SVGs of each social brand. The name of each site is already available and used to add a unique CSS class, so the fix should be to a fairly light lift to add a default, descriptive
aria-label="{BRAND} logo"
to the<a>
.However, we might also consider adding a custom override for the AIRA label in
core/social-link
. If a blog post was created identifying social profiles for 10 Fast-Food Brands That Have Fire Social Accounts, it's possible there could be many instances of the Social Links block. Having a screen reader read "Twitter logo" 10+ times throughout the document isn't nearly as useful as...The text was updated successfully, but these errors were encountered: