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

[abdulrehman-msft]

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

[abdulrehman-msft]

@matthidinger - could you please help us with this?