vue-a11y-dialog not working in MS Edge
b44rd opened this issue · comments
I note the demo referenced in this document -> https://codesandbox.io/s/rj20wr1kpp is not working as expected in MS Edge (see attached screenshot). Noticed the error after failing to implement the component, and tried to see weather the demo in this project worked as expected. It does not, however seem to be a problem with the package a11y-dialog itself, and I currently don´t have the answer why this is failing. Therefor opening an issue instead of a PR here. I´ll be happy to contribute, btw.
I suspect the error is present in all browsers returning false when no support for the dialog element, btw. This can be tested by running typeof HTMLDialogElement === 'function' in the console.
Thanks for reporting this @b44rd! I am afraid, I'm not quite sure what the issue is? I don't see an error in the screenshot either. Can you elaborate?
@morkro I would have expected the behaviour of vue-a11y-dialog to be like this;
If client supports the dialog element, use the dialog element
If the client does not support the dialog element, use a div
However, in browsers that does not support the dialog element, a dialog element is still beeing used. In the screenshot, you can see how this looks like. The dialog is not behaving as expected, and the contents of the dialog is visible also when the dialog is not yet activated.
Not too familiar with the dialog element yet though, and therefor not too sure on how to treat a regular div as a dialog, when taking the native dialog functions (i.e. showModal, close) into account.
Understood, thanks for explaining! :) — This has nothing to do with this library, but a11y-dialog. However, there is a solution for that. You can use <vue-a11y-dialog disable-native /> to use <div> in cases where a native element isn't supported.
Aha! That is so awesome.
I also see it is mentioned very well in the documentation. My bad, for sure. Thanks a ton! 👍
Edit: Created a simplified, working example of disable-native, based on your example sandbox fiddle, in case anybody might need it.
- Tested in Chrome (renders dialog)
- Tested in MS Edge (renders fallback div)