[Modal] Improve the focus logic

[oliviertassinari]

This pull request introduces a new TrapFocus component. There are different alternatives in the OSS word, this version optimizes the bundle size, it weighs less than 1 KB.
We are using two sentinel DOM nodes instead of computing all the tabbable elements. Computing the tabbable elements is not straightforward. The drawback of using sentinels is that we have to create two extra DOM nodes and we can't implement the features suggested in #14545 (comment). The advantage is that it's more idiomatic to the web API, hence a smaller bundle size & CPU footprint.

We should be able to make the TrapFocus component public. Let's deploy this change in the wild and see how it performs before. We might be doing it all wrong, we need to battle test it.

A React RFC to follow: reactjs/rfcs#109.

Closes #13702
Closes #13693

[maniekins]

There is some option to avoid tabbing that sentinelEnd and sentinelStart elements ?

I noticed that if you have focus on the last element you need to press two times TAB key to go to the first element on the dialog and vice versa. In this case, screen reader vocalized nothing and user can be feel lost.

[maniekins]

Btw, what do you think on option to disable looping.

[oliviertassinari]

I have tried to reproduce Bootstrap Modal's behavior: https://getbootstrap.com/docs/4.3/components/modal/. In order to implement what you are suggesting, we need a way to list all the dom elements in the modal that can receive the focus. It's not obvious, you would have to rely on something like this: tabbable: +1kB gzipped.

(cc @ryancogswell, just for context)

[theKashey]

I've never tried, but it might work:

• on sentinel focus
• list all nodes between Start and End
• try .focus each one
• if .activeElement changed - then node is focusable,
• break the loop.

Probably would not play well with radio buttons.

[oliviertassinari]

Interesting :)