Frontend & browser·Accessibility and semantics
you replaced the div with a button and got keyboard support, focus and the right announcement for free.
Semantic HTML
Also callednative elements, semantic markup
Using the element that already means the thing — button, nav, label, table, dialog — rather than a div with handlers attached. Native elements carry behaviour, keyboard handling, focus management and an accessible role that you would otherwise have to reimplement exactly. Almost every accessibility problem found in an audit is a native element that was rebuilt from divs and got most of the way there.