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.

Sign-in forms that behave when the network does not

Sat, 18 Jul 2026 00:00:00 +0000

The happy path of a sign-in form is four elements. Everything else is the interesting part.

The states worth building

Pending — the button is busy, not disabled-and-silent.
Rejected — the message is next to the field, not in a toast that vanished.
Rate-limited — say how long, not “try again later”.
Offline — the form should still hold what was typed.

The password toggle

Make it a real button with aria-pressed, keep the field type in sync, and never place it where it covers the text it reveals.

accessibility on Retro Dispatch

Why your div is not a button

What you lose #

What it costs to get back #

Sign-in forms that behave when the network does not

The states worth building #

The password toggle #

What you lose

What it costs to get back

The states worth building

The password toggle