What browser versions does this library support, or does it only work with certain polyfills included?

[just-small-potato]

First, thank you for creating this brilliant library. I discovered this library yesterday and immediately got blocked by #391, which breaks on iOS 13. Version5.1.4-rc.0 did solved the issue well. However I found myself got blocked by another issue which <dialog> isn't supported by iOS Safari < 15.4 (#387). The dialog-polyfill library mentioned in #387 does look super simple to include and use, but this doesn't seems to work well with React when things rerenders.

Here is a code snippet which demonstrates how to use dialog-polyfill:

<script>
    var dialog = document.querySelector('dialog');
    dialogPolyfill.registerDialog(dialog);
    // Now dialog always acts like a native <dialog>.
    dialog.showModal();
</script>

I was quite surprise that this couldn't support a modern browser which is last 2 major versions or last 2 iOS major versions, considering which iOS 15.3 was release quite recently on January 26, 2022. I wonder if we could have some sort of documentation to include in the readme the supported browser version. Or if this library was intended to work with polyfill included, like dialog polyfill or ResizableObserver polyfill, then it would also be good to mention the step as well, as most polyfill wasn't designed for React.

[rpearce]

Hi, and thank you for your detailed question. I'll separate this response into sections.

Documentation

In the README, I state that the compilation target for the package is es2021, but you make a good point, and I can disclose the features that are expected to be supported that people may want to know about before using this in the next release (v5.1.4). For example:

• <dialog> element (global user support is currently 93.63%)
• ResizeObserver (global user support is currently 94.98%)
• document.querySelector(':is(...)') (although this will be removed in the next release)

Edit: added here: 200d644

The <dialog> element

Short answer: I unfortunately don't have a good answer for you at the moment.

When I chose to completely rewrite this between versions 4 and 5, I committed to solving some deep problems, and accessibility was one of them.

If I were to not use the <dialog> element, I would have to implement the following:

1. Keyboard focus trap
2. Focus management when showing and hiding the modal
3. Dynamically hide and unhide every other DOM node from assistive devices (like screen readers), but if it is already hidden from assistive devices, then do nothing
4. ...more

Those 3 points above add so much complexity and extra code that it isn't worth it to me to manually do all that when there is a native, mostly great solution in browsers now. I have implemented a number of fully accessible modals before, and they are never easy to get right.

It has always been just me on this project. Wonderful people have shared ideas, bug reports, and even a little code since I released this in 2016. However, I have other obligations, and so this was one of those things where I had to make a decision. I understand that this may prevent people from using the library or may make them test for that feature's support in their apps, but that's the best I can do.

If you or somebody else has luck with a <dialog> polyflling method with this library, let me know, and I'll see about documenting it.