Insert link: validation and feedback

[afercia]

Splitting this out from the first accessibility testers group report, but not strictly related to a11y:

When inserting a link, if I don’t type a URL address beginning with http://, Voiceover announces that the data is invalid. The insert link object keeps announcing “Enter a URL” like if any text were already typed. There is not a proper message to explain the user why the data is invalid or a placeholder (or something else) to show the expected input format.

In the current WordPress editor, there's some simple, basic check on the inserted URL format. If the check detects a potential malformed URL, there's a visual feedback. Also when the link is not selected, it is highlighted with some "warning" styling:

There's also an assertive aria-live message as audible feedback, see:
speak( editor.translate( 'Warning: the link has been inserted but may have errors. Please test it.' ), 'assertive' );

Instead, in Gutenberg the link field uses the required attribute and thus relies on client-side validation which is inconsistent across browsers, and doesn't give a proper feedback. This is what happens in Chrome (note: at the time of writing, the insert link doesn't work at all in Firefox):

In this case Chrome doesn't say anything useful. I'd say the visual feedback is not so useful for all users, not just assistive technologies users.

It would be great to implement some validation/feedback mechanism to have feature parity with the current editor.

Also, a a proper placeholder used to give a hint about the expected format could help. Something like: http://example.org. However this depends on future plans for the insert link functionality: will a search be implemented?

[afercia]

I've just tested this and I was able to enter a link like:
<a href="http://asdasdasd">blabla</a>

So apparently there's no validation at all. Also, no visible or audible feedback.

Seems to me this should be addressed before releasing... /Cc @mtias

[afercia]

See also #1867 it would be nice to have it in the release, together with some form of validation.

[aaronjorbin]

This is a regression from the current editor.

[mtias]

Closing as implemented in #11286. Let's open any pending improvements, ideas, and enhancements elsewhere.

[gziolo]

@talldan - did you open a follow-up for the missing red dots around invalid link? It's a minor thing but I remember it was discussed in the PR where this feature was ported from the Classic editor.

[talldan]

Hey @gziolo - I created this issue to cover the changes required in the format api:
#11484

Will open some more issues today to cover other link validation improvements and link to them here.

[melchoyce]

If I were to try to improve this design, where should that go? I see a number of issues/PRs around this topic.

[talldan]

Hi @melchoyce #11796 is the one you're after. Thanks!

[melchoyce]

Thanks Dan!