Focus on the close button of keyboard help screen (#4479)

* Focus on the close button * Add entry * Transpile bent to ES5 * Make SVGs non-focusable in IE11 * Add entry * Update comment * Update snapshot
microsoft · Nov 15, 2022 · b544650 · b544650
1 parent 4e87e38
commit b544650
Show file tree

Hide file tree

Showing 34 changed files with 358 additions and 13 deletions.
diff --git 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/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-1-snap.png b/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-1-snap.png
diff --git a/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-2-snap.png b/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-2-snap.png
diff --git a/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-3-snap.png b/...s-keyboard-help-screen-should-close-when-the-close-button-is-clicked-3-snap.png
diff --git a/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-1-snap.png b/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-1-snap.png
diff --git a/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-2-snap.png b/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-2-snap.png
diff --git a/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-3-snap.png b/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-3-snap.png
diff --git a/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-4-snap.png b/...eyboard-help-screen-should-not-interfere-when-clicking-on-activities-4-snap.png
diff --git a/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-1-snap.png b/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-1-snap.png
diff --git a/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-2-snap.png b/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-2-snap.png
diff --git a/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-3-snap.png b/...-key-js-keyboard-help-screen-should-close-when-escape-key-is-pressed-3-snap.png
diff --git a/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-1-snap.png b/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-1-snap.png
diff --git a/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-2-snap.png b/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-2-snap.png
diff --git a/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-3-snap.png b/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-3-snap.png
diff --git a/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-4-snap.png b/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-4-snap.png
diff --git a/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-5-snap.png b/...yboard-help-screen-should-close-when-tab-away-and-show-when-tab-back-5-snap.png
diff --git a/...ator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png b/...ator-js-transcript-navigation-should-show-visual-keyboard-indicators-3-snap.png
diff --git a/...ator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png b/...ator-js-transcript-navigation-should-show-visual-keyboard-indicators-5-snap.png
diff --git a/__tests__/html/accessibility.keyboardHelp.clickCloseButton.html 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -52,6 +52,7 @@ export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont
         borderWidth: 2,
         color: '#999',
         height: 34,
+        outline: 0,
         padding: 0,
         position: 'absolute',
         right: paddingRegular,