[Modal] Better focus management

Current(master) focus-management is broken for shift+tab, while forward tapping is also working not as expected, as long as you may leave a modal, and got into browser address line, which is good, but should be impossible.

A new TrapFocus implementation also does not seems to be correct, especially due to the absence of RootRef, used to discover nested portals (like here - https://nk7zmp3900.codesandbox.io/)

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

• loop then tabbing forward
• loop then tabbing backwards

Current Behavior 😯

• loop then tabbing forward, with focus on body and modal after leaving browser address bar - causing 1 or 2 tabs without visible response.
• does not loop backwards. A new TrapFocus would probably fix it, but might introduce other issues.

Steps to Reproduce 🕹

See an example with 3 buttons inside a modal - https://codesandbox.io/s/j1ll74o3v9

Context 🔦

Sorry, I have a professional deformation 😃 I’ve invested too much time in focus management, and all focus-related problems are visible to me.

Proposed solution

Replace TrapFocus by react-focus-lock, which would handle all edge cases including Portals. There is only one downside of it - +4kb.

[eps1lon]

AFAIK - waiting for React Flare.

Same

[theKashey]

AFAIK - waiting for React Flare.