I first learned about this behavior while testing a site with VoiceOver on Safari. The bad example, in this case, isn't really bad, it just demonstrates the feature.
In the better example, I added two examples. In the first one, I've added a role="list" to the element. This, of course, is not the best way because you shouldn't use the same ARIA role for an element that matches the default implicit ARIA semantics. The second example has a CSS fix.
There is still discussion about this issue online. This feature was implemented due to developers misusing HTML. So it's kind of our fault this functionality exists. So please don't misuse elements!