Accessibility Issue - Screen reader reads adaptive card content as "attachment"

We are using webchat-es5.js for our Virtual assistant and our customers are using NVDA screen reader to access it. The screen reads the normal card and user messages properly. But for Adaptive card, it reads as “Bullet A Card” , “one attachment on date time” instead of reading the content. When checked the DOM, the adaptive card has aria-roledescription=“attachment” which triggers screen reader to read it as attachment.

Screenshots

Version

webchat es5 version 4.11.0 https://cdn.botframework.com/botframework-webchat/4.11.0/webchat-es5.js Integrating the CDN version js directly on the page using script tag (No Iframe). Desktop Chrome Browser.

<meta name="botframework-directlinespeech:version" content="4.11.0">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.11.0">
<meta name="botframework-webchat:core:version" content="4.11.0">
<meta name="botframework-webchat:ui:version" content="4.11.0">

Describe the bug

We are using webchat-es5.js for our Virtual assistant and our customers are using NVDA screen reader to access it. The Virtual Assistant is web app bot developed using VA template that uses QnA/LUIS cognitive services. The screen reader reads normal card text and user input text. But if Bot response is adaptive card, then it reads as “Bullet A Card”, “one attachment received on date time” instead of reading the card content. The adaptive card has a message and few buttons.

Steps to reproduce

1. Deploy Web App Bot with adaptive cards.
2. Start NVDA screen reader or JAWS 2021 screen reader.
3. Open the web app bot on browser.
4. Interact with the bot till the adaptive card response arrives.
5. Observe how the screen reader reads the bot response.

Expected behavior

The screen reader should read the adaptive card content along with control texts (Button labels). The DOM should render adaptive card response in div with attribute aria-roledescription=“message” instead of aria-roledescription=“attachment”

Please advice if any other fix to make the screen reader to read the adaptive card content. [Bug]

[v-kydela]

@corinagum - I did not modify @venkatx5’s JSON:

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "id": "firstresponse",
      "text": "I am sorry, I am not able to understand your question. Can you please rephrase your question or click on �Return to main menu� button to go to main menu and navigate the categories to find a question that I can answer. If I can�t answer your question, I can..."
    },
    {
      "type": "TextBlock",
      "id": "secondresponse",
      "text": "I am sorry, I am not able to understand your question. Can you please rephrase your question or click on �Return to main menu� button to go to main menu and navigate the categories to find a question that I can answer. If I can�t answer your question, I can connect you with a live agent. Our agents are available on 9:00 AM to 5:00 PM CST. Please check during these hours.",
      "isVisible": false
    },
    {
      "id": "showmorebtns",
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.ToggleVisibility",
          "targetElements": [
            {
              "elementId": "firstresponse",
              "isVisible": false
            },
            {
              "elementId": "secondresponse",
              "isVisible": true
            },
            {
              "elementId": "showmorebtns",
              "isVisible": false
            },
            {
              "elementId": "hidemorebtns",
              "isVisible": true
            }
          ],
          "title": "Read more"
        }
      ]
    },
    {
      "id": "hidemorebtns",
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.ToggleVisibility",
          "targetElements": [
            {
              "elementId": "secondresponse",
              "isVisible": false
            },
            {
              "elementId": "showmorebtns",
              "isVisible": true
            },
            {
              "elementId": "firstresponse",
              "isVisible": true
            },
            {
              "elementId": "hidemorebtns",
              "isVisible": false
            }
          ],
          "title": "Read less"
        }
      ],
      "isVisible": false
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "id": "return",
      "data": "Return to main menu",
      "title": "Return to main menu"
    }
  ]
}

[v-kydela]

@corinagum - I just did it in Emulator so it’s easier to repro, but this is the same behavior that’s in Web Chat:

https://user-images.githubusercontent.com/41968495/105538272-03074000-5ca8-11eb-82a2-5ebfd2570394.mp4