Description
openedon 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:
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