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

LinkControl: Provide better way to see the full URLs #61158

Open
afercia opened this issue Apr 26, 2024 · 0 comments
Open

LinkControl: Provide better way to see the full URLs #61158

afercia opened this issue Apr 26, 2024 · 0 comments
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Apr 26, 2024

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:

Screenshot 2024-04-24 at 14 02 47

Screenshot 2024-04-24 at 14 29 55

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':

Screenshot 2024-04-24 at 14 05 15

Screenshot 2024-04-24 at 14 10 02

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Package] Block editor /packages/block-editor [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant