feat(FocusZone): Add embed mode for FocusZone and new Chat behavior

[tomasiser]

Add embed mode for FocusZone and new Chat behavior

Hi, this PR does the following:

• For renderComponent and UIComponent:
  • Introduced FocusZoneMode.Embed, in which case FocusZone is not wrapping the component in an additional <div>, but instead uses the component directly in render. This is necessary for some components (e.g., ChatMessage) not to break generic styling etc.
  • Added protected this.focusZone reference to UIComponent available in components, so they can e.g., call this.focusZone.focus().
• For FocusZone directly:
  • Replaced onFocusNotification with a regular onFocus event callback to pass unit tests with embed.
  • Replaced ref={this.setRef} with this.setRef(this) in componentDidMount to support functional components, which is needed to pass unit tests with embed.
  • Changed defaultActiveElement to query only descendants of the focus zone instead of the whole document, which enables to write simpler selectors. Note that we do not lose any functionality by this, because selecting elements outside of focus zone had no effect.
• For unit tests:
  • isConformant and handlesAccessibility now support embedded FocusZone.
• For Chat and ChatMessage:
  • Added new action handlers: focus for Chat, and preventDefault for ChatMessage.
  • Added new behaviors: wrapped FocusZone for Chat, embedded FocusZone for ChatMessage.
  • Behaviors are available in 2 variations:
    • Default: use up/down arrow keys to navigate to previous/next chat message, use right arrow to focus inside a message (e.g., to focus links, buttons), use Tab to navigate through inside, use left arrow to return outside a message again.
    • EnterEsc: everything as in Default, except use Enter/Escape to focus inside/outside of chat message, and use arrow keys to navigate through inside a message.
• Adds <a> links to Chat example in docsite so that we can easily test navigation there.

[miroslavstastny]

Is this ever used as a focus action? Or is it more something like regainFocus?

[tomasiser]

It is used when you want to unfocus a message and focus the whole list again, so Juraj and I think that focus is an appropriate action name as the only thing it does is it literally focuses the chat. :)

[codecov]

Codecov Report

Merging #233 into master will decrease coverage by 0.12%.
The diff coverage is 83.33%.

@@            Coverage Diff             @@
##           master     #233      +/-   ##
==========================================
- Coverage    91.8%   91.67%   -0.13%     
==========================================
  Files          63       63              
  Lines        1171     1189      +18     
  Branches      173      153      -20     
==========================================
+ Hits         1075     1090      +15     
- Misses         92       95       +3     
  Partials        4        4

Impacted Files	Coverage Δ
src/index.ts	100% <100%> (ø)	⬆️
src/components/Chat/ChatMessage.tsx	93.75% <72.72%> (-3.75%)	⬇️
src/components/Chat/Chat.tsx	90.9% <83.33%> (-3.83%)	⬇️

---

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 86101cb...451b3cf. Read the comment docs.