microsoft · compulim · Jun 29, 2021 · Jun 15, 2021 · Jun 16, 2021 · Jun 17, 2021
@@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3825](https://github.com/microsoft/BotFramework-WebChat/issues/3825). Add `role="presentation"` to all decorative `<svg>`, by [@compulim](https://github.com/compulim), in PR [#3903](https://github.com/microsoft/BotFramework-WebChat/pull/3903)
 -  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)
 -  Fixes [#3856](https://github.com/microsoft/BotFramework-WebChat/issues/3856). Fix missing typings, by [@compulim](https://github.com/compulim) and [@corinagum](https://github.com/corinagum), in PR [#3931](https://github.com/microsoft/BotFramework-WebChat/pull/3931)
+-  Fixes [#3947](https://github.com/microsoft/BotFramework-WebChat/issues/3947). Adaptive Cards: all action sets (which has `role="menubar"`) must have at least 1 or more `role="menuitem"`, by [@compulim](https://github.com/compulim), in PR [#3950](https://github.com/microsoft/BotFramework-WebChat/pull/3950)
 
 ### Changed
 

@@ -0,0 +1,206 @@
+<!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 createActivity(text) {
+        return {
+          from: { role: 'bot' },
+          id: Math.random().toString(36).substr(2, 5),
+          text,
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        };
+      }
+
+      /** Checks if the element has an ancestor that fulfill the predicate. */
+      function hasAncestor(element, predicate) {
+        let current = element.parentElement;
+
+        while (current) {
+          if (predicate.call(element, current)) {
+            return true;
+          }
+
+          current = current.parentElement;
+        }
+
+        return false;
+      }
+
+      /** Checks if the page is conform to a subset of WCAG. */
+      // TODO: We should use axe-core to validate WAI-ARIA conformity.
+      function expectWCAGConformity() {
+        // EXPECT: Conform to WAI-ARIA, all "menubar" should have 1 or more descendants of "menuitem".
+        [...document.querySelectorAll('[role="menubar"]')].forEach(menuBar =>
+          expect(menuBar.querySelectorAll('[role="menuitem"]').length).toBeTruthy()
+        );
+
+        // EXPECT: Conform to WAI-ARIA, all "menuitem" should be a descendant of "menu" or "menubar".
+        [...document.querySelectorAll('[role="menuitem"]')].forEach(menuItem => {
+          expect(
+            hasAncestor(menuItem, ancestor => {
+              const ancestorRole = ancestor.getAttribute('role');
+
+              return ancestorRole === 'menu' || ancestorRole === 'menubar';
+            })
+          ).toBeTruthy();
+        });
+      }
+
+      run(async function () {
+        const directLine = await testHelpers.createDirectLineWithTranscript([
+          {
+            attachments: [
+              {
+                contentType: 'application/vnd.microsoft.card.adaptive',
+                content: {
+                  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
+                  type: 'AdaptiveCard',
+                  version: '1.3',
+                  body: [
+                    {
+                      type: 'TextBlock',
+                      text: 'Do you want to take a survey?',
+                      size: 'Large',
+                      weight: 'Bolder',
+                      wrap: true
+                    },
+                    {
+                      type: 'ActionSet',
+                      actions: [
+                        {
+                          type: 'Action.Submit',
+                          title: 'Yes'
+                        },
+                        {
+                          type: 'Action.Submit',
+                          title: 'No'
+                        }
+                      ]
+                    },
+                    {
+                      type: 'TextBlock',
+                      text: 'Card action below',
+                      size: 'Large',
+                      weight: 'Bolder',
+                      wrap: true
+                    }
+                  ],
+                  actions: [
+                    {
+                      type: 'Action.Submit',
+                      title: 'Submit card'
+                    }
+                  ]
+                }
+              }
+            ],
+            from: {
+              id: 'bot',
+              role: 'bot'
+            },
+            id: '1',
+            timestamp: new Date().toISOString(),
+            type: 'message'
+          }
+        ]);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store: testHelpers.createStore(),
+            styleOptions: {
+              autoScrollSnapOnActivity: 1
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        await pageConditions.numActivitiesShown(1);
+        await pageConditions.scrollToBottomCompleted();
+
+        // GIVEN: There should be 2 set of `ac-actionSet` containers.
+        expect(document.querySelectorAll('.ac-actionSet')).toHaveLength(2);
+
+        // GIVEN: All `ac-actionSet` should have `[role="menubar"]`.
+        Array.from(document.querySelectorAll('.ac-actionSet')).every(actionSet =>
+          expect(actionSet.getAttribute('role')).toBe('menubar')
+        );
+
+        // GIVEN: All 'ac-pushButton' should not have "aria-pressed".
+        Array.from(document.querySelectorAll('.ac-pushButton')).every(pushButton =>
+          expect(pushButton.hasAttribute('aria-pressed')).toBe(false)
+        );
+
+        // GIVEN: The page should conform to WCAG.
+        expectWCAGConformity();
+
+        // WHEN: Clicking on the card action button ("Submit card").
+        await host.click(
+          Array.from(document.getElementsByClassName('ac-pushButton')).find(
+            pushButton => pushButton.innerText === 'Submit card'
+          )
+        );
+
+        // THEN: The first `ac-actionSet` should have `[role="menubar"]` untouched.
+        expect(document.querySelectorAll('.ac-actionSet')[0].getAttribute('role')).toBe('menubar');
+
+        // THEN: The second `ac-actionSet` should have `[role="menubar"]` removed.
+        expect(document.querySelectorAll('.ac-actionSet')[1].hasAttribute('role')).toBe(false);
+
+        // THEN: Selected `ac-pushButton` should have `aria-pressed` set to `true`.
+        Array.from(document.querySelectorAll('.ac-pushButton'))
+          .filter(pushButton => pushButton.innerText === 'Submit card')
+          .forEach(pushButton => expect(pushButton.getAttribute('aria-pressed')).toBe('true'));
+
+        // THEN: Only one button is selected.
+        expect(
+          Array.from(document.querySelectorAll('.ac-pushButton')).filter(
+            pushButton => pushButton.getAttribute('aria-pressed') === 'true'
+          )
+        ).toHaveLength(1);
+
+        // THEN: Non-selection should not have `aria-pressed` set.
+        Array.from(document.querySelectorAll('.ac-pushButton'))
+          .filter(pushButton => pushButton.innerText !== 'Submit card')
+          .forEach(pushButton => expect(pushButton.hasAttribute('aria-pressed')).toBeFalsy());
+
+        // THEN: The page should conform to WCAG.
+        expectWCAGConformity();
+
+        // WHEN: Click on the first action set button ("Yes")
+        await host.click(
+          Array.from(document.getElementsByClassName('ac-pushButton')).find(
+            pushButton => pushButton.innerText === 'Yes'
+          )
+        );
+
+        // THEN: The first `ac-actionSet` should have `[role="menubar"]` removed.
+        expect(document.querySelectorAll('.ac-actionSet')[0].hasAttribute('role')).toBe(false);
+
+        // THEN: Selected `ac-pushButton` should have `aria-pressed` set to `true`.
+        Array.from(document.querySelectorAll('.ac-pushButton'))
+          .filter(pushButton => pushButton.innerText === 'Yes')
+          .forEach(pushButton => expect(pushButton.getAttribute('aria-pressed')).toBe('true'));
+
+        // THEN: Two buttons are selected.
+        expect(
+          Array.from(document.querySelectorAll('.ac-pushButton')).filter(
+            pushButton => pushButton.getAttribute('aria-pressed') === 'true'
+          )
+        ).toHaveLength(2);
+
+        // THEN: The page should conform to WCAG.
+        expectWCAGConformity();
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  test('Adaptive Card should apply aria-pushed="true" after clicking a button', () =>
+    runHTML('accessibility.adaptiveCard.ariaPushed.html'));
+});
@@ -2,28 +2,19 @@ import { DirectLineCardAction } from 'botframework-webchat-core';
 
 import FunctionMiddleware, { CallFunction } from './FunctionMiddleware';
 
-type PerformCardAction = CallFunction<
-  [
-    {
-      cardAction: DirectLineCardAction;
-      getSignInUrl?: () => string;
-      target: any;
-    }
-  ],
-  void
->;
+type PerformCardActionParameter = {
+  cardAction?: DirectLineCardAction;
+  displayText?: string;
+  getSignInUrl?: () => string;
+  target?: any;
+  text?: string;
+  type?: string;
+  value?: any;
+};
 
-type CardActionMiddleware = FunctionMiddleware<
-  [{ dispatch: (action: any) => void }],
-  [
-    {
-      cardAction: DirectLineCardAction;
-      getSignInUrl?: () => string;
-      target: any;
-    }
-  ],
-  {}
->;
+type PerformCardAction = CallFunction<[PerformCardActionParameter], void>;
+
+type CardActionMiddleware = FunctionMiddleware<[{ dispatch: (action: any) => void }], [PerformCardActionParameter], {}>;
 
 export default CardActionMiddleware;