Improve performance of tabbing

[camchenry]

What:

This PR changes the implementation of getTabDestination to only calculate the visibility of an element "just in time," rather than calculating the visibility of all elements ahead of time.

(As an additional change, this also fixes elements with a tabindex less than -1 from being focusable.)

Why:

Currently, getTabDestination computes the visibility of all elements ahead of time, which can be a costly operation due to calling getComputedStyle repeatedly. Even though getComputedStyle only takes a few milliseconds to complete, this time can add up for tests that have many calls to userEvent.tab() or lots of focusable DOM elements.

Computing the visibility only for adjacent elements in the tab order saves many calls to getComputedStyle which results in dramatically improved performance for calls to tab. Assuming there few hidden elements in the tab order, then this makes the visibility run in constant time rather than linear time in the number of focusable elements.

Here is a rough benchmark with just tabbing between a few elements with 100 focusable buttons in the DOM.

Before:

After:

This results in a roughly ~10x (-90%) improvement in the peformance of userEvent.tab.

Benchmark Code

How:

• Added a new (internal) utility function to check the focusable state of an element, with an option to skip checking visibility
• Changed getTabDestination to use new focusable utility function and check focusability in a loop until we find the next focusable element in the tab order
• Fixes elements with a tabindex of less than -1 by checking for negative tabindex, rather than just -1

Checklist:

• [N/A] Documentation
• Tests
• Ready to be merged
  

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e732ee9:

Sandbox	Source
userEvent-dom	Configuration
userEvent-react	Configuration

[ph-fritsche]

Thanks for contributing to this project. ❤️

Avoiding unnecessary calls to getComputedStyle is a great performance improvement.
It doesn't matter much in the browser where this call is fast, but it is notoriously slow in DOM implementation written in JS (e.g. Jsdom).

I've opened a PR simplifying the implementation: camchenry#1

[camchenry]

Thanks for contributing to this project. ❤️

Avoiding unnecessary calls to getComputedStyle is a great performance improvement. It doesn't matter much in the browser where this call is fast, but it is notoriously slow in DOM implementation written in JS (e.g. Jsdom).

I've opened a PR simplifying the implementation: camchenry#1

Thank you for the suggestions! I have gone ahead and merged those in this branch. I noticed that CI was failing previously due to a typecheck issue, which I'm not sure what that was about.

[codecov]

Codecov Report

Merging #967 (e732ee9) into main (9dd3985) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #967   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           85        85           
  Lines         1820      1825    +5     
  Branches       667       669    +2     
=========================================
+ Hits          1820      1825    +5     

Impacted Files	Coverage Δ
src/utils/focus/getTabDestination.ts	100.00% <100.00%> (ø)

---

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 9dd3985...e732ee9. Read the comment docs.

[camchenry]

👋 @ph-fritsche Is there anything else that I can do to help get this merged? I'm more than happy to help contribute any additional changes or tests as needed.

[ph-fritsche]

Sorry about the delay. Wanted to dispel one minor concern:

Feeding our logic for radio groups with hidden elements does in fact match what is observed in the browser (Chrome):
If a checked radio is hidden, the group is ignored.

user-event/src/utils/focus/getTabDestination.ts

Lines 42 to 44 in e732ee9

	// For radio groups keep only the active radio
	// If there is no active radio, keep only the checked radio
	// If there is no checked radio, treat like everything else

[ph-fritsche]

@all-contributors add @camchenry code

[allcontributors]

@ph-fritsche

I've put up a pull request to add @camchenry! 🎉

[github-actions]

🎉 This PR is included in version 14.2.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀