Bump deps and remove remark and strip-markdown (#3917)

* Bump deps * Go back to v1 * Remove remark and strip-markdown * Revert to v1 * Revert to v1 * Revert to v1 * Supports summary field * Ignore summary field * Strip Markdown from HTML * Add speak field not present * Update strip Markdown * Narrate empty text field * Use different text computation for HTML/Markdown * Clean up * Update with samples * More inline elements * Clean up * MessageBack must not be Markdown * Lockdown performance * Add snapshots * Fix MessageBack * Remove renderMarkdownAsHTML * Fix ESLint * Assume plain text if renderMarkdown is null * Compute text alternatives using alt field * Change to webchat:fallback-text field * Bump to [email protected] * Typo * Update entry * Typo * Update entry * Link to issue * Undo package*.json for core/embed * Move allTextContents into testHelpers * Add @param * Apply PR suggestions * Update text
microsoft · Jun 22, 2021 · 89bf9d2 · 89bf9d2
1 parent 02f48a2
commit 89bf9d2
Show file tree

Hide file tree

Showing 31 changed files with 61,983 additions and 102,888 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,10 +31,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3816](https://github.com/microsoft/BotFramework-WebChat/issues/3816). De-bumped Node.js engine requirement for Direct Line Speech SDK to `>= 10.14.2` from `>= 12.0.0`, by [@compulim](https://github.com/compulim) in PR [#3854](https://github.com/microsoft/BotFramework-WebChat/pull/3854)
 -  Fixes [#3842](https://github.com/microsoft/BotFramework-WebChat/issues/3842). Updated [`husky`](https://npmjs.com/package/husky), [`lint-staged`](https://npmjs.com/package/lint-staged) and corresponding `precommit` scripts, by [@compulim](https://github.com/compulim), in PR [#3871](https://github.com/microsoft/BotFramework-WebChat/pull/3871)
 -  Improved test reliability and added snapshots to console of test harness in development mode, by [@compulim](https://github.com/compulim), in PR [#3891](https://github.com/microsoft/BotFramework-WebChat/pull/3891)
+-  Fixes [#3360](https://github.com/microsoft/BotFramework-WebChat/issues/3360) and [#3615](https://github.com/microsoft/BotFramework-WebChat/issues/3615). Use `channelData['webchat:fallback-text']` field for screen reader text, before stripping Markdown 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)
@@ -109,8 +110,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)

diff --git a/...rkdown-js-accessibility-requirement-should-clean-up-html-in-markdown-1-snap.png b/...rkdown-js-accessibility-requirement-should-clean-up-html-in-markdown-1-snap.png
diff --git a/...lity-requirement-should-clean-up-speak-property-for-live-region-text-1-snap.png b/...lity-requirement-should-clean-up-speak-property-for-live-region-text-1-snap.png
diff --git a/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.html b/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.html
@@ -0,0 +1,86 @@
+<!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>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const baseActivity = {
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          textFormat: 'markdown',
+          timestamp: new Date(2000, 0, 1, 12, 34, 56, 789).toISOString(),
+          type: 'message'
+        };
+
+        const markdownIt = markdownit({ html: true });
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript([
+              {
+                ...baseActivity,
+                text:
+                  '![Exclamation mark](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) Warning.'
+              },
+              {
+                ...baseActivity,
+                text: '- Hello\n- World\n  - Aloha'
+              },
+              {
+                ...baseActivity,
+                text: 'Hello\n\nWorld'
+              },
+              {
+                ...baseActivity,
+                text: '<table><tr><td>USD</td><td>1.00</td></tr><tr><td>JPY</td><td>0.91</td></tr></table>'
+              },
+              {
+                ...baseActivity,
+                text: 'Hello, <strong>World</strong>!'
+              },
+              {
+                ...baseActivity,
+                text: 'Hello, <a href="https://bing.com/">Bing</a>!'
+              }
+            ]),
+            renderMarkdown: markdownIt.render.bind(markdownIt),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              internalLiveRegionFadeAfter: 60000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(6);
+
+        const screenReaderTexts = [].map.call(
+          document.querySelector('[aria-roledescription="transcript"][role="log"]').children,
+          child => testHelpers.getAllTextContents(child).join('\n')
+        );
+
+        expect(screenReaderTexts).toHaveLength(6);
+
+        expect(screenReaderTexts[0]).toBe('Bot said:\nExclamation mark Warning.\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[1]).toBe('Bot said:\nHello\nWorld\nAloha\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[2]).toBe('Bot said:\nHello\nWorld\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[3]).toBe('Bot said:\nUSD\n1.00\nJPY\n0.91\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[4]).toBe('Bot said:\nHello, World!\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[5]).toBe('Bot said:\nHello, Bing!\nSent at January 1 at 12:34 PM');
+
+        // The screenshot should show the message in Markdown format, i.e. <strong> and <code>.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.js b/__tests__/html/accessibility.liveRegionActivity.htmlInMarkdown.js
@@ -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 HTML in Markdown', () =>
+    runHTML('accessibility.liveRegionActivity.htmlInMarkdown.html'));
+});
diff --git a/__tests__/html/accessibility.liveRegionActivity.performance.html b/__tests__/html/accessibility.liveRegionActivity.performance.html
@@ -0,0 +1,89 @@
+<!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>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const baseActivity = {
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          textFormat: 'markdown',
+          timestamp: new Date(2000, 0, 1, 12, 34, 56, 789).toISOString(),
+          type: 'message'
+        };
+
+        const container = document.getElementById('webchat');
+        const transcript = new Array(10).fill().map((_, index) => ({
+          ...baseActivity,
+          id: index + 1 + '',
+          text: index + 1 + ''
+        }));
+
+        // We want to lockdown on the number of renderMarkdown() calls for <ScreenReaderActivity>.
+        // It should not increase significantly over time.
+
+        let numRenderMarkdownWithScreenReaderActivity = 0;
+        let numRenderMarkdownWithoutScreenReaderActivity = 0;
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript(transcript),
+            renderMarkdown: markdown => {
+              numRenderMarkdownWithScreenReaderActivity++;
+
+              return markdown;
+            },
+            store: testHelpers.createStore()
+          },
+          container
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(10);
+
+        // Unmount Web Chat, and re-render everything.
+        ReactDOM.unmountComponentAtNode(container);
+
+        await pageConditions.became('unmounted', () => !container.childNodes.length, 5000);
+
+        WebChat.renderWebChat(
+          {
+            directLine: testHelpers.createDirectLineWithTranscript(
+              // If "channelData['webchat:fallback-text']" field is set to empty string, it will disable <ScreenReaderActivity>.
+              transcript.map(activity => ({ ...activity, channelData: { 'webchat:fallback-text': '' } }))
+            ),
+            renderMarkdown: markdown => {
+              numRenderMarkdownWithoutScreenReaderActivity++;
+
+              return markdown;
+            },
+            store: testHelpers.createStore()
+          },
+          container
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(10);
+
+        // Number of renderMarkdown() call with or without screen reader activity should be 20.
+
+        // Number of <ScreenReaderActivity> rendered x number of activities = number of renderMarkdown
+        // 2 x 10 activities = 20 render loop
+
+        const numDiffRender = numRenderMarkdownWithScreenReaderActivity - numRenderMarkdownWithoutScreenReaderActivity;
+
+        expect(numDiffRender).toBe(20);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.liveRegionActivity.performance.js b/__tests__/html/accessibility.liveRegionActivity.performance.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  test('should not run renderMarkdown in excess', () =>
+    runHTML('accessibility.liveRegionActivity.performance.html'));
+});
diff --git a/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html b/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.html
@@ -0,0 +1,102 @@
+<!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 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 "webchat:fallback-text" field.'
+              },
+              {
+                ...baseActivity,
+                channelData: { 'webchat:fallback-text': 'With "webchat:fallback-text" field.' },
+                text: 'With "webchat:fallback-text" field.'
+              },
+              {
+                ...baseActivity,
+                channelData: { 'webchat:fallback-text': '' },
+                text: 'Empty string for "webchat:fallback-text" field.'
+              },
+              {
+                // No "text" field.
+                ...baseActivity
+              }
+            ]),
+            store: testHelpers.createStore(),
+            styleOptions: {
+              internalLiveRegionFadeAfter: 60000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(4);
+
+        const screenReaderTexts = [].map.call(
+          document.querySelector('[aria-roledescription="transcript"][role="log"]').children,
+          child => testHelpers.getAllTextContents(child).join('\n')
+        );
+
+        // The last activity have "webchat:fallback-text" field set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
+        expect(screenReaderTexts).toHaveLength(3);
+
+        // In screen reader transcript, the attachment are rendered and narrated.
+        expect(screenReaderTexts[0]).toBe(
+          'Bot said:\nNo “webchat:fallback-text” field.\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 "webchat:fallback-text" field.\nSent at January 1 at 12:34 PM');
+        expect(screenReaderTexts[2]).toBe('Bot said:\nA text: Hello.\nA text: World!\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 => testHelpers.getAllTextContents(element).join('\n')
+        );
+
+        // The last activity have "webchat:fallback-text" field set to empty string. It is treated as role="presentation" and not emitted DOM element for screen reader.
+        expect(screenReaderTexts).toHaveLength(3);
+
+        // In interactive transcript, this is narrated as "2 attachments".
+        expect(activityAlts[0]).toBe('Bot said:\nNo “webchat:fallback-text” field.\n2 attachments.\nSent at January 1 at 12:34 PM');
+
+        expect(activityAlts[1]).toBe('Bot said:\nWith "webchat:fallback-text" field.\nSent at January 1 at 12:34 PM');
+        expect(activityAlts[2]).toBe('Bot said:\n2 attachments.\nSent at January 1 at 12:34 PM');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.js b/__tests__/html/accessibility.liveRegionActivity.speakOverrideAttachments.js
@@ -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'));
+});