feat(Popup): add focus trap

[kuzhelov]

This PR introduces focus trap functionality to Popup - this will allow to focus popup's content right after popup is opened.

TODO

• introduce focus trap examples
• update CHANGELOG

API

// focusable popup content will be trapped by default
<Popup trigger={<Button .. />} content={<Input />} />

// focusTrap={false} will disable default focus trap
<Popup focusTrap={false} trigger={<Button .. />} content={<Input />} />

// it is possible to customize focus trap behavior
<Popup focusTrap={{ isClickableOutsideFocusTrap: false, elementToFocusOnDismiss: null }} 
  trigger={<Button .. />} 
  content={<Input />} 
/>

FAQ

Why Portal component is not reused here? It seems that it already supports Focus Trap functionality.

Should be clear about that - the final goal of all the refactoring process around Popup component is to end up at the point where there won't be any code duplication - and this implies that finally Popup will reuse Portal's functionality. At the same it is intentionally step-by-step process taken into consideration, for the sake of ensuring that only the necessary parts are introduced to both components, as well as there is clear separation of concerns between them.

Where we are at the moment with Popup?

This PR will solidify final bits of the functionality expected from the Popup on the client side - after that the next plans are to do inner refactoring by reusing Portal component as part of Popup's implementation - with the interface and behavior exposed to the client for Popup won't be affected anyhow.

[codecov]

Codecov Report

Merging #457 into master will decrease coverage by 0.72%.
The diff coverage is 26.31%.

@@            Coverage Diff             @@
##           master     #457      +/-   ##
==========================================
- Coverage    89.2%   88.47%   -0.73%     
==========================================
  Files          41       41              
  Lines        1417     1432      +15     
  Branches      177      181       +4     
==========================================
+ Hits         1264     1267       +3     
- Misses        149      161      +12     
  Partials        4        4

Impacted Files	Coverage Δ
src/index.ts	100% <100%> (ø)	⬆️
src/components/Popup/Popup.tsx	30.69% <17.64%> (-3.4%)	⬇️

---

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 7effe12...544a2b2. Read the comment docs.

[jurokapsiar]

can you add unit test that cover the changes? Especially if we want to do internal refactoring.

[kuzhelov]

@jurokapsiar

yes, but could we, please, start with reviewing the functionality itself - whether it satisfies the criterias. When we agree on that, I will add the tests. Also, given that this is a highly anticipated feature, I would rather split the PRs to not introduce the unnecessary delay (note that there were no tests for that before).

[sophieH29]

we kind of duplicating logic which is done in the Portal, for the exposing focusTrap prop.
So the original idea is

• Popup is not focus trapped by default
• FocusTrapZone props are coming from a behavior same way as for FocusZone.
  Of course it's part of this PR, but what we need is to read FocusTrapZone props from accessibility.focusTrapZone = {}

After your PR merged, I will create PR that ads FocusTrapZone props to PopupBehavior.

[kuzhelov]

have discussion with @sophieH29, agreed on the following plan:

• prepare branch where focus trap properties will be read from behavior by Popup
• merge necessary changes to introduce this behavior into this PR
• remove focusTrap prop from the API of Popup