Readonly input with on:click event should be warned.

[hyunbinseo]

Description

The read-only input cannot be clicked with keyboard.

<input on:click={() => {}} type="text" readonly />

Proposed solution

It should show a similar error to this.

A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler.

<div on:click={() => {}}></div>

Alternatives

No response

Additional Information, eg. Screenshots

Since there was a similar S/O post that got multiple down votes, some explanation.

I am using the following workflow.

• User performs a custom search and selects a result.
• The text value is shown in a read-only input.
• The input can be clicked to restart the search process.

I've landed on the following solution / workaround.

<input on:click={reset} type="text" readonly />
<button on:click={reset} type="button" class="sr-only">Reset</button>

[jasonlyu123]

I don't think clicking on text input to reset is common. So not sure who will benefit from this.

[hyunbinseo]

Thanks for the repository transfer.

How about click the read-only input to copy the URL?

I can't find an exact example - haven't wrote it down somewhere.

But here is an example that uses a read-only input - mobile HiMart.

[theetrain]

You could place a 'copy' button adjacent to the input, similar to the "URL" label in your example. I believe the common expectation for a readonly input is to be able to select its contents manually, and possibly copy their contents.

With that said I don't think a warning is really needed here. Though if there can be a less-severe "info" notice about "click handlers cannot be triggered by the keyboard on an input" (with or without readonly), I can see that as being helpful.

[dummdidumm]

Closing - as other point out, a warning isn't justified for such an edge case.