microsoft / microsoft/AdaptiveCards

[Accessibility - AdaptiveActionSet] Element must only use allowed ARIA attribute. ARIA attribute is not allowed: aria-expanded="true"

Open
#8,602 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Renderers Bug
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

Other

SDK Version

1.4

Application Name

Microsoft Teams, PowerApps Cards

Problem Description

There is an accessibility bug when the AdaptiveActionSet that is expandable gets expanded.

Element must only use allowed ARIA attribute. ARIA attribute is not allowed: aria-expanded="true"

Screenshots

image

image

Card JSON
{
    "type": "AdaptiveCard",
    "version": "1.4",
    "body": [
      {
        "type": "ColumnSet",
        "columns": [
          {
            "type": "Column",
            "width": "stretch",
            "items": [],
            "spacing": "none"
          },
          {
            "type": "Column",
            "width": "auto",
            "items": [
              {
                "type": "Image",
                "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4je3Nuw0AIAxDQYs9oLD3H4hpTAuIgk9DkSufIgcI4UMkC8ly0wAgzUe2q+0qKZ+05WDHD20kKc9fd1sIv2iTNSNgsXCyPwAAAABJRU5ErkJggg==",
                "selectAction": {
                  "type": "Action.ToggleVisibility",
                  "targetElements": [
                    "systemMenu"
                  ]
                },
                "altText": "Action Items",
                "width": "16px"
              }
            ],
            "verticalContentAlignment": "bottom",
            "spacing": "none"
          }
        ],
        "spacing": "none"
      },
      {
        "id": "systemMenu",
        "type": "ActionSet",
        "actions": [
          {
            "type": "Action.Execute",
            "associatedInputs": "none",
            "verb": "about",
            "title": "About"
          },
          {
            "type": "Action.Execute",
            "associatedInputs": "none",
            "verb": "flush",
            "title": "Flush"
          },
          {
            "type": "Action.Execute",
            "associatedInputs": "none",
            "verb": "show",
            "title": "Refresh"
          }
        ],
        "isVisible": false
      },
      {
        "type": "TextBlock",
        "id": "textLabel1",
        "size": "medium",
        "weight": "bolder",
        "text": "Your card title goes here"
      },
      {
        "type": "TextBlock",
        "id": "textLabel2",
        "text": "Add and remove element to customize your new card.",
        "wrap": true
      },
      {
        "type": "TextBlock",
        "text": "ab4948e5-3128-4d07-81fd-239695c1a67c",
        "isVisible": false
      }
    ],
    "refresh": {
      "action": {
        "type": "Action.Execute",
        "associatedInputs": "none",
        "verb": "show",
        "title": "Refresh"
      }
    },
    "debug": {
      "main": "main"
    },
    "msteams": {
      "width": "Full"
    }
  }
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the expandable AdaptiveActionSet behavior using the supplied Adaptive Card JSON and reproduce the accessibility error when it expands. Trace where aria-expanded="true" is produced, then verify that the expanded card no longer reports an invalid ARIA attribute in the accessibility check.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.