LinkControl: Improve the link preview and Copy link aria labels

[afercia]

Description

The LinkControl has a couple ARIA labels that can be improved.

1
The link preview can show a 'rich data' preview of the link destination page or the link text and url. That's important information that needs to be understandable for all users. Visually, it could be improved with some visible title to explain what it is. Assuming a design change is not desired (although I'd recommend it) the semantics needs to be improved.

In fact, the whole 'preview' and the buttons are wrapped in a div element with no ARIA role and an aria label that says 'Currently selected'.
I'm not sure what the reasoning about using such a label was, but it's less than ideal. What 'Currently selected' means in this context?

For screen reader users, this section of information needs to be explained in a meaningful way. 'Currently selected' doesn' tell users anything useful.

Screenshot of Safari and VoiceOver announcing this section of content as 'Currently selected'. Note that the screen reader also announces 'group' because it attempts to assign the most generic ARIA role to a labelled div element with no explicit role set.

2
The copy button label (and tooltip) should not contain the link URL.

• Usign such a label makes this button hardily usable for speech recognition software users.
• It's inconsistend with other Copy buttons.
• The aria-label should never contain values or states. Instead, it is meant to provide an accessible name for the control, to explain what that control does.

Screenshot:

Step-by-step reproduction instructions

• Use a screen reader or explore the link preview by using your browser dev tools inspcctor.
• Observe the link preview is wrapped in a div with an aria-label Currently selected and it is announced as such.
• Hover or focus the Copy button.
• Observe the tooltip (which is based on the aria-label) contains the URL value.

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]

For a new, more meaningful, aria-label for the link preview it's worth reminding the link preview can show a few things that are conceptually different.

The fetched information of an external site displayed in a 'rich data' preview, including the site icon:

Same for an internal link.

Or, if the link destination page can't be fetched, it will display a generic icon, the link text, and the link url with the protocol part stripped out:

Or, when the link text is the same as the link url, it may show only the link:

Given this UI can show different things, sometimes it may actually not be a 'preview'. A new, more meaningul, labeling should likely avoid the term 'preview' and use a more generic terminology to commuincate users this is generic information about the destination page.

[afercia]

Note: translatable should avoid concatenation. In the case illustrated below, the colon : is not translatable.
The WordPress l10n guidelines recomment to always use fully translatable strings, including punctuation.

gutenberg/packages/block-editor/src/components/link-control/link-preview.js

Lines 146 to 150 in e33cb88

	label={ sprintf(
	// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
	__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
	isEmptyURL || showIconLabels ? '' : ': ' + value.url
	) }

[afercia]

Additionally: when the preference 'Show button text labels' is enabled, all three buttons still show the tooltips, they just repeat the visible text. That's redundant and should be avoided as it's done for other buttons in the UI.

Screenshot: