Screen reader should read alert when sending empty message or offline (…

…#4637) * Alert when sending empty message * Add offline error * Fix tests * Cosmetics * Apply suggestions from code review Co-authored-by: Benjamin Yackley <113474767+beyackle2@users.noreply.github.com> --------- Co-authored-by: Benjamin Yackley <113474767+beyackle2@users.noreply.github.com>
microsoft · Feb 15, 2023 · f856b83 · f856b83
1 parent 041a6dd
commit f856b83
Show file tree

Hide file tree

Showing 28 changed files with 575 additions and 159 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,7 +25,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 -  Added function to emit status change telemetry event for activities, by [@Erli-ms](https://github.com/Erli-ms), in PR [#4631](https://github.com/microsoft/BotFramework-WebChat/pull/4631)
-
 -  Added ability for developers to customize Web Chat by extending the default UI without having to re-implement existing components, by [@dawolff-ms](https://github.com/dawolff-ms), in PR [#4539](https://github.com/microsoft/BotFramework-WebChat/pull/4539)
 
 ### Fixed
@@ -34,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  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)
+-  Fixes [#4623](https://github.com/microsoft/BotFramework-WebChat/issues/4623). Screen reader should read error when failed to send an empty message or offline, by [@compulim](https://github.com/compulim) in PR [#4637](https://github.com/microsoft/BotFramework-WebChat/pull/4637)
 
 ### Changed
 

diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html
@@ -0,0 +1,56 @@
+<!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 clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        // GIVEN: With a multiline text area.
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              sendBoxTextWrap: true
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+        await host.click(pageElements.sendBoxTextBox());
+        await host.sendKeys('ENTER');
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+        clock.tick(50);
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when pressing ENTER on an empty multiline send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html
@@ -0,0 +1,67 @@
+<!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 clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+
+        // WHEN: Send button is clicked.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+
+        // WHEN: Send button is clicked again.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when clicking on send box with an empty send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.sendButton.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html
@@ -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 () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        // GIVEN: With a single line text box.
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+        await host.click(pageElements.sendBoxTextBox());
+        await host.sendKeys('ENTER');
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when pressing ENTER on an empty single line send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertOffline.sendButton.html b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.html
@@ -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 () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store, { autoConnect: false });
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        // GIVEN: Connection is still establishing.
+        expect(pageElements.connectivityStatus().innerText).toBe('Connecting…');
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: "Hello, World!" is in the send box.
+        await pageObjects.typeInSendBox('Hello, World!');
+
+        // WHEN: Send button is clicked.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Unable to connect."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Unable to connect.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertOffline.sendButton.js b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when clicking on send button while offline', () =>
+    test('should alert about offline', () => runHTML('accessibility.sendBox.alertOffline.sendButton.html')));
+});
diff --git a/__tests__/html/useTextBoxSubmit.true.html b/__tests__/html/useTextBoxSubmit.true.html
diff --git a/__tests__/html/useTextBoxSubmit.true.js b/__tests__/html/useTextBoxSubmit.true.js