Improve UX for closing the navigation link editor

[jeryj]

When editing a link in the navigation block, clicking the X deletes the link. In the moment I used it, I thought it would cancel the edit action, since that’s what I wanted to do at the time.

On my initial usage when I clicked the Link edit button to check it out, I:

• Clicked “Change”
• Didn’t want to change anything, so I clicked the “X”
• This deleted the link
• I then readded my link

I'm not sure what the best direction would be, but some kind of clarification on how to close the navigation link editor would be ideal.

[apeatling]

+1 I also thought the same thing. I think the X is too easily taken as a close in this situation, and it should be "Clear" or something different.

This only really shows up when you try the flow, it's not as clear just from the screenshot.

[karmatosed]

I think we have a few options here:

• Add 'clear' but that's then adding more text to this smaller space.
• Remove 'x' entirely and allow for normal text removal over a 'clear all'.
• Change out to be <- or something else.

[jeryj]

Removing the 'x' doesn't seem like a bad idea. Since there's not an obvious way to close the link editor, it would at least avoid people accidentally deleting their link. I'm assuming that when people see this view in general, they are more likely to need to close the popup than delete their link.

[apeatling]

I think removing the X entirely is a good next step, since I've also confused the deactivated state as a close button:

I took a look at iOS since it also has this pattern of an X for clearing search fields. In my brief look at different usages they were all accompanied by a "cancel" link, which is effectively a close button for the search state and removes any confusion:

There is an example in Calypso of component with a button within an input field, as an example of how a clear button could be used:

[aduth]

In its current form, I agree that the "X" button doesn't really provide much utility.

That said, one thing I worry about the current implementation of this component is that it's not obvious there are modes to be toggled, where a user can switch between "Editing" and "Viewing" a link. The latter requires that a value is already assigned, either when editing an existing link or immediately after assigning or updating a link.

This text from the original comment resonates with me:

Didn’t want to change anything, so I clicked the “X”

I think regardless of whether we keep the option to clear the current value, it would be good to include either a UI control or other context clues (thinking especially in the case of screen readers and assistive technologies) that there are distinct states to toggle between.

I feel the entire LinkControl component could do for a broader accessibility review on this point of "toggleable forms", but at least to the point of what to do with this "X" button, I can see how it could be repurposed toward something more like the "Cancel" button that @apeatling showed in the iOS screenshot in the previous comment.

Side-note: #19462 explores adding an extra "Submit" button here to be placed next to the existing "Reset" button. It's worth considering what impact a decision of if and how to present "Cancel" would have on the potential addition of an explicit "Submit" button.

[aduth]

Side-note: #19462 explores adding an extra "Submit" button here to be placed next to the existing "Reset" button. It's worth considering what impact a decision of if and how to present "Cancel" would have on the potential addition of an explicit "Submit" button.

Update: This effort was extracted to be addressed separately at #19971.

[aduth]

#20052 replaced the "Reset" button with a "Submit" button. My understanding is that this should resolve the issue as presented here, with regards to confusion around the "X".