Unable to trap focus within a Nuxt UI Drawer
I have buttons inside a drawer, and when opening the drawer, page focus is not on the drawer, instead I can see focus changing on background elements as I hit tab. Eventually hitting tab enough times brings the focus onto the drawer content.
What needs to be done to get:
1. Focus to be on the first element in the drawer when it opens
2. Focus to remain trapped within the drawer while it's open
3 Replies
Hi @Kal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the available Nuxt UI Drawer documentation, the Drawer component provides a number of props related to focus management, but by default, focus trapping is not enabled. Specifically, the Drawer’s
Use the
Set
- Set
content prop supports a property called trapFocus, which, when set to true, ensures that focus cannot escape the Drawer content via keyboard, pointer, or programmatic focus. By default, this is set to false<br>Drawer Props.
To achieve your requirements:
1. Focus on the first element in the drawer when it opens:Use the
trapFocus property within the content prop to ensure focus is managed within the Drawer. You may also need to ensure your first focusable element is focusable (e.g., a button or input).
2. Trap focus within the drawer while it's open:Set
trapFocus: true in the content prop.
Example:
This configuration will trap focus within the Drawer content while it is open. If you want to programmatically focus the first element when the Drawer opens, you may need to use Vue’s ref and onMounted/onOpenAutoFocus event, but the documentation does not provide explicit details or examples for this, so further customization may be required.
Summary:- Set
trapFocus: true in the Drawer’s content prop to trap focus.
- The documentation does not explicitly describe auto-focusing the first element, but focus trapping will prevent focus from leaving the Drawer while open.
For more details, see the Drawer Props documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@821437800225570892> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I've tried this however it's still not working.
In another experiment, I moved the entire drawer into the root of my layout (layouts/default.vue) and both focus-on-the-first-focusable-element and focus-trap seem to work.
I suspect having a drawing in a nested view is causing problems, perhaps because it occurs deeper in the DOM?
Well, additional info: In the successful test, the drawer and button occurred together. Meanwhile, in my apps drawers, I open/close my drawers programmatically using controls not kept within <UDrawer></UDrawer>. When clicking one of those remote drawer triggers", in that moment, that button receives fvocus, and tabbing continues from there.
This is the case, I wonder if the UDrawer component has any explicit logic to "steal" focus upon opening, or does it just let the browser handle it somehow.
I will keep scrutinizing.
A workaround:
A way to force focus capture when a drawer opens:
Simply adding
<UInput autofocus class="absolute opacity-0 pointer-events-none" /> to the top of my drawer content seems to force a focus capture into the drawer, when the drawer opens.
I'll do this for now, however to me there still seems to be a focus capture issue with regards to Nuxt UI drawers, either in nested views (ie not root layout) and/or being programmatically open via a button not inside <UDrawer></UDrawer>.
This trick still takes a tabbing position, so when the tabbing loops over, the user is focused on an invisible element. Not ideal.