Social Icons: Add the ability to show/hide labels

[ndiego]

Description

The Social Links (Icons) block allows you add custom link labels. Unfortunately you are not able to display these text labels, which has been requested in #31605. This PR fixes #31605 by adding the ability to toggle on and off link labels. When enabled, service name is shown if no custom label has been specified.

How has this been tested?

1. Test with any theme running WordPress 5.9 RC3.
2. Add a Social Icons block to a new page and add a few individual icons.
3. In the sidebar, toggle on "Show labels", you should now see the service names.
4. On one icon, add a custom label and see that it updates the label in the Editor.
5. View on the frontend and confirm that the labels display correctly.

Screenshots

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
• I've updated related schemas if appropriate.

[Mamaduka]

Thanks for working on this, Nick.

I just did a quick code review but will do more detailed testing on Monday.

[ndiego]

Thanks for the review @Mamaduka I have made those changes and added comments. 🙌

[carolinan]

Oh I like this.
Question: What value does the title attribute bring?
There has been an effort to remove the title attributes from Core. https://core.trac.wordpress.org/ticket/24766

[jasmussen]

Nice one!

[Mamaduka]

It looks like we'll have to label for links when showLabels is enabled.

Instead of adding another conditional for displaying aria-label, maybe we could use a different method?

I think Technique #1 from this post should fit our requirements - https://www.sarasoueidan.com/blog/accessible-icon-buttons/.

What do you think?

[ndiego]

Question: What value does the title attribute bring?

Good point, I will remove that.

I think Technique #1 from this post should fit our requirements - https://www.sarasoueidan.com/blog/accessible-icon-buttons/.

Hmm this is interesting. So we make the label always present, but hide it visually if showLabels is toggled off. We can then remove the aria-label from the link if I am understanding this correctly.

[Mamaduka]

Correct, we can conditionally add class="screen-reader-text" based on show label value.

cc @aristath

[ndiego]

I have made the requested changes.

I also ran across a possible other a11y improvement, but have not made it yet. I don't think that the svg icons should have role="img". I read that if an svg does, then it should also have an aria-label. Does anyone with better a11y knowledge than me have thoughts on this?

[Mamaduka]

This looks great. Thanks, @ndiego.

Do you mind creating a separate issue for role="img"?

[ndiego]

Do you mind creating a separate issue for role="img"?

☝️ @Mamaduka will do. I will also see if there are any other instance of role="img" in other blocks that might need updating.

This PR good to merge?

[Mamaduka]

My understanding is that we only need role="img" if SVGs aren't decorative and convey information. But I'm not 100% sure in the Social Icons case.

This PR good to merge?

Good to go! 🚢