Document InFocusGuard

[ajakaja]

trafficstars

This line from the readme is not helpful:

As you may know - FocusLock is adding Focus Guards before and after lock to remove some side effects, like page scrolling.

Neither is this one -- I can't really tell what it's trying to say:

InFocusGuards would be active(tabbable) only when tabble, it protecting, is focused.

What is a focus guard? What does it do? When should <InFocusGuard> be used? I'm hoping the documentation can be updated here.

[theKashey]

• InFocusGuard is adding focus guards around given children - https://github.com/theKashey/react-focus-lock/blob/ffe38fbeff97fb03e33220d297cf801c64310b1e/src/FocusGuard.js#L14-L19
• focus-guard is an invisible, but tabbable element, which can receive a focus and activates focus-lock on such event
• nested focus-guard will be not active unless focus is within their boundary.

Why you might need them?

For "shards", when your "lock" consists from mupltiple elements, some of which might be "outside" the lock. To reduce any possible side effect of "tabbing" (like focusing other elements and potential scroll jump) you might consider using InFocusGuards

😎 and that's absolutely not documented :)

[ajakaja]

Cool, thanks! Seem good. Add it to readme and close this?

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.