Gatsby: How to trap focus in modal/dialog window? (Accessibility)

[mmafe]

Summary

I'm attempting to create an accessible modal window on a Gatsby (v2) site. Once the modal window is open, I would like to _trap_ the focus in the modal window so folks aren't tabbing into the darkened (unavailable) background.

Is there a way to trap the focus?

Relevant information

I have attempted the following:

• updating the tabIndex of all elements in the dark background (unsuccessful)
• reviewed the code at https://gatsbygram.gatsbyjs.org (focus seems broken there as well)

[DSchau]

@mmafe have you checked out Reach UI Dialog?

It seems to have accessibility/trapping baked in, but please let me know if I'm off base here!

[mmafe]

Just realized it might be gatsby-plugin-modal-routing, but if that doesn't work, I'll try Reach UI Dialog. (Thanks for the quick response, @DSchau! :))

[DSchau]

Sounds good! Going to close this as answered, but please feel free to reply if we can help further!

Thanks for using Gatsby 💜

[mmafe]

For posterity, if anyone else runs into this question, @DSchau's suggestion to use Reach UI Dialog worked like a dream.

The documentation is fantastic and it took 5 minutes to switch to using <DialogOverlay> with my overlay content inside of <DialogContent>.

(Note: The gatsby-plugin-modal-routing looked promising, however, it's in an alpha state, so I ended up going with Reach UI Dialog instead.)

Thanks again @DSchau. (Sorry for commenting on a closed issue, but I figured it might be worth it if people are wondering how the story ended.)