Dialog is not accessible

[stijnverween]

Describe the bug

Using version 6.0.4 of happy-dom, I test my component by utilising the getByRole('dialog') method.

When updating to version 7.0.0 (or above) my tests fail on the dialog element with the error statement:

Unable to find an accessible element with the role "dialog"

If I change <dialog>...</dialog> to <div role="dialog">...</div>, the tests succeed once again.

getByRole('dialog', { hidden: true }) also makes the test succeed, but is not preferred as this means the dialog element is not accessible.

To Reproduce

Steps to reproduce the behavior:

1. Go to this sandbox and fork
2. Run yarn vitest
3. See that the test succeeds
4. Go to package.json and update happy-dom to 7.0.0 (or above)
5. Run yarn install
6. Run yarn vitest
7. See that the test now fails

Expected behavior

I would expect that the test keeps succeeding, as the dialog element has been supported (and to my knowledge not updated) since 5.4.0?

[capricorn86]

Thank you for reporting @stijnverween! 🙂

Sorry for taking such a long time before answering.

The reason for why testing-library doesn't return the dialog element is because it is computed as display: none when it's closed. However, it seems like Happy DOM returned display: none when it was open as well.

I have made a fix for the issue in Happy DOM.

You will also have to update your code to <dialog open></dialog> in order for testing-library to consider it as accessible.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v12.1.1