Add typing indicator to live region

[compulim]

Fixes #4099.

Changelog Entry

Added

• Resolves #4099, added typing indicator to live region for screen reader, by @compulim, in PR #4210

Description

When receiving a typing activity, screen reader should narrate "Bot is typing."

Design

Who is typing

Depends on which participant send the typing activity, it could be "Bot is typing" or "John is typing".

Direct Line activity do have a field from.name to indicate the name of the sender. However, Direct Line does not return a friendly bot name and we need to patch it.

If all of the condition is true, we will change the activity.from.name to "Bot":

• activity.channelData is "directline" or "webchat", and;
• activity.from.role is "bot", and;
• activity.from.id is the same as activity.from.name.

When more than one participant is typing, the typing indicator will be read as "John and others are typing."

Incorrect at field returned by useActiveTyping()

Previously, in our HOOKS.md, we stated:

This hook will return a list of participants who are actively typing, including the start typing time (at) and expiration time (expireAt), the name and the role of the participant.

However, when we revisit the code, the at field actually indicate the timestamp of most recent typing activity, instead of the starting time.

We fixed this by correcting the at field.

Specific Changes

• Updated core/src/reducers/typing.js for correcting the at field, it should be based on
• Updated HOOKS.md to indicate the issue <= 4.15.1
• Updated <LiveRegionTwin> to narrate static text properly (aria-labelledby is required by some browsers)
• Added sender name patch logic for "directline" and "webchat" channel
• Added new string "$1 is typing" and "$1 and others are typing" to en-US.json

• 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)