Focus trap for QDialog

[NikolaNbgd]

Hi, I am working on an accessibility issue related to QDailog and realized that there is no custom prop from the plugin itself to trap focus.

It would be nice if Quasar provided a prop for the dialog, for example, trap-focus which we can use to do so. The focus should stay only within the dialog, not even the address bar should be focusable if QDialog has this prop.

Another idea might be to just trap the focus as I described above as a default behavior for the dialog.

Do you have any plans to do something like this?

Thanks in advance!

[Brice155]

Hi @NikolaNbgd
I have the same use case and i tried to use "focus-trap" library (https://www.npmjs.com/package/focus-trap) but for the moment it does not work when the qDialog hides... but it's ok when the dialog is shown. If i found a solution, i will post it here.

[rstoenescu]

Hi,

The focus is already trapped inside of the Dialog, but we cannot override the browser behavior of being able to focus on the address bar too. Moreover, if the Developer Tools is also opened, we also cannot avoid focusing on it too.

The current default behavior IS to trap the focus within the Dialog's elements given the above exceptions (addressbar or Dev tools).
There are also the following props, should you want to configure how the focus works (disabling more of the default features):

• allow-focus-outside --> disables the default focus trap
• no-focus --> when Dialog gets shown, do not switch focus on it
• no-refocus --> when Dialog gets hidden, do not refocus on the DOM element that previously had focus

[Anubarak]

Sorry to reply to this old thread because I was looking for the same answer

but we cannot override the browser behavior of being able to focus on the address bar too

That is acutally not true. There is a way to prevent focus on the URL bar. You can avoid that, by setting the focus on a new valid target, when the focus is lost of the current target.
This is done by Focus-Trap https://github.com/focus-trap/focus-trap

There is a working example here https://focus-trap.github.io/focus-trap/

[NikolaNbgd]

Thank you both.

I found the solution by using this library: https://pdanpdan.github.io/vue-keyboard-trap/.

It provides a global directive that traps focus only within the dialog itself.