Fix post-4.9.1 accessibility issues

[compulim]

Fixes #3236.

Changelog Entry

• Fixes #3236, by @compulim in PR #3287
  • Isolated screen reader only live region for incoming activities and added a new <ScreenReaderActivity> component
  • Removed screen reader text for activities outside of live region, including <CarouselFilmstrip>, <StackedLayout>, <TextContent>, and <Timestamp>
  • Updated some accessibility texts
  • Rectified activities render order by delaying activities with replyToId that reference an activity which is not ACK-ed, for up to 5 seconds
  • Disabled widgets will have tabindex="-1" set, instead of disabled attribute
  • Remove tabindex="-1" from Adaptive Cards container
  • Hide activities of type invoke

Description

Few areas of improvements:

• Transcript now use an isolated screen reader only live region
• Rectifying message order by using replyToId property as a hint
• Use tabindex="-1" for disabling button and prevent it from accessible through TAB key
• Remove unnecessary tabindex="-1" on the <div>, which is the Adaptive Card container
• Updated localization strings

For details, please refer to specific changes section.

Specific Changes

• Delaying activities with replyToId referencing an activity that is not received yet, the delay is up to 5 seconds (non-configurable)
  • This is to make sure activities with a reference, will be rendered only on or after the referencing activity is rendered
  • 5 seconds are chosen because both activities should be adjacent to each other in the message stream with only tiny delay (next packet), 5 seconds should be more than enough
  • Activities without replyToId reference, are not affected
• Disabled button will have tabIndex set to -1 to prevent it from being focused on via the TAB key
  • Previously: when the button is blur (being out of focus), the onblur event handler will add disabled attribute to the element to disable the TAB key
• Do not add unnecessary tabindex="-1" to Adaptive Card container, which would cause them to be focusable on mouse click
• A new isolated screen reader only live region to workaround bugs in some browsers
  • The live region hold a copy of the activity, only seen by the screen reader
  • After the activity is added to this live region to be narrated, it will be removed within 100ms
  • Since the activity is already queued in the screen reader, removing it has no impact on the narration
  • Having the copy removed, will prevent end-user from navigating into the this region and get confused with two version of same activity in the DOM tree
• Updated localization strings
  • "Bot sent" -> "Bot attached"
  • "User said/sent" -> "You said/attached"
• Add a GitHub Actions workflow preview-branch.yml
  • When a branch named preview-* is pushed to microsoft/BotFramework-WebChat fork, it will create a new release (tarball + bundle)
  • This release can be used for customers to test upcoming features, before it goes to our main dev branch (master)

---

• Testing Added

[compulim]

@corinagum Setting a <div> with tabindex="-1" will make it mouse-focusable, but not keyboard TAB-able.

Try this one, https://codepen.io/compulim/pen/xxZpXEX.