microsoft · compulim · Jan 18, 2023 · Jan 18, 2023 · Jan 18, 2023 · Jan 18, 2023
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4558](https://github.com/microsoft/BotFramework-WebChat/issues/4558). In high contrast mode, "Retry" link button should use link color as defined by [CSS System Colors](https://w3c.github.io/csswg-drafts/css-color/#css-system-colors), by [@beyackle2](https://github.com/beyackle2) in PR [#4537](https://github.com/microsoft/BotFramework-WebChat/pull/4537)
 -  Fixes [#4566](https://github.com/microsoft/BotFramework-WebChat/issues/4566). For YouTube and Vimeo `<iframe>`, add `sandbox="allow-same-origin allow-scripts"`, by [@compulim](https://github.com/compulim) in PR [#4567](https://github.com/microsoft/BotFramework-WebChat/pull/4567)
 -  Fixes [#4561](https://github.com/microsoft/BotFramework-WebChat/issues/4561). Header title of keyboard help dialog should be the `aria-labelledby` of the dialog and close button should be the first element of the header, by [@compulim](https://github.com/compulim) in PR [#4609](https://github.com/microsoft/BotFramework-WebChat/pull/4609)
+-  Fixes [#4559](https://github.com/microsoft/BotFramework-WebChat/issues/4559). Keyboard help screen should be scrollable and its close button should appear correctly in light-themed high contrast mode, by [@compulim](https://github.com/compulim) in PR [#4619](https://github.com/microsoft/BotFramework-WebChat/pull/4619)
 
 ### Changed
 

@@ -0,0 +1,47 @@
+<!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);
+
+        // GIVEN: Dark theme is activated.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'prefers-color-scheme', value: 'dark' }]
+        });
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 60000,
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Focus on the document.body.
+        document.body.focus();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Keyboard help screen should show in forced colors.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should show with dark theme', () =>
+    runHTML('accessibility.keyboardHelp.darkTheme'));
+});
@@ -0,0 +1,47 @@
+<!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);
+
+        // GIVEN: Forced colors is activated.
+        await host.sendDevToolsCommand('Emulation.setEmulatedMedia', {
+          features: [{ name: 'forced-colors', value: 'active' }]
+        });
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 60000,
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Focus on the document.body.
+        document.body.focus();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Keyboard help screen should show in forced colors.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen', () => {
+  test('should show with forced colors', () =>
+    runHTML('accessibility.keyboardHelp.forcedColors'));
+});
@@ -0,0 +1,53 @@
+<!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 () {
+        // SETUP: Browser window size with height of 480px.
+        await host.windowSize(360, 480, document.getElementById('webchat'));
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 60000,
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Focus on the document.body.
+        document.body.focus();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Keyboard help screen should show with a scrollbar.
+        await host.snapshot();
+
+        // ---
+
+        // WHEN: Page down key is pressed.
+        await host.sendKeys('PAGE_DOWN');
+
+        // THEN: It should scroll the keyboard help screen down.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen with reduced height', () => {
+  test('should show a scrollbar', () =>
+    runHTML('accessibility.keyboardHelp.reducedHeight'));
+});
@@ -0,0 +1,45 @@
+<!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 () {
+        // SETUP: Browser window size with height of 480px.
+        await host.windowSize(320, 800, document.getElementById('webchat'));
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 60000,
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Focus on the document.body.
+        document.body.focus();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Keyboard help screen should show without any clippings.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen with reduced width', () => {
+  test('should not clip', () =>
+    runHTML('accessibility.keyboardHelp.reducedWidth'));
+});
@@ -0,0 +1,45 @@
+<!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 () {
+        // SETUP: Browser window size with height of 42px.
+        await host.windowSize(360, 42, document.getElementById('webchat'));
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 60000,
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: Focus on the document.body.
+        document.body.focus();
+
+        // WHEN: TAB key is pressed.
+        await host.sendTab();
+
+        // THEN: Keyboard help screen should not be visible.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('keyboard help screen with zero height', () => {
+  test('should not be visible', () =>
+    runHTML('accessibility.keyboardHelp.zeroHeight'));
+});