Announce card action buttons as buttons, describe pressed actions as Selected (#5900)

* Name Action.ShowCard as the exception in Adaptive Card hack comments

The comments named Action.ShowUrl, but the code exempts buttons with
aria-expanded, which is Action.ShowCard.

* Announce card action buttons as buttons, describe pressed actions as Selected

Card action buttons had aria-pressed, so screen readers announced them as
toggle buttons that never turn off (#5716, #5719, #5745, #5750). They are now
plain buttons; pressed actions are described as "Selected" via
aria-describedby, which keeps the choice announced (#3622), and is styled
via the adaptive-card-renderer__action--selected class instead of
[aria-pressed='true'] in the default and Fluent themes.

* Add PR number to changelog

* Select card actions only after Adaptive Cards performed them

An Action.Submit whose required inputs fail validation is not executed by
Adaptive Cards, but the capture-phase click handler still marked it as
selected. Mark the action from onExecuteAction instead.

* Shorten the changelog entry

* Snapshot every key step in ariaPushed.html

* Wait for the live region to clear before the accessibility check in selectedAction.validation.html

* Move the changelog entry to .changelog/

---------

Co-authored-by: Eugene Olonov <eugeneolonov@microsoft.com>

Author: OEvgeny

.changelog/5900-fix-card-action-pressed-state.md

@@ -0,0 +1,7 @@
+### Changed
+
+- 💥 Card action buttons the user pressed are styled with the `adaptive-card-renderer__action--selected` class instead of `[aria-pressed='true']`: host CSS that targets `.ac-pushButton[aria-pressed='true']` should target `.ac-pushButton.adaptive-card-renderer__action--selected` instead, in PR [#5900](https://github.com/microsoft/BotFramework-WebChat/pull/5900), by [@OEvgeny](https://github.com/OEvgeny)
+
+### Fixed
+
+- Fixed [#4583](https://github.com/microsoft/BotFramework-WebChat/issues/4583), [#5716](https://github.com/microsoft/BotFramework-WebChat/issues/5716), [#5719](https://github.com/microsoft/BotFramework-WebChat/issues/5719), [#5745](https://github.com/microsoft/BotFramework-WebChat/issues/5745), and [#5750](https://github.com/microsoft/BotFramework-WebChat/issues/5750), card action buttons being announced as toggle buttons, and Submit being marked as selected when the card's inputs fail validation, in PR [#5900](https://github.com/microsoft/BotFramework-WebChat/pull/5900), by [@OEvgeny](https://github.com/OEvgeny)

__tests__/html2/accessibility/adaptiveCard/ariaPushed.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <link href="/assets/index.css" rel="stylesheet" type="text/css" />
@@ -8,30 +8,29 @@
   </head>
   <body>
     <main id="webchat"></main>
-    <script>
-      function createActivity(text) {
-        return {
-          from: { role: 'bot' },
-          id: Math.random().toString(36).substr(2, 5),
-          text,
-          timestamp: new Date().toISOString(),
-          type: 'message'
-        };
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
+        }
       }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
 
-      /** Checks if the element has an ancestor that fulfill the predicate. */
-      function hasAncestor(element, predicate) {
-        let current = element.parentElement;
+      async function getSelectedButtonTexts() {
+        const selectedButtonTexts = [];
 
-        while (current) {
-          if (predicate.call(element, current)) {
-            return true;
-          }
+        for (const pushButton of document.querySelectorAll('.ac-pushButton')) {
+          const { description, properties } = await testHelpers.getAccessibilityNode(pushButton);
 
-          current = current.parentElement;
+          // Action buttons are plain buttons, not toggle buttons.
+          expect(properties?.find(({ name }) => name === 'pressed')).toBeUndefined();
+
+          description?.value === 'Selected' && selectedButtonTexts.push(pushButton.innerText);
         }
 
-        return false;
+        return selectedButtonTexts;
       }
 
       run(async function () {
@@ -97,7 +96,8 @@
             directLine,
             store: testHelpers.createStore(),
             styleOptions: {
-              autoScrollSnapOnActivity: 1
+              autoScrollSnapOnActivity: 1,
+              hideSendBox: true
             }
           },
           document.getElementById('webchat')
@@ -107,53 +107,68 @@
         await pageConditions.numActivitiesShown(1);
         await pageConditions.scrollToBottomCompleted();
 
-        // SETUP: Focus on the send box.
-        await pageObjects.focusSendBoxTextBox();
-
         // SETUP: There should be 2 set of `ac-actionSet` containers.
         expect(document.querySelectorAll('.ac-actionSet')).toHaveLength(2);
 
-        // SETUP: All 'ac-pushButton' should not have `aria-pressed="true"`.
-        Array.from(document.querySelectorAll('.ac-pushButton')).every(pushButton =>
-          expect(pushButton.hasAttribute('aria-pressed')).not.toBe('true')
-        );
+        // SETUP: No 'ac-pushButton' should be selected.
+        expect(await getSelectedButtonTexts()).toEqual([]);
+
+        // SETUP: Focus on the transcript, the card is the last and only activity.
+        pageObjects.focusTranscript();
+
+        // WHEN: Pressing ENTER to focus inside the card.
+        await host.sendKeys('ENTER');
+
+        // THEN: The "Yes" button should have focus and nothing should be selected.
+        await waitFor(() => expect(document.activeElement).toHaveProperty('innerText', 'Yes'));
+        expect(await getSelectedButtonTexts()).toEqual([]);
+        await host.snapshot('local');
+
+        // WHEN: Pressing TAB.
+        await host.sendTab();
+
+        // THEN: The "No" button should have focus.
+        await waitFor(() => expect(document.activeElement).toHaveProperty('innerText', 'No'));
+        await host.snapshot('local');
+
+        // WHEN: Pressing TAB.
+        await host.sendTab();
+
+        // THEN: The "Submit card" button should have focus.
+        await waitFor(() => expect(document.activeElement).toHaveProperty('innerText', 'Submit card'));
+        await host.snapshot('local');
+
+        // WHEN: Pressing ENTER on the "Submit card" button.
+        await host.sendKeys('ENTER');
+
+        // THEN: Only the "Submit card" button should be selected, and it should keep focus.
+        expect(document.activeElement).toHaveProperty('innerText', 'Submit card');
+        await waitFor(() => expect(document.activeElement.hasAttribute('aria-describedby')).toBe(true)); // "Selected" description attached
+        expect(await getSelectedButtonTexts()).toEqual(['Submit card']);
+        await host.snapshot('local');
+
+        // WHEN: Pressing SHIFT-TAB.
+        await host.sendShiftTab();
+
+        // THEN: The "No" button should have focus, the "Submit card" button should stay selected.
+        await waitFor(() => expect(document.activeElement).toHaveProperty('innerText', 'No'));
+        await host.snapshot('local');
+
+        // WHEN: Pressing SHIFT-TAB.
+        await host.sendShiftTab();
+
+        // THEN: The "Yes" button should have focus, the "Submit card" button should stay selected.
+        await waitFor(() => expect(document.activeElement).toHaveProperty('innerText', 'Yes'));
+        await host.snapshot('local');
 
-        // WHEN: Clicking on the card action button ("Submit card").
-        await host.sendShiftTab(3);
-        await host.sendKeys('ENTER', 'TAB', 'TAB', 'ENTER');
-
-        // 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.getAttribute('aria-pressed')).not.toBe('true'));
-
-        // WHEN: Click on the first action set button ("Yes")
-        await host.sendShiftTab(2);
+        // WHEN: Pressing ENTER on the "Yes" button.
         await host.sendKeys('ENTER');
 
-        // 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: Both the "Yes" and "Submit card" buttons should be selected, the "Yes" button should keep focus.
+        expect(document.activeElement).toHaveProperty('innerText', 'Yes');
+        await waitFor(() => expect(document.activeElement.hasAttribute('aria-describedby')).toBe(true)); // "Selected" description attached
+        expect(await getSelectedButtonTexts()).toEqual(['Yes', 'Submit card']);
+        await host.snapshot('local');
       });
     </script>
   </body>

__tests__/html2/accessibility/adaptiveCard/ariaPushed.html.snap-1.png

@@ -9,6 +9,10 @@
   <body>
     <main id="webchat"></main>
     <script>
+      async function getDescription(element) {
+        return (await testHelpers.getAccessibilityNode(element)).description?.value;
+      }
+
       run(async function () {
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
@@ -50,40 +54,50 @@
         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-pressed')).toBe(false);
+        expect(await getDescription(firstPushButton)).toBeUndefined();
         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(await getDescription(secondPushButton)).toBeUndefined();
         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');
+        expect(firstPushButton.hasAttribute('aria-pressed')).toBe(false);
+        expect(await getDescription(firstPushButton)).toBe('Selected');
 
         await host.click(secondPushButton);
 
+        // `Action.ShowCard` is never selected, its state is indicated by `aria-expanded`.
+        expect(secondPushButton.getAttribute('aria-expanded')).toBe('true');
+        expect(await getDescription(secondPushButton)).toBeUndefined();
+
         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-pressed')).toBe(false);
+        expect(await getDescription(thirdPushButton)).toBeUndefined();
         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');
+        expect(thirdPushButton.hasAttribute('aria-pressed')).toBe(false);
+        expect(await getDescription(thirdPushButton)).toBe('Selected');
 
         await WebChat.renderWebChat({ directLine, disabled: true, store }, document.getElementById('webchat'));
 
         await host.click(fourthPushButton);
 
-        expect(fourthPushButton.getAttribute('aria-pressed')).toBe('false');
+        expect(fourthPushButton.hasAttribute('aria-pressed')).toBe(false);
+        expect(await getDescription(fourthPushButton)).toBeUndefined();
       });
     </script>
   </body>