feat: focus trap on tab

[benmonro]

This feature allows you to easily test tabbing in focus traps.

example:

userEvent.tab({focusTrap: containerElement})

also adds tab to readme and converts expects to use jest dom for tabs

[codecov]

Codecov Report

Merging #193 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master     #193   +/-   ##
=======================================
  Coverage   97.05%   97.05%           
=======================================
  Files           1        1           
  Lines         136      136           
  Branches       35       35           
=======================================
  Hits          132      132           
  Misses          4        4

Impacted Files	Coverage Δ
src/index.js	97.05% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9ab5b2b...9ea7015. Read the comment docs.

[kentcdodds]

Thanks! Looks good. Just wondering about the use case and implications.

[kentcdodds]

What's the motivation here? Doesn't this create a test user scenario?

[benmonro]

@kentcdodds so let me start with the motivation for a focus trap option. We are using focus-trap-react which keeps tabbing confined within an element. Because jsdom doesn't have any way to deal with tabbing, these types of components won't work in jsdom.

So since jsdom doesn't seem to support tabs yet, focus trap basically won't work with userEvent.tab(). So does this introduce a test user? Maybe. But my hope is that jsDom can add support for tab and this entire feature can basically just adopt that. In the meantime this seems like the least bad option. That said if you have another way of writing a test that can let the user tab through a focus trap, I'd love to get some better ideas.

Here's the code for focus-trap which ftR uses under the hood.
https://github.com/davidtheclark/focus-trap/blob/master/index.js

[kentcdodds]

That makes sense. I would add a note about the original intent for the option and why it should be used sparingly.

Then you've got a 👍 from me :) Thanks!

[benmonro]

Will do! Thx Kent!

[kentcdodds]

LGTM. As @Gpx is the primary maintainer on this repo, I'll wait for him to merge, but I'm good with these changes.

Thank you @benmonro. Pleasure as always :)

[benmonro]

@Gpx any chance you can merge this? we could really use it. :)

[kentcdodds]

Looks like @Gpx is currently unavailable, so I'll go ahead and merge this. Thanks!

[afontcu]

Vue tests are missing 🙈 no problem though, I guess I can work on them even after merging! 😄

[kentcdodds]

I'm kinda thinking we should just ditch the framework specific stuff and use raw DOM stuff like in DOM Testing Library.

[Gpx]

🎉 This PR is included in version 7.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[calebeby]

I'm kinda thinking we should just ditch the framework specific stuff and use raw DOM stuff like in DOM Testing Library.

Fully agree 👍

[afontcu]

I'm kinda thinking we should just ditch the framework specific stuff and use raw DOM stuff like in DOM Testing Library.

Yeah, makes sense.