How does affordance guide choosing a native button over a styled div?

WHAT THIS TESTS: The interviewer wants to know if you understand that affordance is not just how a component looks, but what it does for the user automatically. They are checking whether you can distinguish between visual mimicry and functional semantics, and whether you know the real maintenance cost of rebuilding native controls. This separates engineers who write markup from engineers who design robust interfaces.

A GOOD ANSWER COVERS: First, define affordance as the relationship between what an element looks like and what actions it supports. Second, state that a native button carries implicit contracts: it is focusable via keyboard, activatable with Enter or Space, announced correctly by screen readers, and included in form submission logic. Third, explain that a styled div is inert by default and must be augmented with tabindex to enter the tab order, role equals button to expose semantics, and JavaScript keydown handlers to respond to Enter and Space. Fourth, mention that native buttons also handle disabled states, focus rings, and mobile touch behavior without extra code. Fifth, note that while a div may be necessary for complex layouts, the default choice should be the semantic element.

COMMON WRONG ANSWERS: Claiming that adding role equals button is enough, which ignores keyboard and focus requirements. Saying the choice is purely about CSS styling or design system consistency. Arguing that divs are lighter or faster without measuring real impact. Forgetting that form buttons have built-in submit behavior that divs cannot replicate. Ignoring the maintenance burden of polyfilling native behavior across browsers and assistive technologies.

LIKELY FOLLOW-UPS: How would you handle a complex card component that needs to be clickable but contains other interactive elements? When is it acceptable to use a div with ARIA instead of a button? How do you prevent double submission or manage loading states differently between native and custom buttons? What happens to focus management when a custom button opens a modal?

ONE CONCRETE EXAMPLE: Imagine a save action in a settings panel. Using a native button gives you keyboard activation, automatic focus on return from a dialog, and screen-reader announcement of the disabled state during submission. If you use a div, you must write keydown logic for Space and Enter, manage tabindex manually, and ensure aria-disabled is announced, all of which create regression risk when requirements change.

Source: developer.mozilla.org