[Rendering] Accessibility issue on card actions (menubar without menuitem)

[compulim]

This is filed from Web Chat #3949

Target Platform

Please list the platform(s) that your application is targeting and remove platforms you are not targeting:

• NodeJS

Target Application

Adaptive Cards Designer

Web Chat (>= 4.14.0, currently a daily build)

Problem Description

Our card has one card action. When it is rendered:

<div class="ac-actionSet" role="menubar" style="display: flex; flex-direction: column; align-items: stretch">
  <button
    aria-label="Submit card"
    type="button"
    role="button"
    class="ac-pushButton style-default x-hidden-focus"
    style="display: flex; align-items: center; justify-content: center; flex: 0 1 auto"
  >
    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">Submit card</div>
  </button>
</div>

The "card action container" has role of menubar. But the <button> has a role of button. That means, it's violating a WAI-ARIA rule that:

• All menubar must have at least 1 or more descendants (or owned element) of role menuitem, menuitemradio, menuitemcheckbox
  • https://www.w3.org/TR/wai-aria/#menubar, see the "Required Owned Elements" characteristic for required ownership
    • Excerpt: group -> menuitemradio, menuitem, menuitemcheckbox, menuitemradio
  • https://www.w3.org/TR/wai-aria/#mustContain, the definition of "Required Owned Elements"
    • Excerpt: "When multiple roles are specified as required owned elements for a role, at least one instance of one required owned element is expected."

The container has role of menubar but it does not contain any menuitem roles.

Screenshot

Card JSON

Expand to see the card 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"
    }
  ]
}

Sample Code

Two ways to try it out:

• (Preferred) Open it in Adaptive Card Designer in Preview Mode
• Load it in https://compulim.github.io/adaptive-card-loader/ (currently 2.9.0)
  • Source code in https://github.com/compulim/adaptive-card-loader/

Version of SDK

Repro in 2.9.0.

Does not repro in 2.5.0.

[jonmill]

@golddove - do you know if this was done on purpose or if this is a regression?

[golddove]

@jonmill doesn't look like its on purpose (no reason for ActionSet and top-level Actions to have different aria treatment)

[jonmill]

Gotcha, sounds like we regressed then. I'll add this to our accessibility roadmap. Thanks for finding this @compulim!

[pcreehan]

We have this problem as well and causes a lot of pain for our vision-impaired customers. Please fix soon. @dclaux

[corinagum]

@jonmill @golddove is there a timeline for a fix for this one? We're also running into audit problems on my team.

[paulcam206]

per sync with partner team, bumping this up to high priority

@jonmill - 👀