Ramonda

half-built-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 an element with an interactive role and a pointer handler is missing the tabIndex or the key handler that would finish it.

A role is an announcement, not an implementation. It tells a screen reader this is a button; it does not make Tab stop here, and it does not make Enter do anything. Both have to be written out, and a control is only usable when all three are:

<div role="button" tabIndex={0} onclick={save} onkeydown={onKey}>Save</div>

The far better answer is to stop building it. A <button type="button" onclick={save}> is reachable, announced and operable by Enter and Space with nothing written on it, and it stays that way when somebody edits the line a year from now:

<button type="button" onclick={save}>Save</button>

If it must be a <div> — a drag target, a cell in a grid — the key handler has to answer both keys a button answers, because the reader was told it is a button and will try either.

Next