{Linked:Bug1657333}[Adaptive Cards > Designer] - Incorrect role as 'Link' is defined for the 'Register and View More' button.

[vagpt]

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/designer/
OS Version: 23H2 (OS Build 25977.1000)
Browser Version: Version 120.0.2186.2 (Official build) dev (64-bit)
Screen Reader: NVDA
Tool: Accessibility Insight For Web

Pre-Requisite:
Run the below attached JSON file under 'Copy Card Payload editor.'

Repro Steps:

1. Open the above URL on the EDGE Dev browser.
2. Run the Json file.
3. Navigate to the Preview mode and press enter key to activate it.
4. Run the tool and switch the toggle On for the heading and observe the issue.

Actual Result:
Visually appearing as heading 'Our recommendation for you!' is not defined as heading present in the Flyout.

Expected Result:
'Our recommendation for you!' label should be defined as heading so that screen reader can announce as 'Our recommendation for you! heading'.

User Impact:
Users who rely on Screen reader will be impacted as Heading tag is not provided for 'Our recommendation for you!' which is visually looks like heading and screen readers is not announcing the heading information for the Our recommendation for you!.

WCAG Reference Link:
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Have feedback to share on Bugs? Please help fill [Trusted Tester Bug Feedback (office.com)]
(https://nam06.safelinks.protection.outlook.com/?url=https://forms.office.com/pages/responsepage.aspx?id%3Dv4j5cvGGr0GRqy180BHbR5dUqGQgJ9lItv-jqY8F09lURVdYTENIRkY2UzlCR0NKV1E2VUE5OVpDVy4u&data=04%7c01%7cv-chisha%40microsoft.com%7c1334b110f98744a7f5df08d968eb842b%7c72f988bf86f141af91ab2d7cd011db47%7c1%7c0%7c637656183104980596%7cUnknown%7cTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7c1000&sdata=r4ndSHk/LrBDwzi7FO%2BjKN0DCnqUSUcELBvGRkgc5CU%3D&reserved=0)"

Screenshots

Card JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "size": "large",
                    "text": "Our recommendation for you!",
                    "color": "accent",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "text": "Based on your organizational needs",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "[Microsoft Azure Administrator]()",
                    "weight": "Bolder",
                    "wrap": true
                },
                {
                    "type": "RichTextBlock",
                    "inlines": [
                        {
                            "type": "TextRun",
                            "text": "Date: "
                        },
                        {
                            "type": "TextRun",
                            "text": "Dec 04, 2023 - Dec 29, 2023",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "RichTextBlock",
                    "inlines": [
                        {
                            "type": "TextRun",
                            "text": "Time: "
                        },
                        {
                            "type": "TextRun",
                            "text": "09:00 AM - 05:00 PM (GMT+01:00) Brussels, Copenhagen, Madrid, Paris",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "RichTextBlock",
                    "inlines": [
                        {
                            "type": "TextRun",
                            "text": "Language: "
                        },
                        {
                            "type": "TextRun",
                            "text": "English",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "RichTextBlock",
                    "inlines": [
                        {
                            "type": "TextRun",
                            "text": "Delivery ID: "
                        },
                        {
                            "type": "TextRun",
                            "text": "36877",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "Register ",
                            "label": "Register link opens in a new tab",
                            "url": "#"
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View More \uF35F",
            "url": "#"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

Sample Code Language

No response

Sample Code

No response

[vagpt]

Originally tracked using below URL.

https://dev.azure.com/worldwidelearning/WWL%20Accessibility/_workitems/edit/1657333

[vagpt]

Hi @anna-dingler,

Could you please provide any update on this bug or provide SLA for this bug?

As we are getting below comment from WWL team,

[anna-dingler]

Hi @vagpt,

Looks like the title of the bug is incorrect?

For the heading issue, the card author can use "style": "heading" property for the TextBlock to get the expected behavior.

For example:

{
    "type": "TextBlock",
    "size": "Large",
    "text": "Our recommendation for you!",
    "color": "Accent",
    "wrap": true,
    "style": "heading"
}

Let me know if you have any questions!
Anna