{Linked:Bug13897389}[Adaptive Cards > Designer] - Screen readers are not announcing the tooltip information that appears after providing invalid email address.

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/designer/
OS Version: 24H2 (OS Build 27766.1000)
Browser Version: Version 132.0.2186.2 (Official build) dev (64-bit)
Screen Reader: Narrator

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. Press tab key and navigate to the 'Guest Email Address' edit field and observe the issue,

Actual Result:
Screen readers are not announcing the tooltip information that appears after providing invalid email address.
Both Narrator and NVDA announces as 'Guest email address Please enter a valid email address edit required invalid entry 123'.

Expected Result:
Screen readers should announce the tooltip information that appears after providing invalid email address.
Ensure: Both NVDA and Narrator should announce as 'Guest email address Please enter a valid email address edit required invalid entry 123 Please include an '@' in the email address. '123' is missing an '@'.

Note:
Same issue is repro with NVDA.

User Impact:
Users who rely on the screen readers are getting impacted if Screen readers are not announcing the tooltip information that appears after providing invalid email address.

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

Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.

Screenshots

https://github.com/user-attachments/assets/f9d9201d-a8ea-47e0-b955-8456e11a8fd9

Card JSON

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "body": [
        {
            "type": "TextBlock",
            "text": "Alright, can you please help me with the following details about your invite along with guest details?",
            "wrap": true,
            "weight": "Bolder",
            "size": "default",
            "separator": true
        },
        {
            "type": "Input.ChoiceSet",
            "id": "meetingType",
            "label": "Select the invite type that suits your purpose.",
            "style": "expanded",
            "isRequired": true,
            "errorMessage": "Meeting purpose selection is required",
            "value": "Topic.MeetingTypeAuto",
            "choices": "ForAll(Topic.MeetingType,{title:ThisRecord.Value,value:ThisRecord.Value})"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "buildingName",
            "label": "Where do you want to meet your guest?",
            "placeholder": "Select a building",
            "style": "compact",
            "isRequired": true,
            "value": "Topic.BuildingNameAuto",
            "errorMessage": "Building selection is required",
            "choices": "ForAll(Global.AllBuildings,{title:ThisRecord.Value,value:ThisRecord.Value})"
        },
        {
            "type": "Input.Text",
            "id": "guestFirstName",
            "label": "Guest first name",
            "placeholder": "Enter here",
            "isRequired": true,
            "errorMessage": "First name is required",
            "value": "Topic.FirstNameAuto"
        },
        {
            "type": "Input.Text",
            "id": "guestLastName",
            "label": "Guest last name",
            "placeholder": "Enter here",
            "isRequired": true,
            "errorMessage": "Last name is required",
            "value": "Topic.LastNameAuto"
        },
        {
            "type": "Input.Text",
            "id": "guestEmail",
            "label": "Guest email address",
            "placeholder": "Enter email address",
            "style": "Email",
            "isRequired": true,
            "regex": "^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$",
            "value": "Topic.EmailIdAuto",
            "errorMessage": "Please enter a valid email address"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "id": "createVisit",
            "title": "Submit",
            "associatedInputs": "auto"
        }
    ]
}

Sample Code Language

No response

Sample Code

Tracking with https://dev.azure.com/MicrosoftIT/OneITVSO/_workitems/edit/13897389

Open https://adaptivecards.io/designer/ and load the Card JSON from the issue, then reproduce the invalid Guest Email Address state with Narrator and NVDA. Compare the announcements with the expected wording in the issue; done means both screen readers announce the tooltip information, including the missing '@' guidance.