LinkControl: Provide better way to see the full URLs

[afercia]

Description

Splitting this out from #60901 and #60908

As mentioned in the linked issue and PR, using the 'Copy link' button tooltip to display the full URL of the link is a no-go for accessibility and, I would say, also for usability.

Important

Please do not ever use values or states for a control's tooltip. A control's tooltip is meant to visually expose the control's name provided by its aria-label. A label must be used to communicate what the control does. It's not the place for values or states.

By using extraneous content for the aria-label and tooltip:

• Screen reader users will hear long, noisy, confusing information.
• Speech recognition software users will have troubles issuing a voice command, the voice command may nnot work at all.

I'd add that also visually, a very long URL displayed within a tooltip isn't a great user experience. A couple example screenshots:

Proposal

Displaying of long URLs is not a new problem in WordPress. It has been discussed across the year and addressed, for example, for the Permalink editing UI in the Classic editor.

As suggested in #60908 (comment) I'd like to propose to use the same displaying mechanism used in the Classic Permalink editing UI.

• Important information should be shown with visible text. A tooltip isn't a great option in the first place.
• The Classic Permalink editing UI uses some smart handling of long URLs to attempt to display only the relevant parts. See the Core implementation.
• The Link Preview popover width is currently limited to 350 pixels. I don't see a good reason to limit the width of this specific popover to such a small width. This popover may potentially contain long content. A wider width could help.

Screenshots to illustrate what Classic Editor does to display long URLs in the link 'preview':

Step-by-step reproduction instructions

• Select some text in a Paragraph and add a link with a very long URL.
• Click the link to make the Link Preview popover appear.
• Observe the visible URL is truncated and the most relevant part (the last part) is not visible.
• Hover or focus the Copy link button (note that Improve the link preview accessibility and labels. #60908 will remove the URL from teh tooltip).
• Observe a very long URL within the tooltip is hard to read.
• Observe the long URL is part of the button aria-label, thus altering the control's name with extraneous, unexpected, content.

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

[amitraj2203]

Hi @afercia I have raised a PR for this. For the Link Preview popover width, I haven't increased its size; instead, I've expanded the number of lines from 1 to 4, which helps with its appearance and style. Please let me know if it needs improvement.

Thank You!

[afercia]

Thank you @amitraj2203 for your PR I will try to have a look at it when I have a chance or ping someone else more familiar than me with this feature.

In the meantime, I'd like to raise one more point, specifically related to the 'Show button text labels' preference. When enabled, the icon buttons show text labels instead of icons.

At first, the text in the UI was overlapping and unreadable, see #59054. Things were improved a bit in #59065 so that the buttons text is fully visible, even though it goes in two or more lines. This is out it looks in English:

However, the UI is still problematic with other languages, where:

• Either the text is not fully visible.
• Or, the space for the link preview is really limited, making the preview somehow less useful.

Example screenshots:

I'd like to propose, at least when 'Show button text labels' is enabled, to make the buttons go in a new line so that there's more space for the visible text. By laying out the content in two lines, also the preview would benefit from more space and show a longer portion of the URL.

I'll work on a quick PR that should touch only the CSS.

[amitraj2203]

Hi @afercia can you please review this PR