[Feature] Support HTML-in-Markdown (#5161)

* Added betterLinkDocumentMod

* add markdownRenderHTML to styleOptions

* Use new betterLinkDocumentMod and add a test

* Fix asButton with aria-label and className

* Update snapshots

* Update entry

* Use DOMParser + XMLSerializer

* Revert red box

* Update CHANGELOG.md

* Update CHANGELOG.md

Removes the redundant second changelog line

* Add breaking changes

* Run in JSDOM and remove empty "title" attribute

* More explanation

* Add HTML-in-Markdown for Adaptive Cards

* Style HTML-in-Markdown for Adaptive Cards

* Fix tests

* Revert containerClassName

* Move container to useRenderMarkdownAsHTML

* Fix tests

* Fix tests

* Clean up

* Add comment

* Update entry

* Fix tests

* Added open in external icon

* Add newline to end of XML serialization

* Better test

* Add HTML-in-Markdown

---------

Co-authored-by: William Wong <[email protected]>
Co-authored-by: Benjamin Yackley <[email protected]>
Co-authored-by: Eugene Olonov <[email protected]>

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Removed deprecated code: `connect*`, `useRenderActivity`, `useRenderActivityStatus`, `useRenderAvatar`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Added named exports in both CommonJS and ES Modules module format, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Removed deprecated `useFocusSendBox()` hook, please use `useFocus('sendBox')` instead, in PR [#5150](https://github.com/microsoft/BotFramework-WebChat/pull/5150), by [@OEvgeny](https://github.com/OEvgeny)
+-  HTML-in-Markdown is now supported. To disable this feature, set `styleOptions.markdownRenderHTML` to `false`
 
 ### Added
 
@@ -65,6 +66,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 -  Added `moduleFormat` and `transpiler` build info to `<meta>` tag, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Added support of rendering HTML-in-Markdown, in PR [#5161](https://github.com/microsoft/BotFramework-WebChat/pull/5161), by [@compulim](https://github.com/compulim), [@beyackle2](https://github.com/beyackle2), and [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

README.md

@@ -54,6 +54,12 @@ export default function MyComponent() {
 }
 ```
 
+#### Support HTML-in-Markdown
+
+Web Chat will now render HTML-in-Markdown. We have ported our sanitizer and accessibility fixer to work on HTML level. Both Markdown and HTML-in-Markdown will receive the same treatment and meet our security and accessibility requirements.
+
+You can turn off this option by setting `styleOptions.markdownRenderHTML` to `false`.
+
 ### 4.16.1 notable changes
 
 Web Chat now supports [Adaptive Cards schema up to 1.6](https://adaptivecards.io/explorer/). Some features in Adaptive Cards are in preview or designed to use outside of Bot Framework. Web Chat does not support these features.

__tests__/hooks/useRenderMarkdownAsHTML.js

@@ -5,24 +5,36 @@ import { timeouts } from '../constants.json';
 
 jest.setTimeout(timeouts.test);
 
+const CSS_HASH_PATTERN = /webchat--css-[\d\w]*-[\d\w]*/u;
+
 test('renderMarkdown should use Markdown-It if not set in props', async () => {
   const { pageObjects } = await setupWebDriver();
 
-  await expect(pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))).resolves.toBe(
-    '<p>Hello, World!</p>\n'
+  expect(
+    (await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))).replace(
+      CSS_HASH_PATTERN,
+      'webchat--css-xxxxx-xxxxx'
+    )
+  ).toBe(
+    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Hello, World!</p></div>\n'
   );
 });
 
 test('renderMarkdown should use custom Markdown transform function from props', async () => {
   const { pageObjects } = await setupWebDriver({
     props: {
-      renderMarkdown: text => text.toUpperCase()
+      renderMarkdown: text => `<p>${text.toUpperCase()}</p>`
     }
   });
 
-  await expect(
-    pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))
-  ).resolves.toMatchInlineSnapshot(`"HELLO, WORLD!"`);
+  expect(
+    (await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Hello, World!'))).replace(
+      CSS_HASH_PATTERN,
+      'webchat--css-xxxxx-xxxxx'
+    )
+  ).toBe(
+    '<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>HELLO, WORLD!</p></div>\n'
+  );
 });
 
 test('renderMarkdown should return falsy if the custom Markdown transform function is null', async () => {
@@ -32,27 +44,33 @@ test('renderMarkdown should return falsy if the custom Markdown transform functi
     }
   });
 
-  await expect(pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => !!fn)).resolves.toMatchInlineSnapshot(`false`);
+  expect(await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => !!fn)).toBe(false);
 });
 
 test('renderMarkdown should add accessibility text for external links', async () => {
   const { pageObjects } = await setupWebDriver();
 
-  await expect(
-    pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
-  ).resolves.toMatchInlineSnapshot(`
-          "<p>Click \u200B<a href=\\"https://aka.ms/\\" aria-label=\\"here Opens in a new window; external.\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt class=\\"webchat__render-markdown__external-link-icon\\" title=\\"Opens in a new window; external.\\" /></a>\u200B to find out more.</p>
-          "
-        `);
+  expect(
+    (
+      await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn =>
+        fn('Click [here](https://aka.ms/) to find out more.')
+      )
+    ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
+  ).toBe(
+    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here Opens in a new window; external." rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="Opens in a new window; external." /></a>\u200B to find out more.</p></div>\n`
+  );
 });
 
 test('renderMarkdown should add accessibility text for external links with yue', async () => {
   const { pageObjects } = await setupWebDriver({ props: { locale: 'yue' } });
 
-  await expect(
-    pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
-  ).resolves.toMatchInlineSnapshot(`
-          "<p>Click \u200B<a href=\\"https://aka.ms/\\" aria-label=\\"here 喺新嘅視窗開啟外部連結。\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">here<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" alt class=\\"webchat__render-markdown__external-link-icon\\" title=\\"喺新嘅視窗開啟外部連結。\\" /></a>\u200B to find out more.</p>
-          "
-        `);
+  expect(
+    (
+      await pageObjects.runHook('useRenderMarkdownAsHTML', [], fn =>
+        fn('Click [here](https://aka.ms/) to find out more.')
+      )
+    ).replace(CSS_HASH_PATTERN, 'webchat--css-xxxxx-xxxxx')
+  ).toBe(
+    `<div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-xxxxx-xxxxx"><p>Click \u200B<a href="https://aka.ms/" aria-label="here 喺新嘅視窗開啟外部連結。" rel="noopener noreferrer" target="_blank">here<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="webchat__render-markdown__external-link-icon" title="喺新嘅視窗開啟外部連結。" /></a>\u200B to find out more.</p></div>\n`
+  );
 });

__tests__/html/markdownRenderHTML/default.adaptiveCards.html

@@ -0,0 +1,69 @@
+<!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>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                type: 'AdaptiveCard',
+                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                version: '1.5',
+                body: [
+                  {
+                    style: 'heading',
+                    type: 'TextBlock',
+                    text: 'This is an Adaptive Card'
+                  },
+                  {
+                    type: 'TextBlock',
+                    text: atob(
+                      'IyMgSGVhZGVyCjxwPlRoaXMgaXMgc29tZSB0ZXh0IHdpdGggYSA8YSBocmVmPSJodHRwOi8vZXhhbXBsZS5jb20iIHRpdGxlPSJldmVuIGhhY2tlcnMgcmVzcGVjdCBhMTF5Ij5saW5rIGluIGl0PC9hPi4gQWxzbyA8c3Ryb25nPnNvbWUgdGV4dDwvc3Ryb25nPiA8ZW0+d2l0aCBmb3JtYXR0aW5nPC9lbT4uPC9wPgo8dWw+CjxsaT5Vbm9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+CjwvdWw+CjxvbD4KPGxpPk9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+Cjwvb2w+Cjx1bD4KPGxpPkJlbG93IGFyZSBzb21lIHVuc2FmZSB0aGluZ3MgdGhhdCBzaG91bGQgZ2V0IHNhbml0aXplZDoKPGxpPjxzY3JpcHQ+VGhpcyBpc24ndCBhbGxvd2VkITwvc2NyaXB0Pgo8bGk+PGltZyBzcmM9IiIgYWx0PSJJIGFtIGEgZHVtbXkgaW1hZ2UgdHJ5aW5nIHRvIGhhY2sgeW91IiBvbmVycm9yPWFsZXJ0KDEpIC8+CjxsaT48c3ZnIGFyaWEtbGFiZWw9Im1hbGljaW91cyBzdmcgaGVyZSI+PGcvb25sb2FkPWFsZXJ0KDIpLy88cD4KPGxpPjxwPmFiYzxpZnJhbWUvL3NyYz1qQXZhJlRhYjtzY3JpcHQ6YWxlcnQoMyk+ZGVmPC9wPgo8bGk+PG1hdGg+PG1pLy94bGluazpocmVmPSJkYXRhOngsPHNjcmlwdD5hbGVydCg0KTwvc2NyaXB0Pgo8bGk+CjwvdWw+'
+                    ),
+                    wrap: true
+                  }
+                ],
+                actions: [
+                  {
+                    type: 'Action.Submit',
+                    title: 'Submit card'
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ],
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const link = firstActivityElement.querySelector('[href="http://example.com"]');
+        const linkImage = link.querySelector('.webchat__render-markdown__external-link-icon');
+
+        expect(link.getAttribute('aria-label')).toBe('link in it Opens in a new window; external.');
+        expect(link.getAttribute('target')).toBe('_blank');
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(linkImage.title).toBe('Opens in a new window; external.');
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/markdownRenderHTML/default.adaptiveCards.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('markdownRenderHTML when unset', () => {
+  test('should render sanitized HTML in Adaptive Cards', () => runHTML('markdownRenderHTML/default.adaptiveCards'));
+});

__tests__/html/markdownRenderHTML/default.citationModal.html

@@ -0,0 +1,105 @@
+<!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>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          entities: [
+            {
+              '@context': 'https://schema.org',
+              '@id': '',
+              '@type': 'Message',
+              citation: [
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    url: 'https://example.com/1/',
+                    usageInfo: {
+                      '@id': '_:1',
+                      '@type': 'CreativeWork',
+                      description:
+                        'Nisi quis ut sint elit est nulla enim eiusmod. Deserunt commodo pariatur nostrud culpa aliquip esse pariatur exercitation nulla do proident. Est qui eiusmod aliquip deserunt labore consequat fugiat. Ullamco reprehenderit nostrud eiusmod nisi nulla esse id. Reprehenderit aliqua quis consectetur sit cupidatat fugiat Lorem ex labore. Eiusmod velit laborum quis tempor incididunt excepteur culpa esse nulla.',
+                      keywords: ['encrypted-content'],
+                      name: 'Sit veniam do irure velit est et quis ut Lorem reprehenderit commodo cillum occaecat',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'orange'
+                      }
+                    }
+                  },
+                  position: 1
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: 'Incididunt amet dolore anim commodo fugiat occaecat elit nulla do consequat. Quis incididunt occaecat labore adipisicing. Cillum sunt velit consequat irure ipsum ullamco sint ea aute. Sunt et eu ut enim aliqua cupidatat non adipisicing dolore commodo dolor magna enim. Commodo reprehenderit excepteur ad nostrud ex id aliquip deserunt eiusmod. Esse non labore nulla voluptate.',
+                    usageInfo: {
+                      '@type': 'CreativeWork',
+                      name: 'Velit exercitation',
+                      pattern: {
+                        '@type': 'DefinedTerm',
+                        inDefinedTermSet: 'https://www.w3.org/TR/css-color-4/',
+                        name: 'color',
+                        termCode: 'Yellow'
+                      }
+                    }
+                  },
+                  position: 3
+                },
+                {
+                  '@type': 'Claim',
+                  appearance: {
+                    '@type': 'DigitalDocument',
+                    text: atob(
+                      'IyMgSGVhZGVyCjxwPlRoaXMgaXMgc29tZSB0ZXh0IHdpdGggYSA8YSBocmVmPSJodHRwOi8vZXhhbXBsZS5jb20iIHRpdGxlPSJldmVuIGhhY2tlcnMgcmVzcGVjdCBhMTF5Ij5saW5rIGluIGl0PC9hPi4gQWxzbyA8c3Ryb25nPnNvbWUgdGV4dDwvc3Ryb25nPiA8ZW0+d2l0aCBmb3JtYXR0aW5nPC9lbT4uPC9wPgo8dWw+CjxsaT5Vbm9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+CjwvdWw+CjxvbD4KPGxpPk9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+Cjwvb2w+Cjx1bD4KPGxpPkJlbG93IGFyZSBzb21lIHVuc2FmZSB0aGluZ3MgdGhhdCBzaG91bGQgZ2V0IHNhbml0aXplZDoKPGxpPjxzY3JpcHQ+VGhpcyBpc24ndCBhbGxvd2VkITwvc2NyaXB0Pgo8bGk+PGltZyBzcmM9IiIgYWx0PSJJIGFtIGEgZHVtbXkgaW1hZ2UgdHJ5aW5nIHRvIGhhY2sgeW91IiBvbmVycm9yPWFsZXJ0KDEpIC8+CjxsaT48c3ZnIGFyaWEtbGFiZWw9Im1hbGljaW91cyBzdmcgaGVyZSI+PGcvb25sb2FkPWFsZXJ0KDIpLy88cD4KPGxpPjxwPmFiYzxpZnJhbWUvL3NyYz1qQXZhJlRhYjtzY3JpcHQ6YWxlcnQoMyk+ZGVmPC9wPgo8bGk+PG1hdGg+PG1pLy94bGluazpocmVmPSJkYXRhOngsPHNjcmlwdD5hbGVydCg0KTwvc2NyaXB0Pgo8bGk+CjwvdWw+'
+                    )
+                  },
+                  position: 4
+                }
+              ],
+              type: 'https://schema.org/Message',
+              usageInfo: { '@id': '_:1' }
+            }
+          ],
+          text: 'Ipsum[1] dolore[2] cupidatat[3] magna[4] consectetur[5] do tempor est excepteur.\n\n[1]: https://example.com/1/ "Sint amet id officia dolor ex eiusmod ipsum ipsum magna fugiat"\n[2]: https://example.com/2/ "Laboris cupidatat voluptate"\n[3]: _:3 "Velit nulla culpa eu ea consectetur consectetur dolore velit"\n[4]: _:4 "Adipisicing enim nulla"\n[5]: https://example.com/5',
+          type: 'message'
+        });
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const linkDefinitions = firstActivityElement.querySelectorAll('.webchat__link-definitions__list-item');
+
+        expect(linkDefinitions).toHaveProperty('length', 5);
+
+        linkDefinitions[3].querySelector('button').click();
+
+        const link = document.querySelector('dialog [href="http://example.com"]');
+        const linkImage = link.querySelector('.webchat__render-markdown__external-link-icon');
+
+        expect(link.getAttribute('aria-label')).toBe('link in it Opens in a new window; external.');
+        expect(link.getAttribute('target')).toBe('_blank');
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(linkImage.title).toBe('Opens in a new window; external.');
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/markdownRenderHTML/default.citationModal.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('markdownRenderHTML when unset', () => {
+  test('should render sanitized HTML in citation modal', () => runHTML('markdownRenderHTML/default.citationModal'));
+});

__tests__/html/markdownRenderHTML/default.messageActivity.html

@@ -0,0 +1,42 @@
+<!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>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          text: atob(
+            'IyMgSGVhZGVyCjxwPlRoaXMgaXMgc29tZSB0ZXh0IHdpdGggYSA8YSBocmVmPSJodHRwOi8vZXhhbXBsZS5jb20iIHRpdGxlPSJldmVuIGhhY2tlcnMgcmVzcGVjdCBhMTF5Ij5saW5rIGluIGl0PC9hPi4gQWxzbyA8c3Ryb25nPnNvbWUgdGV4dDwvc3Ryb25nPiA8ZW0+d2l0aCBmb3JtYXR0aW5nPC9lbT4uPC9wPgo8dWw+CjxsaT5Vbm9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+CjwvdWw+CjxvbD4KPGxpPk9yZGVyZWQ8L2xpPgo8bGk+bGlzdDwvbGk+CjxsaT5pdGVtczwvbGk+Cjwvb2w+Cjx1bD4KPGxpPkJlbG93IGFyZSBzb21lIHVuc2FmZSB0aGluZ3MgdGhhdCBzaG91bGQgZ2V0IHNhbml0aXplZDoKPGxpPjxzY3JpcHQ+VGhpcyBpc24ndCBhbGxvd2VkITwvc2NyaXB0Pgo8bGk+PGltZyBzcmM9IiIgYWx0PSJJIGFtIGEgZHVtbXkgaW1hZ2UgdHJ5aW5nIHRvIGhhY2sgeW91IiBvbmVycm9yPWFsZXJ0KDEpIC8+CjxsaT48c3ZnIGFyaWEtbGFiZWw9Im1hbGljaW91cyBzdmcgaGVyZSI+PGcvb25sb2FkPWFsZXJ0KDIpLy88cD4KPGxpPjxwPmFiYzxpZnJhbWUvL3NyYz1qQXZhJlRhYjtzY3JpcHQ6YWxlcnQoMyk+ZGVmPC9wPgo8bGk+PG1hdGg+PG1pLy94bGluazpocmVmPSJkYXRhOngsPHNjcmlwdD5hbGVydCg0KTwvc2NyaXB0Pgo8bGk+CjwvdWw+'
+          ),
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const [firstActivityElement] = pageElements.activities();
+
+        const link = firstActivityElement.querySelector('[href="http://example.com"]');
+        const linkImage = link.querySelector('.webchat__render-markdown__external-link-icon');
+
+        expect(link.getAttribute('aria-label')).toBe('link in it Opens in a new window; external.');
+        expect(link.getAttribute('target')).toBe('_blank');
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(linkImage.title).toBe('Opens in a new window; external.');
+
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/html/markdownRenderHTML/default.messageActivity.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('markdownRenderHTML when unset', () => {
+  test('should render sanitized HTML in message activity', () => runHTML('markdownRenderHTML/default.messageActivity'));
+});