Tab trap on modal

I was trying to fix a bug in the framework I use where when I went to 'share' a comment, a modal would pop up with some options, the problem was that I couldn't tab through the modal.

I managed to fix the problem, I just want some clarity WHY this worked...

basically the I added an 'id=' to the <h2> title at the top of the modal and it seemed to fix it, I somewhat stumbled upon the fix because a compared it to a working modal and it was the only difference, so I was a bit of luck really...

my question is why it worked?

before fix:

<h2 tabindex="-1" data-dialog-title><%= t("share", scope: "decidim.shared.share_modal") %></h2>

after fix:

<h2 id="dialog-title-social-share-modal"tabindex="-1" data-dialog-title><%= t("share", scope: "decidim.shared.share_modal") %></h2>

I believe the reason is because the JS is focusing on the modals title and without an id it couldn't find it, but was hoping for some clarity.