click-with-no-keyboard-path

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when a click handler sits on a non-interactive element with no key handler, no tabIndex, no role and nothing interactive inside it.

A click handler on a <div> or a <span> works for a pointer and for nothing else. The element is not in the tab order, so it cannot be focused; not being focusable, Enter and Space never reach it; and with no role a screen reader announces it as text rather than as something to do.

Almost always the answer is <button>: it is focusable, announced, and activated by both keys without a line being written. type="button" and a little CSS make it look like whatever it looked like before.

Where it really has to stay this tag, all three of the missing parts have to be added by hand — role, tabIndex={0}, and a key handler that answers Enter and Space — which is three chances to get wrong what one element gets right.

Two shapes are NOT reported. A wrapper that only widens an existing control's hit area — if there is anything interactive inside it, the keyboard already has somewhere to land. And an element with nothing inside it, which is a backdrop or an overlay rather than a control: there is nothing to announce, and its click is a convenience beside a real exit.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.