-2

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.

Improve this question
5
  • Guess: Was the effect of tabindex="-1" perhaps disabled, because you wrote your new id attribute without a space after it? Commented Dec 16, 2025 at 9:21
  • I spotted that after posting this so I couldn't tell you, this was the reason it wasn' focusing on it: "// NOTE: due to some SR (screen reader) bugs we have to set the focus on the title" Further down the file it specifically outlined that the title must follow that title layout. Very interesting, might cause problems in the future, if someone creates a modal and doesn't give that title. Commented Dec 16, 2025 at 11:29
  • You may prefer to use real HTML-JS modal dialog -> developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/… Commented Dec 16, 2025 at 12:07
  • Welcome to SO. You might find reading the site help section useful when it comes to asking a good question. To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a minimal reproducible example. Here's a question checklist you might find useful... Commented Dec 16, 2025 at 12:10
  • No, you didn't add an id, you added an HTML error that invalidated the tabindex, which shouldn't exist for an h2 tag anyway. Commented Dec 16, 2025 at 16:42
Related questions
736
Bootstrap modal appearing under background
1051
Tab character instead of multiple non-breaking spaces ("nbsp")?
554
Close Bootstrap Modal
Load 4 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.