WebKit's Golden Rule for Select Dropdowns

WebKit dropped a note on how to build customizable select dropdowns without breaking accessibility or your users' sanity.

The rule? Don't fight the browser's native behavior. Let the platform handle what it already does well — keyboard navigation, screen readers, form submission — and layer your custom UI on top only where it adds real value.

The post walks through the common trap: building a fully custom dropdown from scratch and then realizing half your users can't tab through it, or your screen reader is reading "div" instead of "option." The fix is simpler than you'd think. Use a native <select> as the foundation, then style the wrapper. Keep the underlying input alive. Let the browser do the heavy lifting.

It's one of those dev blog posts that sounds obvious until you've spent a week debugging why your dropdown crashes Safari's VoiceOver.

Why this matters for us: Every time a dev team rebuilds a native component from scratch, it's another small tool that breaks for the abuela who uses VoiceOver to read her mail, and another dependency we don't need to maintain. The hustle is in the simplicity, not the stack.