Native button elements vs custom div role='button' in Reagent

Interactive Element Standardization

A ClojureScript project using Reagent needs to establish a standard for interactive UI controls. The goal is to maintain strict accessibility compliance while meeting specific design requirements that often conflict with default browser button styling.

Native <button> elements provide inherent keyboard activation (Enter/Space) and focus management. Conversely, using <div role='button'> allows for more flexible CSS layouts but requires manual implementation of tabIndex and onKeyDown handlers to ensure keyboard users can trigger the action.

There is uncertainty regarding whether the maintenance overhead of emulating native behavior in custom components outweighs the effort of resetting native button styles across different browsers.

Constraints

• Must maintain compatibility with React's synthetic event system via Reagent.
• Must pass accessibility audits (e.g., axe or Lighthouse).
• Must ensure consistent behavior for screen-reader users.

Is it more sustainable to standardize on native button elements and use CSS resets for styling, or is the use of custom role-based elements a viable standard for design-heavy Reagent applications?