Focus on the close button of keyboard help screen

[compulim]

Fixes #4476. Fixes #4442.
Fixes PVA #15582721.

Changelog Entry

Fixed

• Fixes #4476. When focus on the keyboard help screen, it should focus on the close button, by @compulim in PR #4479
• Fixes #4442. Change the keyboard help screen string "Leave message" to "Exit message", by @compulim in PR #4479

Description

When TAB into Web Chat, it will show the keyboard help screen.

The focus should be on the close button of the keyboard help screen, instead of on the role="dialog" itself.

Also updated one of the strings in the keyboard help screen.

Design

Specific Changes

• role="dialog": remove tabIndex="0" so it will no longer be tabbable
• Close button: remove tabIndex="-1" so it will be tabbable
• Close button: added CSS outline: 0 as we already styled a focus ring
• Moved some event handlers from role="dialog" to the close button
• Localization: keyboard help screen string change to "Exit message" from "Leave message"
• Added tests
• Transpile bent into ES5 as it currently broke IE11, bent is used by Cognitive Services Speech SDK
• IE11: Added focusable={false} to <svg>
  • IE11 defaults SVG to be tabbable and tabIndex={-1} don't work
  • Today, it took a few extra TAB to get past the keyboard help screen, because a few TAB lands on SVGs

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