Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-securit…

…y-group-850b00d3e9

CHANGELOG.md

@@ -29,12 +29,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#5050](https://github.com/microsoft/BotFramework-WebChat/issues/5050). Fixed focus should not blur briefly after tapping on a suggested action, by [@compulim](https://github.com/compulim), in PR [#5097](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5097)
+-  Fixes [#5111](https://github.com/microsoft/BotFramework-WebChat/issues/5111). Fixed keyboard help screen to use HTML description list, by [@compulim](https://github.com/compulim), in PR [#5116](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5116)
+-  Fixes [#5080](https://github.com/microsoft/BotFramework-WebChat/issues/5080). Fixed `dateToLocaleISOString` for handling sub-hour, by [@marclundgren](https://github.com/marclundgren), in PR [#5114](https://github.com/microsoft/BotFramework-WebChat/pull/5114)
 
 ### Changed
 
 -  Moved pull request validation pipeline to GitHub Actions, by [@compulim](https://github.com/compulim), in PR [#4976](https://github.com/microsoft/BotFramework-WebChat/pull/4976)
--  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973)
+-  Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#4973](https://github.com/microsoft/BotFramework-WebChat/pull/4973) and PR [#5115](https://github.com/microsoft/BotFramework-WebChat/pull/5115)
+   -  Notes: Some components/features in Adaptive Cards are in preview and not ready for production use. Web Chat does not support these components and features
    -  Production dependencies
+      -  [`[email protected]`](https://npmjs.com/package/adaptivecards)
       -  [`[email protected]`](https://npmjs.com/package/core-js)
       -  [`[email protected]`](https://npmjs.com/package/jwt-decode)
       -  [`[email protected]`](https://npmjs.com/package/markdown-it)
@@ -87,6 +91,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4866](https://github.com/microsoft/BotFramework-WebChat/issues/4866). Citation modal show fill screen width on mobile device and various fit-and-finish, by [@compulim](https://github.com/compulim), in PR [#4867](https://github.com/microsoft/BotFramework-WebChat/pull/4867)
 -  Fixes [#4878](https://github.com/microsoft/BotFramework-WebChat/issues/4878). `createStore` should return type of `Redux.Store`, by [@compulim](https://github.com/compulim), in PR [#4877](https://github.com/microsoft/BotFramework-WebChat/pull/4877)
 -  Fixes [#4957](https://github.com/microsoft/BotFramework-WebChat/issues/4957). Native chevron of the accordion in citation should be hidden, by [@compulim](https://github.com/compulim), in PR [#4958](https://github.com/microsoft/BotFramework-WebChat/pull/4958)
+-  Fixes [#4870](https://github.com/microsoft/BotFramework-WebChat/issues/4870). Originator should use `claimInterpreter` instead of `ReplyAction/provider`, by [@compulim](https://github.com/compulim), in PR [#4910](https://github.com/microsoft/BotFramework-WebChat/pull/4910)
 
 ### Added
 

README.md

@@ -19,6 +19,14 @@ Web Chat supports [Content Security Policy (CSP)](https://developer.mozilla.org/
 
 > This section points out important version notes. For further information, please see the related links and check the [`CHANGELOG.md`](https://github.com/microsoft/BotFramework-WebChat/blob/main/CHANGELOG.md)
 
+### 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.
+
+### 4.16.0 notable changes
+
+Starting from 4.16.0, Internet Explorer is no longer supported. After more than a year of the Internet Explorer 11 officially retirement, we decided to stop supporting Internet Explorer. This will help us to bring new features to Web Chat. 4.15.9 is the last version which supports Internet Explorer in limited fashion.
+
 ### 4.12.1 patch: New style property `adaptiveCardsParserMaxVersion`
 
 Web Chat 4.12.1 patch includes a new style property allowing developers to choose the max Adaptive Cards schema version. See [PR #3778](https://github.com/microsoft/BotFramework-WebChat/pull/3778) for code changes.

__tests__/hooks/useRenderMarkdownAsHTML.js

@@ -41,7 +41,7 @@ test('renderMarkdown should add accessibility text for external links', async ()
   await expect(
     pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
   ).resolves.toMatchInlineSnapshot(`
-          "<p>Click <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> to find out more.</p>
+          "<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>
           "
         `);
 });
@@ -52,7 +52,7 @@ test('renderMarkdown should add accessibility text for external links with yue',
   await expect(
     pageObjects.runHook('useRenderMarkdownAsHTML', [], fn => fn('Click [here](https://aka.ms/) to find out more.'))
   ).resolves.toMatchInlineSnapshot(`
-          "<p>Click <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> to find out more.</p>
+          "<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>
           "
         `);
 });

__tests__/html/accessibility.adaptiveCard.hack.actionSetShouldNotBeMenuBarMod.html

@@ -0,0 +1,70 @@
+<!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: [
+                  {
+                    type: 'ActionSet',
+                    actions: [
+                      {
+                        type: 'Action.Submit',
+                        title: 'Button 0'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'TextBlock',
+                    text: 'Laborum sit incididunt ea laboris incididunt minim commodo Lorem excepteur sit ipsum eu.'
+                  }
+                ],
+                actions: [
+                  {
+                    type: 'Action.Submit',
+                    title: 'Button 1'
+                  },
+                  {
+                    type: 'Action.Submit',
+                    title: 'Button 2'
+                  },
+                  {
+                    type: 'Action.Submit',
+                    title: 'Button 3'
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ]
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const actionSets = Array.from(document.querySelectorAll('.ac-actionSet'));
+
+        expect(actionSets).toHaveLength(2);
+        expect(actionSets.every(actionSet => !actionSet.hasAttribute('role'))).toBe(true);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.adaptiveCard.hack.actionSetShouldNotBeMenuBarMod.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility hacks for Adaptive Cards', () => {
+  test('actionSets should not have role="menubar"', () => runHTML('accessibility.adaptiveCard.hack.actionSetShouldNotBeMenuBarMod.html'));
+});

__tests__/html/accessibility.adaptiveCard.hack.actionShouldBePushButtonMod.html

@@ -0,0 +1,90 @@
+<!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',
+                actions: [
+                  { type: 'Action.Submit', title: 'Button 1' },
+                  {
+                    type: 'Action.ShowCard',
+                    title: 'Show card',
+                    card: {
+                      type: 'AdaptiveCard',
+                      $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                      version: '1.5',
+                      actions: [
+                        { type: 'Action.Submit', title: 'Button 2' },
+                        { type: 'Action.Submit', title: 'Button 3' }
+                      ]
+                    }
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ]
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const [firstPushButton, secondPushButton] = Array.from(document.querySelectorAll('.ac-pushButton'));
+
+        expect(firstPushButton).toHaveProperty('textContent', 'Button 1');
+        expect(firstPushButton.getAttribute('aria-pressed')).toBe('false');
+        expect(firstPushButton.hasAttribute('aria-posinset')).toBe(false);
+        expect(firstPushButton.hasAttribute('aria-setsize')).toBe(false);
+        expect(firstPushButton.hasAttribute('role')).toBe(false);
+
+        expect(secondPushButton).toHaveProperty('textContent', 'Show card');
+        expect(secondPushButton.hasAttribute('aria-pressed')).toBe(false);
+        expect(secondPushButton.hasAttribute('aria-posinset')).toBe(false);
+        expect(secondPushButton.hasAttribute('aria-setsize')).toBe(false);
+        expect(secondPushButton.hasAttribute('role')).toBe(false);
+
+        await (await directLine.actPostActivity(() => host.click(firstPushButton))).resolveAll();
+
+        expect(firstPushButton.getAttribute('aria-pressed')).toBe('true');
+
+        await host.click(secondPushButton);
+
+        const [, , thirdPushButton, fourthPushButton] = Array.from(document.querySelectorAll('.ac-pushButton'));
+
+        expect(thirdPushButton).toHaveProperty('textContent', 'Button 2');
+        expect(thirdPushButton.getAttribute('aria-pressed')).toBe('false');
+        expect(thirdPushButton.hasAttribute('aria-posinset')).toBe(false);
+        expect(thirdPushButton.hasAttribute('aria-setsize')).toBe(false);
+        expect(thirdPushButton.hasAttribute('role')).toBe(false);
+
+        await (await directLine.actPostActivity(() => host.click(thirdPushButton))).resolveAll();
+
+        expect(thirdPushButton.getAttribute('aria-pressed')).toBe('true');
+
+        await WebChat.renderWebChat({ directLine, disabled: true, store }, document.getElementById('webchat'));
+
+        await host.click(fourthPushButton);
+
+        expect(fourthPushButton.getAttribute('aria-pressed')).toBe('false');
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.adaptiveCard.hack.actionShouldBePushButtonMod.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility hacks for Adaptive Cards', () => {
+  test('action should be push button', () => runHTML('accessibility.adaptiveCard.hack.actionShouldBePushButtonMod.html'));
+});

__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.html

@@ -0,0 +1,64 @@
+<!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 adaptiveCard = {
+          content: {
+            type: 'AdaptiveCard',
+            $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+            version: '1.5',
+            actions: [{ type: 'Action.Submit', title: 'Button' }]
+          },
+          contentType: 'application/vnd.microsoft.card.adaptive'
+        };
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [adaptiveCard],
+          id: 'a-00001',
+          text: 'Hello, World!',
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Hello, World!\n');
+
+        const pushButton1 = document.querySelector('.ac-pushButton');
+
+        pushButton1.focus();
+
+        expect(document.activeElement).toBe(pushButton1);
+
+        // Modifying "adaptiveCardsHostConfig" props will cause the Adaptive Card to be re-rendered.
+        WebChat.renderWebChat({ adaptiveCardsHostConfig: {}, directLine, store }, document.getElementById('webchat'));
+
+        await directLine.emulateIncomingActivity({
+          attachments: [adaptiveCard],
+          id: 'a-00001',
+          text: 'Aloha!',
+          type: 'message'
+        });
+
+        expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'Aloha!\n');
+
+        const pushButton2 = document.querySelector('.ac-pushButton');
+
+        expect(document.activeElement).toBe(pushButton2);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility hacks for Adaptive Cards', () => {
+  test('when rerendered should persist focused element', () => runHTML('accessibility.adaptiveCard.hack.activeElementMod.html'));
+});

__tests__/html/accessibility.adaptiveCard.hack.disabledMod.html

@@ -0,0 +1,77 @@
+<!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',
+                actions: [
+                  { type: 'Action.Submit', title: 'Button' },
+                  {
+                    type: 'Action.ShowCard',
+                    title: 'Show card',
+                    card: {
+                      type: 'AdaptiveCard',
+                      $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                      version: '1.5',
+                      body: [{ type: 'TextBlock', text: 'Hello, World!' }]
+                    }
+                  }
+                ]
+              },
+              contentType: 'application/vnd.microsoft.card.adaptive'
+            }
+          ]
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const pushButton1 = document.querySelector('.ac-pushButton');
+
+        expect(pushButton1).toHaveProperty('disabled', false);
+        expect(pushButton1.hasAttribute('aria-disabled')).toBe(false);
+
+        pushButton1.focus();
+
+        WebChat.renderWebChat({ directLine, disabled: true, store }, document.getElementById('webchat'));
+
+        const pushButton2 = document.querySelector('.ac-pushButton');
+
+        expect(document.activeElement).toBe(pushButton2);
+        expect(pushButton2).toHaveProperty('disabled', false);
+        expect(pushButton2.getAttribute('aria-disabled')).toBe('true');
+
+        await host.sendTab();
+        await host.sendShiftTab();
+
+        // Once focused to another element, the button should not be focusable.
+        expect(document.activeElement).not.toBe(pushButton2);
+
+        const showCardButton = Array.from(document.querySelectorAll('.ac-pushButton'))[1];
+
+        await host.click(showCardButton);
+
+        expect(showCardButton.hasAttribute('aria-disabled')).toBe(false);
+        expect(showCardButton.getAttribute('aria-expanded')).toBe('true');
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.adaptiveCard.hack.disabledMod.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility hacks for Adaptive Cards', () => {
+  test('when disabled should add aria-disabled', () => runHTML('accessibility.adaptiveCard.hack.disabledMod.html'));
+});