Make visibleBySize optional

[nick-keller]

Hello, great work on this package!

My issue

The browser (at least Chrome, haven't tested other browsers) does not skip 0 pixels high tabbable elements. But emulate-tab has a check isVisibleBySize which checks the height of candidates elements. This results in skipping elements, not mimicking the browser's behavior.

Why do I care about 0 height elements?

I use them to "catch" focus at given places on my page, having two of them (one before, one after my component) allows me to know if the focus comes from the top or the bottom.

Proposed solution

Make it an option checkVisibilityBySize: boolean = true. (default value would be true for backward compatibility) Ideally we could pass the option when calling emulateTab, but a global option would work as well I guess.

[e-hein]

Hi @nick-keller,

the browser skips elements that are not visible (e.g. a parent element has display: none). Checking the height had been an efficient way to cover all known test cases.

Can you show more from your real world example where the browser doesn't skip the element?

I have to think about how to pass options like that - I think they should be passed per project once and not per call. Unfortunately I do not have much time right now but I'm open for suggestions.

[nick-keller]

I have my component, and I place an empty <div tabIndex={0} /> before and after my component to catch tabs from the top or from the bottom. Why would I do that? I have a virtualized list, when tabbing from the top I need to scroll to the first element and focus it, same for the bottom, but because the list is virtualized those elements might not be in the DOM, hence those 2 divs that are always there. This is why those divs are 0 pixels high, maybe a quick-fix would be doing the check on the width?