Why your div is not a button

Fri, 21 Aug 2026 00:00:00 +0000

A div with a click handler looks like a button and behaves like nothing.

What you lose

Tab order. Enter and Space. The implicit button role. The disabled state. Form submission. Focus visibility. Every one of those is a line of code you now own, and a line you will forget on the next component.

What it costs to get back

<div role="button" tabindex="0"
 onkeydown="if (event.key === 'Enter' || event.key === ' ') this.click()">
 Save
</div>

That is the minimum, and it still does not report a disabled state, still does not submit a form, and still needs event.preventDefault() so Space does not scroll the page.

Accessibility on Retro Dispatch

Why your div is not a button

What you lose #

What it costs to get back #

What you lose

What it costs to get back