Bump Adaptive Cards to 3.0.2 (#5115)

* Add tests for mods * Add test entrypoints * Test clicking on disabled button * Test show card button with disabled mod * Fix test filename * Bump adaptivecards@3.0.2 * More conclusive tests * Remove an unnecessary hack * Add 4.16.1 notable changes * Add entry
microsoft · Apr 1, 2024 · 512cc60 · 512cc60
1 parent 84c85cf
commit 512cc60
Show file tree

Hide file tree

Showing 18 changed files with 572 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,8 +33,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### 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
+      -  [`adaptivecards@3.0.2`](https://npmjs.com/package/adaptivecards)
       -  [`core-js@3.33.3`](https://npmjs.com/package/core-js)
       -  [`jwt-decode@4.0.0`](https://npmjs.com/package/jwt-decode)
       -  [`markdown-it@13.0.2`](https://npmjs.com/package/markdown-it)

diff --git a/README.md b/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.

diff --git a/__tests__/html/accessibility.adaptiveCard.hack.actionSetShouldNotBeMenuBarMod.html b/__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>
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.actionSetShouldNotBeMenuBarMod.js b/__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'));
+});
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.actionShouldBePushButtonMod.html b/__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>
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.actionShouldBePushButtonMod.js b/__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'));
+});
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.html b/__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>
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.activeElementMod.js b/__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'));
+});
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.disabledMod.html b/__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>
diff --git a/__tests__/html/accessibility.adaptiveCard.hack.disabledMod.js b/__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'));
+});