Closed kristofferdamborg closed 9 months ago
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
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
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?
@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.
@MellKam I see, thanks for clarifying. Any idea of how I might approach my use case then? Any help is greatly appreciated :)
@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
Environment
Link to minimal reproduction
https://stackblitz.com/edit/xq9e26-sn1yc6?file=src%2FApp.vue
Steps to reproduce
modal
prop set tofalse
Describe the bug
When setting , you should be able to focus elements outside the dialog when it is open.
modal
prop tofalse
onExpected behavior
No response
Context & Screenshots (if applicable)
No response