diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba1a0a83c4..7f60f4e4d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4472](https://github.com/microsoft/BotFramework-WebChat/issues/4472). Removed `role` attributes for notification bar and use `<div>` instead of `<ul>`/`<li>`, by [@compulim](https://github.com/compulim) in PR [#4475](https://github.com/microsoft/BotFramework-WebChat/pull/4475)
 -  Fixes [#4393](https://github.com/microsoft/BotFramework-WebChat/issues/4393). Renders `<section role="feed">` only if there are one or more activities contained within, by [@beyackle2](https://github.com/beyackle2) and [@compulim](https://github.com/compulim), in PR [#4420](https://github.com/microsoft/BotFramework-WebChat/pull/4420)
 -  Fixes [#4473](https://github.com/microsoft/BotFramework-WebChat/issues/4473). Bumped `strip-ansi@6.0.1` for `test-harness` as `@^7` does not support CommonJS project, by [@compulim](https://github.com/compulim) in PR [#4474](https://github.com/microsoft/BotFramework-WebChat/pull/4474)
+-  Fixes [#4476](https://github.com/microsoft/BotFramework-WebChat/issues/4476). When focus on the keyboard help screen, it should focus on the close button, by [@compulim](https://github.com/compulim) in PR [#4479](https://github.com/microsoft/BotFramework-WebChat/pull/4479)
+-  Fixes [#4442](https://github.com/microsoft/BotFramework-WebChat/issues/4442). Change the keyboard help screen string "Leave message" to "Exit message", by [@compulim](https://github.com/compulim) in PR [#4479](https://github.com/microsoft/BotFramework-WebChat/pull/4479)
 
 ### Changed
 
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-1-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-1-snap.png
new file mode 100644
index 0000000000..1189fab1b8
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-2-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-2-snap.png
new file mode 100644
index 0000000000..80a7a17992
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-3-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-3-snap.png
new file mode 100644
index 0000000000..4e4236ff2d
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-close-button-js-keyboard-help-screen-should-close-when-the-close-button-is-clicked-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-1-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-1-snap.png
new file mode 100644
index 0000000000..1189fab1b8
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-2-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-2-snap.png
new file mode 100644
index 0000000000..80a7a17992
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-3-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-3-snap.png
new file mode 100644
index 0000000000..dcfee6f100
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-4-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-4-snap.png
new file mode 100644
index 0000000000..62aa135b03
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-click-thru-js-keyboard-help-screen-should-not-interfere-when-clicking-on-activities-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-1-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-1-snap.png
new file mode 100644
index 0000000000..1189fab1b8
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-2-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-2-snap.png
new file mode 100644
index 0000000000..80a7a17992
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-3-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-3-snap.png
new file mode 100644
index 0000000000..4e4236ff2d
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-escape-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-1-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-1-snap.png
new file mode 100644
index 0000000000..1189fab1b8
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-2-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-2-snap.png
new file mode 100644
index 0000000000..80a7a17992
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-3-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-3-snap.png
new file mode 100644
index 0000000000..4e4236ff2d
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-4-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-4-snap.png
new file mode 100644
index 0000000000..80a7a17992
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-4-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-5-snap.png b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-5-snap.png
new file mode 100644
index 0000000000..1189fab1b8
Binary files /dev/null and b/__tests__/__image_snapshots__/html/accessibility-keyboard-help-tab-key-js-keyboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-5-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png b/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png
index 609c678e38..d9e1b4cbf6 100644
Binary files a/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png and b/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png b/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png
index 609c678e38..d9e1b4cbf6 100644
Binary files a/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png and b/__tests__/__image_snapshots__/html/transcript-navigation-visual-keyboard-indicator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png differ
diff --git a/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html b/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html
new file mode 100644
index 0000000000..d462ad88d4
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // SETUP: With 2 bot messages.
+        await directLine.emulateIncomingActivity('Hello, World!');
+        await directLine.emulateIncomingActivity('Aloha!');
+        await pageConditions.numActivitiesShown(2);
+
+        // THEN: The focus should be on `document.body` initially.
+        await pageConditions.focusOn(document.body, 'document body');
+
+        // THEN: The keyboard help screeen should not be visible initially.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the close button.
+        await pageConditions.focusOn(pageElements.keyboardHelpScreenCloseButton(), 'keyboard help screen close button');
+
+        // THEN: The keyboard help screeen show be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: SPACE BAR is pressed while the focus is on the close button.
+        await host.sendKeys(' ');
+
+        // THEN: It should focus on the chat history.
+        await pageConditions.focusOn(pageElements.transcript(), 'chat history');
+
+        // THEN: It should focus on the last message in the chat history.
+        await pageConditions.became(
+          'focus on the last message',
+          () => pageElements.focusedActivity() === pageElements.activities()[1],
+          1000
+        );
+
+        // THEN: The keyboard help screeen show be closed (not visible).
+        //       The chat history and the last message should be focused.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.keyboardHelp.clickCloseButton.js b/__tests__/html/accessibility.keyboardHelp.clickCloseButton.js
new file mode 100644
index 0000000000..9fa2f2b964
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.clickCloseButton.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should close when the close button is clicked', () =>
+    runHTML('accessibility.keyboardHelp.clickCloseButton'));
+});
diff --git a/__tests__/html/accessibility.keyboardHelp.clickThru.html b/__tests__/html/accessibility.keyboardHelp.clickThru.html
new file mode 100644
index 0000000000..cbb5ec6dd4
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.clickThru.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // SETUP: With 2 bot messages.
+        await directLine.emulateIncomingActivity('Hello, World!');
+        await directLine.emulateIncomingActivity('Aloha!');
+        await pageConditions.numActivitiesShown(2);
+
+        // THEN: The focus should be on `document.body` initially.
+        await pageConditions.focusOn(document.body, 'document body');
+
+        // THEN: The keyboard help screeen should not be visible initially.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the close button.
+        await pageConditions.focusOn(pageElements.keyboardHelpScreenCloseButton(), 'keyboard help screen close button');
+
+        // THEN: The keyboard help screeen show be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: Click to focus on the send box text box.
+        await host.click(pageElements.sendBoxTextBox());
+        await pageConditions.focusOn(pageElements.sendBoxTextBox(), 'send box text box');
+
+        // THEN: The keyboard help screen should not be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: Click on the first message.
+        await host.click(pageElements.activities()[0]);
+
+        // THEN: It should focus on the chat history.
+        //       The invisible keyboard help screen should not block clicks.
+        await pageConditions.focusOn(pageElements.transcript(), 'chat history');
+
+        // THEN: It should focus on the first message in the chat history.
+        await pageConditions.became(
+          'focus on the first activity',
+          () => pageElements.focusedActivity() === pageElements.activities()[0],
+          1000
+        );
+
+        // THEN: The keyboard help screeen should not be visible.
+        //       The chat history and the first message should be focused.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.keyboardHelp.clickThru.js b/__tests__/html/accessibility.keyboardHelp.clickThru.js
new file mode 100644
index 0000000000..d1616c2c32
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.clickThru.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should not interfere when clicking on activities', () =>
+    runHTML('accessibility.keyboardHelp.clickThru'));
+});
diff --git a/__tests__/html/accessibility.keyboardHelp.escapeKey.html b/__tests__/html/accessibility.keyboardHelp.escapeKey.html
new file mode 100644
index 0000000000..1afd93fc0b
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.escapeKey.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // SETUP: With 2 bot messages.
+        await directLine.emulateIncomingActivity('Hello, World!');
+        await directLine.emulateIncomingActivity('Aloha!');
+        await pageConditions.numActivitiesShown(2);
+
+        // THEN: The focus should be on `document.body` initially.
+        await pageConditions.focusOn(document.body, 'document body');
+
+        // THEN: The keyboard help screeen should not be visible initially.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the close button.
+        await pageConditions.focusOn(pageElements.keyboardHelpScreenCloseButton(), 'keyboard help screen close button');
+
+        // THEN: The keyboard help screeen show be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: ESCAPE key is pressed.
+        await host.sendKeys('ESCAPE');
+
+        // THEN: It should focus on the chat history.
+        await pageConditions.focusOn(pageElements.transcript(), 'chat history');
+
+        // THEN: It should close the keyboard help screen.
+        //       The chat history and the last message should be focused.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.keyboardHelp.escapeKey.js b/__tests__/html/accessibility.keyboardHelp.escapeKey.js
new file mode 100644
index 0000000000..e9e108aa18
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.escapeKey.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should close when ESCAPE key is pressed', () =>
+    runHTML('accessibility.keyboardHelp.escapeKey'));
+});
diff --git a/__tests__/html/accessibility.keyboardHelp.tabKey.html b/__tests__/html/accessibility.keyboardHelp.tabKey.html
new file mode 100644
index 0000000000..9c25bf7357
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.tabKey.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        // SETUP: With 2 bot messages.
+        await directLine.emulateIncomingActivity('Hello, World!');
+        await directLine.emulateIncomingActivity('Aloha!');
+        await pageConditions.numActivitiesShown(2);
+
+        // THEN: The focus should be on `document.body` initially.
+        await pageConditions.focusOn(document.body, 'document body');
+
+        // THEN: The keyboard help screeen should not be visible initially.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the close button.
+        await pageConditions.focusOn(pageElements.keyboardHelpScreenCloseButton(), 'keyboard help screen close button');
+
+        // THEN: The keyboard help screeen show be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: It should focus on the chat history.
+        await pageConditions.focusOn(pageElements.transcript(), 'chat history');
+
+        // THEN: It should focus on the last message in the chat history.
+        await pageConditions.became(
+          'focus on the last message',
+          () => pageElements.focusedActivity() === pageElements.activities()[1],
+          1000
+        );
+
+        // THEN: The keyboard help screeen show be closed (not visible).
+        //       The chat history and the last message should be focused.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: SHIFT-TAB key is pressed.
+        await host.sendShiftTab();
+
+        // THEN: It should focus on the close button.
+        await pageConditions.focusOn(pageElements.keyboardHelpScreenCloseButton(), 'keyboard help screen close button');
+
+        // THEN: The keyboard help screeen show be visible.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: SHIFT-TAB key is pressed while the keyboard help screen is visible.
+        await host.sendShiftTab();
+
+        // THEN: It should focus on the document body.
+        await pageConditions.focusOn(document.body, 'document body');
+
+        // THEN: The keyboard help screeen show be closed (not visible).
+        //       As the focus is on document body, nothing in view should have focus ring.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.keyboardHelp.tabKey.js b/__tests__/html/accessibility.keyboardHelp.tabKey.js
new file mode 100644
index 0000000000..6bd4140dce
--- /dev/null
+++ b/__tests__/html/accessibility.keyboardHelp.tabKey.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should close when TAB away and show when TAB back', () =>
+    runHTML('accessibility.keyboardHelp.tabKey'));
+});
diff --git a/packages/api/src/localization/en-US.json b/packages/api/src/localization/en-US.json
index 4c80209f17..726b27d533 100644
--- a/packages/api/src/localization/en-US.json
+++ b/packages/api/src/localization/en-US.json
@@ -73,7 +73,8 @@
   "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_HEADER": "Access items in message",
   "KEYBOARD_HELP_CHAT_HISTORY_HEADER": "Chat history",
   "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_BODY": "Escape key",
-  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER": "Leave message",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER": "Exit message",
+  "_KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER.comment": "While focus is on the message, when the user press ESCAPE key, it should exit the message focus mode and focus back on the text box in the send box.",
   "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_BODY": "Tab key\nShift + tab key",
   "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_HEADER": "Move between items in a message",
   "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_BODY": "Arrow up key\nArrow down key",
diff --git a/packages/bundle/webpack.config.js b/packages/bundle/webpack.config.js
index 7361ce5deb..68d9ac3b1c 100644
--- a/packages/bundle/webpack.config.js
+++ b/packages/bundle/webpack.config.js
@@ -18,7 +18,7 @@ let config = {
     rules: [
       {
         // To speed up bundling, we are limiting Babel to a number of packages which does not publish ES5 bits.
-        test: /\/node_modules\/(botframework-streaming|buffer|nanoid|postcss|punycode|sanitize-html)\//iu,
+        test: /\/node_modules\/(bent|botframework-streaming|buffer|nanoid|postcss|punycode|sanitize-html)\//iu,
         use: {
           loader: 'babel-loader',
           options: {
diff --git a/packages/component/src/Styles/StyleSet/KeyboardHelp.ts b/packages/component/src/Styles/StyleSet/KeyboardHelp.ts
index e61fbbbb52..4203257842 100644
--- a/packages/component/src/Styles/StyleSet/KeyboardHelp.ts
+++ b/packages/component/src/Styles/StyleSet/KeyboardHelp.ts
@@ -52,6 +52,7 @@ export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont
         borderWidth: 2,
         color: '#999',
         height: 34,
+        outline: 0,
         padding: 0,
         position: 'absolute',
         right: paddingRegular,
diff --git a/packages/component/src/Transcript/KeyboardHelp.tsx b/packages/component/src/Transcript/KeyboardHelp.tsx
index 0a96391cec..4f428147c7 100644
--- a/packages/component/src/Transcript/KeyboardHelp.tsx
+++ b/packages/component/src/Transcript/KeyboardHelp.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 
-import type { VFC } from 'react';
+import type { FC } from 'react';
 
 import useFocus from '../hooks/useFocus';
 import useStyleSet from '../hooks/useStyleSet';
@@ -15,7 +15,7 @@ type NotesBodyProps = {
   text: string;
 };
 
-const Notes: VFC<NotesBodyProps> = ({ header, text }) => (
+const Notes: FC<NotesBodyProps> = ({ header, text }) => (
   <section className="webchat__keyboard-help__notes">
     <h4 className="webchat__keyboard-help__notes-header">{header}</h4>
     {text.split('\n').map((line, index) => (
@@ -33,7 +33,7 @@ Notes.propTypes = {
   text: PropTypes.string.isRequired
 };
 
-const KeyboardHelp: VFC<{}> = () => {
+const KeyboardHelp: FC<{}> = () => {
   const [{ keyboardHelp: keyboardHelpStyleSet }] = useStyleSet();
   const [shown, setShown] = useState(false);
   const focus = useFocus();
@@ -64,11 +64,19 @@ const KeyboardHelp: VFC<{}> = () => {
   );
 
   const handleCloseButtonClick = useCallback(() => focus('main'), [focus]);
+  const handleCloseButtonFocus = useCallback(() => setShown(true), [setShown]);
 
-  const handleFocusWithin = useCallback(() => setShown(true), [setShown]);
+  const handleCloseButtonKeyDown = useCallback(
+    event => {
+      const { key } = event;
 
-  const handleKeyPress = useCallback(
-    ({ key }) => (key === 'Enter' || key === 'Escape' || key === ' ') && focus('main'),
+      if (key === 'Enter' || key === 'Escape' || key === ' ') {
+        event.preventDefault();
+        event.stopPropagation();
+
+        focus('main');
+      }
+    },
     [focus]
   );
 
@@ -77,13 +85,14 @@ const KeyboardHelp: VFC<{}> = () => {
       // When the dialog is not shown, "aria-hidden" helps to prevent scan mode from able to scan the content of the dialog.
       aria-hidden={!shown}
       className={classNames('webchat__keyboard-help', keyboardHelpStyleSet + '', {
+        // Instead of using "hidden" attribute, we are using CSS to hide the dialog.
+        // - When using "hidden", the close button will not be tabbable because it is pseudo removed from the DOM
+        // - When using CSS, the close button will still be tabbable
+        // We prefer CSS because the focus need to land on close button, but we don't want to move the focus using JavaScript.
         'webchat__keyboard-help--shown': shown
       })}
       onBlur={handleBlur}
-      onFocus={handleFocusWithin}
-      onKeyPress={handleKeyPress}
       role="dialog"
-      tabIndex={0}
     >
       <div className="webchat__keyboard-help__box">
         <header>
@@ -93,12 +102,14 @@ const KeyboardHelp: VFC<{}> = () => {
           aria-label={closeButtonAlt}
           className="webchat__keyboard-help__close-button"
           onClick={handleCloseButtonClick}
-          onFocus={handleFocusWithin}
-          tabIndex={-1}
+          onFocus={handleCloseButtonFocus}
+          onKeyDown={handleCloseButtonKeyDown}
           type="button"
         >
           <svg
             className="webchat__keyboard-help__close-button_image"
+            // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+            focusable={false}
             role="presentation"
             viewBox="0 0 2048 2048"
             xmlns="http://www.w3.org/2000/svg"
@@ -114,6 +125,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--light"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
@@ -138,6 +151,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--dark"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
@@ -162,6 +177,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--high-contrast"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
@@ -197,6 +214,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--light"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
@@ -221,6 +240,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--dark"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
@@ -245,6 +266,8 @@ const KeyboardHelp: VFC<{}> = () => {
             <svg
               className="webchat__keyboard-help__image webchat__keyboard-help__image--high-contrast"
               fill="none"
+              // "focusable" attribute is only available in IE11 and "tabIndex={-1}" does not work.
+              focusable={false}
               height="200"
               role="presentation"
               viewBox="0 0 121 200"
diff --git a/packages/test/page-object/src/globals/pageConditions/focusOn.js b/packages/test/page-object/src/globals/pageConditions/focusOn.js
new file mode 100644
index 0000000000..53763af39c
--- /dev/null
+++ b/packages/test/page-object/src/globals/pageConditions/focusOn.js
@@ -0,0 +1,5 @@
+import became from './became';
+
+export default async function focusOn(element, elementDescription = 'a specific element') {
+  await became(`focus on ${elementDescription}`, () => document.activeElement === element, 1000);
+}
diff --git a/packages/test/page-object/src/globals/pageConditions/index.js b/packages/test/page-object/src/globals/pageConditions/index.js
index e93ae27cdd..b9c0bf8d72 100644
--- a/packages/test/page-object/src/globals/pageConditions/index.js
+++ b/packages/test/page-object/src/globals/pageConditions/index.js
@@ -5,6 +5,7 @@ import became from './became';
 import connectivityStatusShown from './connectivityStatusShown';
 import errorMessageLogged from './errorMessageLogged';
 import focusedActivityInView from './focusedActivityInView';
+import focusOn from './focusOn';
 import liveRegionStabilized from './liveRegionStabilized';
 import mediaBufferStabilized from './mediaBufferStabilized';
 import minNumActivitiesShown from './minNumActivitiesShown';
@@ -31,6 +32,7 @@ export {
   connectivityStatusShown,
   errorMessageLogged,
   focusedActivityInView,
+  focusOn,
   liveRegionStabilized,
   mediaBufferStabilized,
   minNumActivitiesShown,
diff --git a/packages/test/page-object/src/globals/pageElements/index.js b/packages/test/page-object/src/globals/pageElements/index.js
index d3501337e3..32eda5b96e 100644
--- a/packages/test/page-object/src/globals/pageElements/index.js
+++ b/packages/test/page-object/src/globals/pageElements/index.js
@@ -5,6 +5,7 @@ import activityContents from './activityContents';
 import activityStatuses from './activityStatuses';
 import connectivityStatus from './connectivityStatus';
 import focusedActivity from './focusedActivity';
+import keyboardHelpScreenCloseButton from './keyboardHelpScreenCloseButton';
 import microphoneButton from './microphoneButton';
 import scrollToEndButton from './scrollToEndButton';
 import sendBoxTextBox from './sendBoxTextBox';
@@ -26,6 +27,7 @@ export {
   activityStatuses,
   connectivityStatus,
   focusedActivity,
+  keyboardHelpScreenCloseButton,
   microphoneButton,
   scrollToEndButton,
   sendBoxTextBox,
diff --git a/packages/test/page-object/src/globals/pageElements/keyboardHelpScreenCloseButton.js b/packages/test/page-object/src/globals/pageElements/keyboardHelpScreenCloseButton.js
new file mode 100644
index 0000000000..fdd256dd95
--- /dev/null
+++ b/packages/test/page-object/src/globals/pageElements/keyboardHelpScreenCloseButton.js
@@ -0,0 +1,3 @@
+export default function keyboardHelpScreenCloseButton() {
+  return document.querySelector('button.webchat__keyboard-help__close-button[type="button"]');
+}