Link Control: allow double clicking to edit text of link

[bacoords]

Description

When you have a link inside text (paragraph, list item, etc) placing the cursor inside the link shifts focus to the popup, so your cursor leaves the paragraph text. This is new behavior in version 17.8.0

Proposed behavior : The way it has worked in the past: you click inside of a link and your cursor stays, allowing you to type inside the link without having to press esc

Step-by-step reproduction instructions

1. Activate Gutenberg 17.8.0
2. Hyperlink some text inside of a paragraph block.
3. Place your cursor somewhere else, then try to place it back inside the link.
4. Note that your cursor is gone and the link is focused

Screenshots, screen recording, code snippet

Ignore the weirdness of where the popovers sit on the screen, that's a separate Playground issue that's been reported

Screen.Recording.2024-03-02.at.11.26.09.AM.mov

Environment info

• Default theme,(tested in other themes as well)
• Only occurs when 17.8.0 is active

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

[annezazu]

I can replicate this with 6.5 Beta 3:

Screen.Recording.2024-03-03.at.10.05.19.PM.mov

Adding to the 6.5 board as a result. cc @richtabor if you can help track this down!

[annezazu]

Dug into this and compared it to what was intended in the new Link Control UX for invoking the rich text link UI: #57986 Here's a playground link that opens up that specific PR. Note there's some weirdness on that branch that's specific to playground. In that experience, the result is the same as above. Essentially, you can use your keyboard to arrow into the link without invoking the rich text and, when you click on a linked item, the rich text UI opens. Here's a demo:

Screen.Recording.2024-03-04.at.5.29.19.PM.mov

All of this is to say that this is intended behavior with this change in mind! Here's the broader context an initial issue: #57821 This was done with accessibility in mind. What seems to be missing though is the ability to click again to then edit the text like so (using slack since that was part of the inspiration):

Screen.Recording.2024-03-04.at.5.35.04.PM.mov

Without that additional ability to click again to then edit the text, it is pretty annoying. Is this something we can fix? @jeryj @alexstine @joedolson for broader awareness and discussion.

[annezazu]

Tried to update the title to better reflect what's going on. Since we're coming up on 6.5 RC1 tomorrow, I don't know how much this is a true "bug". I'm very much at the end of my day but wanted to note that since this is in the 6.5 board.

[getdave]

You are correct. This behaviour was added because if a popover appears then it should be focused because otherwise it's not clear to non-sighted users (or users of assistive tech) that it exists.

That said, this flow feels like it could be improved in a future release. As @annezazu suggested a Slack like interaction could work:

That said, I'm not sure this constitutes a bug but rather a chance for future improvement. As we're now past the Beta stage for WP 6.5 we need to be pretty selective if we include bug fixes in the RC stage.

Perhaps someone would like to raise a PR to resolve this in the Gutenberg Plugin though?

[bacoords]

This was done with accessibility in mind. What seems to be missing though is the ability to click again to then edit the text like so (using slack since that was part of the inspiration):

Thanks for sharing. I'd never seen this interaction before but I think the Slack example is a great balance between accessibility and conventional practice.

That said, I'm not sure this constitutes a bug but rather a chance for future improvement. As we're now past the Beta stage for WP 6.5 we need to be pretty selective if we include bug fixes in the RC stage.

I just want to be clear that in the upcoming version of WordPress, you will be unable to place your cursor inside of linked text using only your mouse. The only workflow options would be:

1. Using your keyboard to press the escape key to exit the modal
2. Selecting text outside of the link and then using the arrow keys to manually move the cursor into the linked text
3. Pressing the edit icon in the popover and modifying the text of the link inside a modal window

I just want to clarify that those are the intended interactions for users for the next WordPress release when we say this is not a bug.

[getdave]

I just want to clarify that those are the intended interactions for users for the next WordPress release when we say this is not a bug.

Apologies I could have been clearer. What I'm saying is that the WordPress release process is clear that we need to be extremely selective about any bugfixes that land during the RC phase. We'd need buy-in from the entire release team in order to land any fix for this issue.

As far as I'm aware there is currently no PR to address this. Anyone is welcome to pick it up.

I'm now asking for wider opinions on the severity of this issue bearing in mind that we'd need to be able to justify it to the WP 6.5 release team to allow it to land.

[youknowriad]

cc @ellatrix I would appreciate some eyes on this one.

[getdave]

It may be possible to invert the click handler that opens the popover so that a second click would close it.

gutenberg/packages/format-library/src/link/index.js

Line 62 in 1a5bdfe

setAddingLink( true );

setAddingLink( ( currentValue ) => ! currentValue );

[draganescu]

I just want to be clear that in the upcoming version of WordPress, you will be unable to place your cursor inside of linked text using only your mouse.

I want to acknowledge that this is a bug - it is not an improvement to make things as what they are everywhere else and were before.

However, in my opinion, given that as described there are at least three different ways to circumvent it, and without even an agreement on how to fix in terms of UX (maybe a second click?) it's hard to confidently include it for next release at this stage. If some fix appears it could be considered for any dot releases.

It is regrettable tho that the problem was not surfaced earlier in the cycle. But given how much back and forth the linking experience has had recently it was bound to introduce some weirdness and bugs.

[richtabor]

Double-click makes sense to me. If possible, it's worth getting this into the release. I consider the current state of this particular flow a regression from the previous release.

[annezazu]

Agreed on double click and on trying to get this into the release. It's a pretty confusing/almost poor experience right now. @fabiankaegy for your thoughts as co-triage lead.

[fabiankaegy]

Yeah double click also makes sense to me 👍

Thanks for the ping :)

[youknowriad]

Ok for getting this back into the release. Can we get some testing for #59599

[getdave]

Great thanks folks. Glad to see a consensus on this needing to land in WP 6.5. We do now need to add it back onto the board though so I went ahead and did that.

Lets see if we can tidy up my PR, hopefully with support from folks who were heavily involved in contributing to the revised Link UI 🙏

[getdave]

I have an alternative fix PR in progress over here which might end up being a better route

#59635

[annezazu]

Thanks for the great work here, folks, to iterate quickly!