Adaptive Cards: Action set with role="menubar" must have 1 or more descendants with role="menuitem".

[compulim]

This is not same as #3947. This one related to initial render by Adaptive Card. #3947 related to our hacks after rendering.

Version

main which is using [email protected].

Also repro on Adaptive Cards Designer independently.

Not repro on [email protected] which was used by 4.13.0.

Describe the bug

Our customer reported that all elements with role="menubar" must have 1 or more descendants of element with role="menuitem".

According to WAI-ARIA:

• menubar has "Required Owned Elements" of menuitem, menuitemcheckbox, menuitemradio (under or not under group)
  • See here, https://www.w3.org/TR/wai-aria/#menubar
• "Required Owned Elements" means, the role must contains 1 or more elements of 1 of the types
  • See here, https://www.w3.org/TR/wai-aria/#mustContain
  • Excerpt: "When multiple roles are specified as required owned elements for a role, at least one instance of one required owned element is expected."

Action.Submit buttons generated by card.actions is contained in a menubar. That menubar does not fulfill the "Required Owned Elements". This is because the action generated is a button, instead of menuitem.

Steps to reproduce

Put the card in Adaptive Card Designer. Enable "Preview Mode". Then, inspect the DOM tree.

Expand to see the Adaptive Cards JSON

{
  "$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"
    }
  ]
}

Expected behavior

All elements with role="menubar" must have 1 or more descendants of element with role="menuitem".

(This screenshot is taken from Adaptive Cards Designer in Preview Mode)

Additional context

[Bug]

[tvvignesh]

@compulim Hi. I had an issue where the adaptive card froze after responding randomly and I was debugging the issue and I narrowed it down here

I added a log and this is the error I get in dev tools

Its not able to find the element using querySelectorAll and thus fails to execute the next JS function.