microsoft · corinagum · Jun 3, 2021 · May 27, 2021 · May 27, 2021 · May 27, 2021
@@ -0,0 +1,164 @@
+<!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: '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'
+              }
+            ]),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              internalLiveRegionFadeAfter: 60000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        const liveRegion = document.querySelector('[aria-roledescription="transcript"][role="log"]');
+        const screenReaderTexts = [].map.call(liveRegion.children, child => allTextContents(child).join(' '));
+
+        expect(screenReaderTexts).toHaveLength(7);
+
+        // Without "speak" property set, we will be narrating the "text" as-is.
+        expect(screenReaderTexts[0]).toBe(
+          'Bot said: Hello, **World** without `speak` property. Sent 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: Hello, **World** with invalid `speak` property. Sent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[2]).toBe(
+          'Bot said: Hello, World with speak property in plain text. Sent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[3]).toBe(
+          'Bot said: Hello, World with simple speak property in SSML. Sent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[4]).toBe(
+          'Bot said: Hello, World with complex speak property in SSML. Sent at January 1 at 12:34 PM'
+        );
+
+        expect(screenReaderTexts[5]).toBe('Bot said: Say another thing. Sent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[6]).toBe('You said: Text from MessageBack. Sent 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,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  test('should clean up "speak" property for live region text', () =>
+    runHTML('accessibility.liveRegionActivity.text.html'));
+});