{Linked:Bug554360}[Feature Request] Support for aria-label at the root level of the adaptive-card

Problem Statement

Target Platforms

Web (Javascript)

Host App

Microsoft Search

SDK Version

"adaptivecards": "2.9.0"

Problem

Our search application renders search results using adaptive card layouts. When accessed via keyboard, the expected behavior is for the screen reader to announce the title of the search result. However, due to the lack of support for aria-label or similar properties at the root level, this is not currently possible, making it difficult for users who rely on screen readers.

Test environment

https://searchlayoutdesigner.azurewebsites.net/chooseLayout

Sample template json

{
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://searchuxcdn.blob.core.windows.net/designerapp/images/DefaultMRTIcon.png",
                            "size": "small",
                            "horizontalAlignment": "center",
                            "altText": "Result logo"
                        }
                    ],
                    "height": "stretch"
                },
                {
                    "type": "Column",
                    "width": 8,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[${title}](${titleUrl})",
                            "color": "accent",
                            "size": "medium",
                            "weight": "bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "**${modifiedBy}** modified {{DATE(${modifiedTime})}}",
                            "spacing": "small",
                            "$when": "${modifiedBy!='' && modifiedTime!=''}"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Modified on {{DATE(${modifiedTime})}}",
                            "spacing": "small",
                            "$when": "${modifiedBy=='' && modifiedTime!=''}"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Modified by __${modifiedBy}__",
                            "spacing": "small",
                            "$when": "${modifiedBy!='' && modifiedTime==''}"
                        },
                        {
                            "type": "TextBlock",
                            "text": "${description}",
                            "wrap": true,
                            "maxLines": 3,
                            "spacing": "medium"
                        }
                    ],
                    "horizontalAlignment": "Center",
                    "spacing": "medium"
                },
                {
                    "type": "Column",
                    "width": 2,
                    "items": [
                        {
                            "type": "Image",
                            "url": "${imageUrl}",
                            "altText": "Result logo",
                            "size": "medium",
                            "horizontalAlignment": "right"
                        }
                    ],
                    "$when": "${imageUrl != ''}"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Proposed solution

Add support for aria-Label at root level.

Example

{
    "type": "AdaptiveCard",
    "version": "1.3",
    "aria-label": "${title}, by ${author}",
    "body": [
    (...template)
    ],
}

Alternatives or Workarounds

No response

Start with the Web (Javascript) renderer and the supplied AdaptiveCard template, then trace how root-level properties and existing accessibility behavior such as Image altText are handled. Done means the proposed root-level aria-label is supported for the described screen-reader scenario and the behavior is covered by an appropriate renderer test.