search

forumone / nextjs-project

Next.js project template
0 stars 0 forks source link

Add focus-trapping to Overlay menu #106

Open kmonahan opened 3 months ago

kmonahan commented 3 months ago

The overlay menu (also used on mobile in the Responsive Menu), when open, should not allow a user to tab out of the menu to invisible items on the page.

KJ's initial recommendation is to use the inert global attribute, but handling via JS is also an option.

tomealter commented 1 month ago

@kmonahan I have put together a modal prototype using <dialog> and inert. https://codepen.io/team/shuang/live/QWRwerV In the example, I'm applying inert to the site-container when the modal is open. Is this along the lines of what you were thinking? (If so, I'll probably also make this change to my modal component for gesso..)

kmonahan commented 1 month ago

@tomealter Yeah, something like that is exactly what I was thinking.

tomealter commented 1 month ago

PR: https://github.com/forumone/nextjs-project/pull/113