Add useObserveTranscriptFocus hook and focus fix on IE11

[compulim]

Fixes #3754.

Changelog Entry

Added

• Resolves #3754. Added new useObserveTranscriptFocus hook, by @compulim in PR #3755

Description

Added a new useObserveTranscriptFocus hook to allow apps to observe which elements in the transcript the user is focusing on.

Also added a focus redirection mechanism to fix an issue in IE11, excerpt from comment in code:

With an empty transcript, when the user clicks on the empty space (a.k.a. filler), IE11 says the focus is on the <div className="filler">, despite there are no "tabIndex" attributes set on the filler. We need to artificially send the focus back to the transcript.

Design

Today, Emulator has a mechanism to select/highlight a single activity.

Since Web Chat also introduced similar "transcript navigation" feature in PR #3703, Emulator can move to Web Chat official feature.

To enable that, we need to add an useObserveTranscriptFocus hook to let the app to know which activity is user is selecting.

Tomorrow, we can extend this hook by allowing the user to focus on attachments as well.

Specific Changes

• Added a new useObserveTranscriptFocus hook, similar to existing useObserveScrollPosition hook
• Updated BasicTranscript.js to emit transcript focus to its observers when the focus has changed
• Added new tests for useObserveTranscriptFocus
• To fix an issue in IE11, added a focus redirector for transcript filler
  • Filler is an empty <div> used to push the message bubbles to the bottom of the transcript initially
  • It has flex-grow: 1 and flex-shrink: 10000, that means, it is very likely to get shrunk and very unlikely to grow

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[corinagum]

LGTM - pending comments