Use of div in dl

It is conforming in HTML to use a div element to group dt/dd elements. This can cause issues for screen readers as the pattern changes the way the semantics are represented in some browsers. The following are some test cases and below those are the rough results.

case 1 div

HTML

HTML is the markup language used to give content structure.

CSS

CSS is the language used to add a creative layer on top of HTML.

case 2 no div

HTML

HTML is the markup language used to give content structure.

CSS

CSS is the language used to add a creative layer on top of HTML.

case 3: div+role=presentation

HTML

HTML is the markup language used to give content structure.

CSS

CSS is the language used to add a creative layer on top of HTML.

case 4: div+role=presentation+role=term+role=definition

HTML

HTML is the markup language used to give content structure.

CSS

CSS is the language used to add a creative layer on top of HTML.

In theory yes, In practice does some weird stuff in <dl>
test case: https://t.co/irwHqtqSmx
✅Voiceover - Chrome/Safari
✅JAWS - Chrome/IE
✅NVDA - Chrome
❌NVDA/JAWS - Firefox - misreports list item count

— Steve Faulkner (@stevefaulkner) July 17, 2018

case 4: div+role=presentation+role=term+role=definition fixes it NVDA/JAWS +Firefoxhttps://t.co/sfW1GihIH3

— Steve Faulkner (@stevefaulkner) July 17, 2018

firefox bug filed https://t.co/bCSDVdoOir

— Steve Faulkner (@stevefaulkner) July 17, 2018