microsoft · corinagum · Jun 3, 2021 · May 27, 2021 · May 27, 2021 · May 27, 2021
@@ -39,10 +39,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3757](https://github.com/microsoft/BotFramework-WebChat/issues/3757). IE11: Send box should not be disabled after pressing <kbd>ESCAPE</kbd> key in the transcript, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
 -  Fixes [#3901](https://github.com/microsoft/BotFramework-WebChat/issues/3901). IE11: SVG icons for buttons should not be focusable, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
 -  Fixes [#3825](https://github.com/microsoft/BotFramework-WebChat/issues/3825). Add `role="presentation"` to all decorative `<svg>`, by [@compulim](https://github.com/compulim), in PR [#3903](https://github.com/microsoft/BotFramework-WebChat/pull/3903)
+-  Fixes [#3360](https://github.com/microsoft/BotFramework-WebChat/issues/3360) and [#3615](https://github.com/microsoft/BotFramework-WebChat/issues/3615). Use [`activity.speak` field](https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#speak) for screen reader text, instead of stripping Markdown syntax from [`activity.text` field](https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#text), by [@compulim](https://github.com/compulim), in PR [#3917](https://github.com/microsoft/BotFramework-WebChat/pull/3917)
 
 ### Changed
 
--  Bumped all dependencies to the latest versions and sample bumps, by [@compulim](https://github.com/compulim) in PR [#3831](https://github.com/microsoft/BotFramework-WebChat/pull/3831) and PR [#3846](https://github.com/microsoft/BotFramework-WebChat/pull/3846)
+-  Bumped all dependencies to the latest versions and sample bumps, by [@compulim](https://github.com/compulim) in PR [#3831](https://github.com/microsoft/BotFramework-WebChat/pull/3831), PR [#3846](https://github.com/microsoft/BotFramework-WebChat/pull/3846), and PR [#3917](https://github.com/microsoft/BotFramework-WebChat/pull/3917)
    -  Development dependencies
       -  [`@azure/[email protected]`](https://npmjs.com/package/@azure/storage-blob)
       -  [`@babel/[email protected]`](https://npmjs.com/package/@babel/cli)
@@ -117,8 +118,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
       -  [`[email protected]`](https://npmjs.com/package/adaptivecards)
       -  [`[email protected]`](https://npmjs.com/package/classnames)
       -  [`[email protected]`](https://npmjs.com/package/core-js)
+      -  [`[email protected]`](https://npmjs.com/package/react-dictate-button)
       -  [`[email protected]`](https://npmjs.com/package/react-redux)
       -  [`[email protected]`](https://npmjs.com/package/redux-devtools-extension)
+      -  [`[email protected]`](https://npmjs.com/package/sanitize-html)
       -  [`[email protected]`](https://npmjs.com/package/url-search-params-polyfill)
       -  [`[email protected]`](https://npmjs.com/package/whatwg-fetch)
 -  Resolves [#3693](https://github.com/microsoft/BotFramework-WebChat/issues/3693). Bumped to [`[email protected]`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk), by [@compulim](https://github.com/compulim), in PR [#3907](https://github.com/microsoft/BotFramework-WebChat/pull/3907)

@@ -0,0 +1,115 @@
+<!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>
+      function allTextContents(element) {
+        const nodes = [].slice.call(element.childNodes);
+        const results = [];
+
+        while (nodes.length) {
+          const node = nodes.shift();
+
+          if (node.nodeType === Node.TEXT_NODE) {
+            results.push(node.textContent);
+          } else {
+            nodes.unshift(...[].slice.call(node.childNodes));
+          }
+        }
+
+        return results;
+      }
+
+      run(async function () {
+        const timestamp = new Date(2000, 0, 1, 12, 34, 56, 789).toISOString();
+        const baseActivity = {
+          attachments: [
+            {
+              content: 'Hello.',
+              contentType: 'text/plain'
+            },
+            {
+              content: 'World!',
+              contentType: 'text/plain'
+            }
+          ],
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          textFormat: 'markdown',
+          timestamp,
+          type: 'message'
+        };
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript([
+              {
+                ...baseActivity,
+                text: 'No "speak" property.'
+              },
+              {
+                ...baseActivity,
+                speak: 'With "speak" property.',
+                text: 'With "speak" property.'
+              },
+              {
+                ...baseActivity,
+                speak: '',
+                text: 'Empty string for "speak" property.'
+              }
+            ]),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              internalLiveRegionFadeAfter: 60000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(3);
+
+        const screenReaderTexts = [].map.call(
+          document.querySelector('[aria-roledescription="transcript"][role="log"]').children,
+          child => allTextContents(child).join('\n')
+        );
+
+        // The last activity have "speak" property set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
+        expect(screenReaderTexts).toHaveLength(2);
+
+        // In screen reader transcript, the attachment are rendered and narrated.
+        expect(screenReaderTexts[0]).toBe(
+          'Bot said:\nNo "speak" property.\nA text: Hello.\nA text: World!\nSent at January 1 at 12:34 PM'
+        );
+
+        // No attachments should be narrated.
+        expect(screenReaderTexts[1]).toBe('Bot said:\nWith "speak" property.\nSent at January 1 at 12:34 PM');
+
+        const activityAlts = [].map.call(
+          document.querySelectorAll(
+            '.webchat__basic-transcript__activity .webchat__screen-reader-activity[aria-roledescription="message"]'
+          ),
+          element => allTextContents(element).join('\n')
+        );
+
+        // The last activity have "speak" property set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
+        expect(screenReaderTexts).toHaveLength(2);
+
+        // In interactive transcript, this is narrated as "2 attachments".
+        expect(activityAlts[0]).toBe(
+          'Bot said:\nNo "speak" property.\n2 attachments.\nSent at January 1 at 12:34 PM'
+        );
+
+        expect(activityAlts[1]).toBe('Bot said:\nWith "speak" property.\nSent at January 1 at 12:34 PM');
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+// Verify compliance of https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#speak.
+describe('accessibility requirement', () => {
+  test('when "speak" field present, it should override all attachments', () =>
+    runHTML('accessibility.liveRegionActivity.speakOverrideAttachments.html'));
+});
@@ -0,0 +1,195 @@
+<!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>
+      function allTextContents(element) {
+        const nodes = [].slice.call(element.childNodes);
+        const results = [];
+
+        while (nodes.length) {
+          const node = nodes.shift();
+
+          if (node.nodeType === Node.TEXT_NODE) {
+            results.push(node.textContent);
+          } else {
+            nodes.unshift(...[].slice.call(node.childNodes));
+          }
+        }
+
+        return results;
+      }
+
+      run(async function () {
+        const timestamp = new Date(2000, 0, 1, 12, 34, 56, 789).toISOString();
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript([
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                text: 'Hello, **World** without `speak` property.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: {},
+                text: 'Hello, **World** with invalid `speak` property.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: 'Hello, World with speak property in plain text.',
+                text: 'Hello, **World** with `speak` property in plain text.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="string">
+Hello, World with simple speak property in SSML.
+</speak>`,
+                text: 'Hello, **World** with simple `speak` property in SSML.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="string">
+  <p>
+    <s>Hello, <prosody pitch="high">World</prosody> with <say-as interpret-as="spell-out">complex</say-as> speak property in SSML.</s>
+  </p>
+</speak>`,
+                text: 'Hello, **World** with complex `speak` property in SSML.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="string">
+  <p>
+    <s>今日天氣<prosody pitch="high">很好</prosody>。</s>
+  </p>
+</speak>`,
+                text: 'Hello, **World** with complex `speak` property in SSML.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: 'Say another thing.',
+                text: 'Display one thing.',
+                textFormat: 'markdown',
+                timestamp,
+                type: 'message'
+              },
+              {
+                channelData: {
+                  messageBack: {
+                    displayText: 'Text from MessageBack.'
+                  }
+                },
+                from: { id: 'user', role: 'user' },
+                text: 'This should not be displayed.',
+                timestamp,
+                type: 'message'
+              },
+              {
+                from: {
+                  id: 'bot',
+                  role: 'bot'
+                },
+                speak: '',
+                text: 'This is presentational, should not narrate.',
+                timestamp,
+                type: 'message'
+              }
+            ]),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              internalLiveRegionFadeAfter: 60000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(9);
+
+        const screenReaderTexts = [].map.call(
+          document.querySelector('[aria-roledescription="transcript"][role="log"]').children,
+          child => allTextContents(child).join('\n')
+        );
+
+        expect(screenReaderTexts).toHaveLength(8);
+
+        // Without "speak" property set, we will be narrating the "text" as-is.
+        expect(screenReaderTexts[0]).toBe(
+          'Bot said:\nHello, **World** without `speak` property.\nSent at January 1 at 12:34 PM'
+        );
+
+        // Without "speak" property set, we will be narrating the "text" as-is.
+        expect(screenReaderTexts[1]).toBe(
+          'Bot said:\nHello, **World** with invalid `speak` property.\nSent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[2]).toBe(
+          'Bot said:\nHello, World with speak property in plain text.\nSent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[3]).toBe(
+          'Bot said:\nHello, World with simple speak property in SSML.\nSent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[4]).toBe(
+          'Bot said:\nHello, World with complex speak property in SSML.\nSent at January 1 at 12:34 PM'
+        );
+
+        // Expectation: when we concatenate the text content, we must not add whitespaces. Some languages don't have whitespaces.
+        expect(screenReaderTexts[5]).toBe('Bot said:\n今日天氣很好。\nSent at January 1 at 12:34 PM');
+
+        expect(screenReaderTexts[6]).toBe('Bot said:\nSay another thing.\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[7]).toBe('You said:\nText from MessageBack.\nSent at January 1 at 12:34 PM');
+
+        // The screenshot should show the message in Markdown format, i.e. <strong> and <code>.
+        // It must not show the text "This should not be displayed."
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+// Verify compliance of https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#speak.
+describe('accessibility requirement', () => {
+  test('should clean up "speak" property for live region text', () =>
+    runHTML('accessibility.liveRegionActivity.text.html'));
+});