HTML dialog element for Bootstrap modals

[vanillajonathan]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

With the increased adoption of the HTML dialog element maybe it is time for Bootstrap to start using it for its modals?

https://caniuse.com/?search=dialog

Motivation and context

Improve semantics by usage of semantic HTML elements. More developer-friendly HTML with less div tag soup.

[mdo]

All depends on what our level of support for various browsers will be in v6.

[hoeni]

As far as I understand the concept of <dialog>, this should also be used in dropdowns / popovers that used to get added to the body element, thus reducing the pain to use of dropdowns / popovers in modals.

[vanillajonathan]

Support seems to be 91.3% or more, is that enough? Or what is considered enough? Maybe this could be eligible for Bootstrap 5.3?

[hoeni]

Support seems to be 91.3% or more, is that enough?

Oh, I looked at the list of supported browsers only, which were enough for my taste 🙃. But 91.3% is too little, indeed.

Maybe this could be implemented as an optional behavior, just like attaching the elements to the body? This way everything would stay compatible and in some future release, when browser support is high enough, this might become the default behavior, since it is better from a semantic perspective, and solves plenty of problems.

[patrickhlauke]

for what it's worth, now that Safari supports <dialog> as well, switching the modal implementation to use it would also magically resolve various issues relating to accessibility with our legacy modal implementation from basic principles ... most prominent of which is https://github.com/twbs/bootstrap/issues/26770

[patrickhlauke]

going to close this in favour of the existing https://github.com/twbs/bootstrap/issues/33804