Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core/social-link component doesn't render accessible markup #18620

Closed
0aveRyan opened this issue Nov 20, 2019 · 1 comment · Fixed by #18651
Closed

core/social-link component doesn't render accessible markup #18620

0aveRyan opened this issue Nov 20, 2019 · 1 comment · Fixed by #18651
Assignees
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

Comments

@0aveRyan
Copy link
Contributor

0aveRyan commented Nov 20, 2019

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:

  1. Go to Block Editor
  2. Insert the Social Links block
  3. Click Preview to see rendered block markup
  4. Inspect Anchors or run Google Lighthouse, which will flag the issue as 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...

  • "Twitter list for 10 Fast-Food Brands That Have Fire Social Accounts"
  • "Twitter profile for Shake Shack",
  • "Twitter profile for Popeyes"
  • and "Twitter profile for AwesomeFastFoodReviews.com" [the current site].
@0aveRyan 0aveRyan added [a11y] Labelling [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). Needs Accessibility Feedback Need input from accessibility labels Nov 20, 2019
@gziolo gziolo added Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts labels Nov 20, 2019
@0aveRyan
Copy link
Contributor Author

@gziolo I've opened a PR to address this in #18651

@0aveRyan 0aveRyan removed the Needs Dev Ready for, and needs developer efforts label Nov 21, 2019
@gziolo gziolo added the [Status] In Progress Tracking issues with work in progress label Nov 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants