faizkhairi · GitHub

Remove the onOpenAutoFocus preventDefault handler from menuProps
that was blocking reka-ui's Dialog auto-focus behavior.
When the header modal opens via keyboard, focus should move inside
the modal for proper focus trapping. The previous handler prevented
this, causing Tab navigation to traverse background page content
before the focus trap engaged, violating WCAG 2.4.3 (Focus Order).
Users who need the old behavior can opt in via the menu prop:
<UHeader :menu="{ content: { onOpenAutoFocus: (e) => e.preventDefault() } }" />
Resolves nuxt#6257

@faizkhairi

coderabbitai[bot]

@vercel

Verify the dialog element with role="dialog" is rendered when the
modal menu is open, addressing CodeRabbit review feedback.

@vercel

… proper focus trapping
Apply the same fix from Header to DashboardSidebar and Sidebar components.
Remove unnecessary Header modal test per maintainer feedback.

@faizkhairi faizkhairi changed the title fix(Header): allow auto-focus in modal menu for proper focus trapping fix(Header,DashboardSidebar,Sidebar): allow auto-focus in modal menu for proper focus trapping

Apr 3, 2026

@vercel

@benjamincanac benjamincanac changed the title fix(Header,DashboardSidebar,Sidebar): allow auto-focus in modal menu for proper focus trapping fix(Header/DashboardSidebar/Sidebar): allow auto-focus in modal menu for proper focus trapping

Apr 7, 2026

benjamincanac

@benjamincanac

@benjamincanac benjamincanac changed the title fix(Header/DashboardSidebar/Sidebar): allow auto-focus in modal menu for proper focus trapping fix(Header/DashboardSidebar/Sidebar): allow auto focus in menu for proper focus trapping

Apr 7, 2026

Closed

Read the original on github.com ↗