[Bug]: `modal` prop on DialogRoot is not working

[kristofferdamborg]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/xq9e26-sn1yc6?file=src%2FApp.vue

Steps to reproduce

1. Use a DialogRoot with modal prop set to false
2. When opening the dialog, elements outside the dialog cannot be focussed as expected

Describe the bug

When setting modal prop to false on , you should be able to focus elements outside the dialog when it is open.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[MellKam]

A possible workaround is to call .prevent on DialogContent events. In my case, it works great

<DialogContent
  @interact-outside.prevent 
  @focus-outside.prevent
  @pointer-down-outside.prevent
>

Maybe we should prevent them automatically when the :modal="false", but I am not sure about that

[zernonia]

Hey @kristofferdamborg ! Thanks for the issue. This seems like part of the design from original Radix, which we trap the focus within the dialog. It is a bad accessibility if we allow user to able to focus on element outside of dialog.

What @MellKam suggested above is good, and should achieve what you need right? 😁

Let me know if that solves it. Closing for now

[kristofferdamborg]

Hey @kristofferdamborg ! Thanks for the issue. This seems like part of the design from original Radix, which we trap the focus within the dialog. It is a bad accessibility if we allow user to able to focus on element outside of dialog.

What @MellKam suggested above is good, and should achieve what you need right? 😁

Let me know if that solves it. Closing for now

@zernonia Thank you for getting back on this. I have misunderstood what the prop (modal) actually does, my bad! 😅

@MellKam's solution does unfortunately not work for me, you cannot tab to focus elements outside the dialog, unless I'm doing something wrong? Here's a demo: https://stackblitz.com/edit/xq9e26-zfq6df?file=src%2FApp.vue

My use case is this:

I got a page where you can edit something. Whenever something has been edited, I open a sheet (I'm using shadcn-vue's sheet component), which contains a save and cancel button. I want the user to be able to still focus elements outside of this sheet, as they can continue to edit even when the sheet is open. Will I never be able to achieve acceptable accessibility with this approach?

[MellKam]

@kristofferdamborg Yes, you cannot tab to focus elements outside the dialog, because focus is trapped. This is one of the main features of dialog. If you don't need this feature, then the dialog is probably not the right choice for your case.

[kristofferdamborg]

@MellKam I see, thanks for clarifying. Any idea of how I might approach my use case then? Any help is greatly appreciated :)

[MellKam]

@kristofferdamborg I don't have enough context, but why you can't just toggle if with v-if or v-show? I don't see the need for some modal window or other things. Keep it simple. Maybe if I see what it looks like, I'll say more