fix(ui-kit): dialog closing and a11y

[harlan-zw]

Seems like the introduction of the focus trap on NDialog stopped the dialog closing when clicking on the backdrop.

Peek.2023-07-27.14-46.webm

(I'm clicking on the backdrop in the video)

To fix it we implement the same logic that the DrawerRight component uses. We also fix some i18n issues and have better styling for dark mode.

[antfu]

/cc @arashsheyda I guess it's related to your PR?

[arashsheyda]

This PR solving another issue I think, but I guess we can fix that issue in here too.

the problem in other PR is described like:

• while a drawer has auto-close and it's open, and there is a Dialog and user clicks on the Dialog, it will close the Dialog and the Drawer becuase it has auto-close.

example video

bandicam.2023-07-27.20-42-25-281.mp4

I though a solution can be by adding a class that Dialog has(e.g. ignore-click-outside) to the ignore list of the Drawer

or what about using the dialog html element and passing that to ignore list ?

[harlan-zw]

Is there a branch I can use to test it like that video?

Could do ignore [role="dialog"], have pushed that up to test. Although maybe this PR isn't the best spot for the fix

[arashsheyda]

Is there a branch I can use to test it like that video?

Could do ignore [role="dialog"], have pushed that up to test. Although maybe this PR isn't the best spot for the fix

There's no branch but I test it locally and it worked perfect, thanks.

[antfu]

You mean a11y right?

[harlan-zw]

You mean a11y right?

Yes.. too much time working with i18n on the sitemap module 🤦‍♂️