BotFramework-WebChat icon indicating copy to clipboard operation
BotFramework-WebChat copied to clipboard
verified publisher icon microsoft

Verify screen reader behavior on Adaptive Card

Open compulim opened this issue 5 years ago • 2 comments

Screenshots

Version

4.12.0-0 with AC 2.5.0.

Describe the bug

While testing transcript navigation, one of the screen reader behaviors around Adaptive Cards seems off.

We would need to repro this on a page outside of Web Chat. If it still repro, will bring it to the accessibility team to verify.

Steps to reproduce

AC card should be read if the user focus into it

  1. Build a plain HTML page
  2. Put a button "Hello"
  3. Append a AC container with a card, with at least one textblock "Aloha", followed by one button (e.g. card breakfast)
  4. Run the page with screen reader
  5. TAB into the first button "Hello"
  • Expect: AT should narrate the content of the button, i.e. "Hello button".
  1. Press TAB again and it should focus the first input element in the AC
  • Expect: AT should narrate the content of the card, i.e. "Aloha".

Additional context

[Bug]

compulim avatar Feb 19 '21 20:02 compulim

add to playground or potentially 'Web Chat tools' package

corinagum avatar Mar 10 '21 23:03 corinagum

Hi @compulim

I attempted to verify screen reader behavior for Adaptive Card using Windows built-in Narrator text-to-speech software.

Expectation behavior:

  1. Expect: AT should narrate the content of the button, i.e. "Hello button".
  2. Press TAB again and it should focus the first input element in the AC
  3. Expect: AT should narrate the content of the card, i.e. "Aloha".
  1. Verified
  2. After pressing the tab key, it goes straight to step 3 and reads the content "aloha" in AC
  3. Verified

Video demo

Volume up

https://user-images.githubusercontent.com/38049078/167686822-4f32f465-f707-429e-a58a-ff59d16e499d.mp4

Sharing my index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script>
    <title>Document</title>
  </head>
  <body>
    <button>Hello</button>
    <script
      type="text/javascript"
      src="https://unpkg.com/markdown-it/dist/markdown-it.js"
    ></script>
    <script type="text/javascript">
      // adaptive card object
      var card = {
        $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
        type: "AdaptiveCard",
        version: "1.0",
        body: [
          {
            type: "Container",
            items: [
              {
                type: "TextBlock",
                text: "Aloha",
              },
            ],
          },
        ],
        actions: [
          {
            type: "Action.Submit",
            title: "Pickup",
            tooltip: "Schedule order for pickup",
          },
        ],
      };

      // Create an AdaptiveCard instance
      var adaptiveCard = new AdaptiveCards.AdaptiveCard();

      // Enable markdown
      AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
        result.outputHtml = markdownit().render(text);
        result.didProcess = true;
      };

      // Parse the card payload
      adaptiveCard.parse(card);

      // Render the card to an HTML element:
      var renderedCard = adaptiveCard.render();

      // And finally insert it somewhere in your page:
      document.body.appendChild(renderedCard);
    </script>
  </body>
</html>

any additional steps I shall take to verify the screen reader behavior on Adaptive Card? Thanks.

ram-xv avatar May 10 '22 17:05 ram-xv