Based on what I see in the world, I suspect one reason is that a <div> makes it easier to apply some bizarro appearance to the button, so it not only doesn’t act like a button, it doesn’t even look like a button.
This comes from either business or the UX people who want stuff to look pixel perfect to their stupid wireframe.
Why does a website that sells to a pretty much captive audience who cares more about functionality than looks obsess so much about every single button looking pixel perfect to some arbitrary wireframe, I will never know.
Well, have you been on, I don't know, TV Tropes? They have those long lists, that are separated into "folders" on a single page. You can click on those "folders" to expand/collapse them, and it's implemented as a <div> with "onclick" property and <ul> inside it (well, used to IIRC; nowadays this <ul> is a child of a sibling <div>).
what's annoying about that example is that all of those <div>s could be buttons with no other changes. The only content inside the button <div> is the title and folder icon, not the list of examples associated with that title. That's just fine for a button!
The other thing I'd do is add `aria-controls=folder0` to the button that toggles visibility of the list with `id=folder0`
I use them EXTENSIVELY but some don't like them for being annoying to control en-masse with the "toggle all folders" button at the top. But yeah I 100% agree with you. I've snuck them into a webapp where I just needed that much local state rather than have the whole page's state care about the collapse/open state of that one thing.
