Social links: Prevent empty links and improve UI description

[afercia]

Description

After users edit and empty a social link 'label', the link on the front end is empty. No text, no aria-label. Just an empty link.

WordPress should always output semantic, SEO friendly, and accessible HTML. No empty links should ever be allowed.

The resulting HTML output may end up being, for example:

<a href="https://github.com/myusername" class="wp-block-social-link-anchor"><svg ...></svg><span class="wp-block-social-link-label"></span></a>

Rendering empty links on the front end doesn't help produce high quality, SEO friendly and accessible content. This must be avoided.

Users already have the option to visually hide the social link text and only show the icon. As such, there is no reason to make this link text empty. It must always be populated with some meaningful text.

This issue is even worse when 'Show labels' in the block setttings panel is disabled as the fact the link is empty is not visible to editors. There's no feedback at all the link is empty.

Technically, this:

gutenberg/packages/block-library/src/social-link/edit.js

Line 116 in c434659

const socialLinkLabel = label ?? socialLinkName;

doesn't work very well after users edit the link text.

• The label prop is initially undefined, so the default link text is the social network name. So far so good.
• After users edit the link text and then empty it, the label prop is set to empty string.
• As such, the empty string is assigned to the link text.

Step-by-step reproduction instructions

• Add a Social Icons block.
• To better understand this bug, enable 'Show labels' in the block settings panel. Screenshot:

• The social icon links will show their default label, which is the social network name.
• Note: the term 'label' is a bit inappropriate here because this is actually the link text.
• Click the plus icon in the block placeholder and add a social link, for example GitHub.
• Click the link placeholder to add an actual link.
• Note: the link input field placeholder is Enter address which is inconsistent with other terminology used across the editor.
• Enter a link e.g. https://github.com/myusername and save.
• In the block settings panel, expand the 'GitHub label' section.
• Observe the Link label input field is empty. Expected: to be populated with the default link text e.g. GitHub.
• Note: the description Briefly describe the link to help screen reader users. isn't appropriate when 'Show labels' is enabled. In this case, this is the visible link text. Not something only for screen readers. Also, we should rarely mention specific assistive technology. This is the actual link text and should be clarified to users.
• Enter something in the input field.
• Observe the social link text in the editor canvas updates on the fly with the value you entered.
• Empty the input field and save.
• Observe the social link text in the editor canvas disappeared. Expected: to be restored to the default social name.
• Go to the front end and inspect the social link.
• Observe the link is an empty link with no text or any aria-label.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Additionally, I noticed the popover 'Apply' button doesn't show a tooltip, not sure why.

[ramonjd]

After users edit and empty a social link 'label', the link on the front end is empty. No text, no aria-label. Just an empty link.

I also noticed that the frontend will still render <span class="wp-block-social-link-label screen-reader-text"></span> after removing the label in the editor.

This PR is a quick win to use the fall back value in these cases so there's at least some text there.

• Social icons: only render label container when there's a label #60060

[afercia]

Additionally, I noticed the popover 'Apply' button doesn't show a tooltip, not sure why.

After some debugging, the tooltip doesn't work because the SocialLinkURLPopover is nested inside a Button, see:

gutenberg/packages/block-library/src/social-link/edit.js

Lines 160 to 182 in f940341

	<Button
	className="wp-block-social-link-anchor"
	ref={ setPopoverAnchor }
	onClick={ () => setPopover( true ) }
	>
	<IconComponent />
	<span
	className={ classNames( 'wp-block-social-link-label', {
	'screen-reader-text': ! showLabels,
	} ) }
	>
	{ socialLinkLabel }
	</span>
	{ isSelected && showURLPopover && (
	<SocialLinkURLPopover
	url={ url }
	setAttributes={ setAttributes }
	setPopover={ setPopover }
	popoverAnchor={ popoverAnchor }
	clientId={ clientId }
	/>
	) }
	</Button>

So that after #57202 the tooltip will not show. Cc @ciampo while I think this instance can be easily fixed, looks like #57202 may introduce other regressions still undiscovered. How we can catch and prevent these cases? Thanks.