microsoft
{Linked:Bug6381724}[Adaptive Cards - Customer Credit Request]: All the edit form fields are not associated with their respective labels.
Target Platforms
Other
SDK Version
105.0.1300.0
Application Name
Adaptive Cards
Problem Description
Test Environment: OS Version: Dev (OS build 21390.1) Browser Version: 93.0.961.10 (Official build) dev(64-bit) URL: Designer | Adaptive Cards Screen Reader: Narrator
Pre-requisites: Copy the complete json code in ''Card Payload Editor". (Please refer attachment).
Repro Steps: Launch the above URL. Navigate to header control ‘Designer’ using tab key and activate through enter key. Navigate through the edit fields present. Observe the issue.
Actual Result: All the edit form fields are not associated with their respective labels.
Expected Result: All the edit form fields should be associated with their respective labels.
Observation: Issue is also repro with JAWS and NVDA.
User Experience: Screen readers users will face difficulty if All the edit form fields are not associated with their respective labels.
MAS Reference: Headings and Labels - Liquid (microsoft.com)
Have feedback to share on Bugs ? Please help fill Trusted Tester Bug Feedback (office.com) “
Screenshots
https://user-images.githubusercontent.com/96283152/181273116-5c4b68ab-9ba6-465c-aeae-f20560414809.mp4
https://user-images.githubusercontent.com/96283152/181274364-74644888-8912-4327-9192-9fb0b03c5837.mp4
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Please enter the below details to create Customer Credit request",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"text": "Invoices (Number - Amount(Currency)) *",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "InvoiceNumber",
"style": "expanded",
"isMultiSelect": true,
"choices": []
},
{
"type": "TextBlock",
"text": "Total Number of Hours to be Billed",
"wrap": true
},
{
"type": "Input.Number",
"id": "InvoiceHours"
},
{
"type": "TextBlock",
"text": "Total Number of Units to be Billed",
"wrap": true,
"isVisible": "${HasUnitBasedDemands}"
},
{
"type": "Input.Number",
"id": "InvoiceUnits",
"isVisible": "${HasUnitBasedDemands}"
},
{
"type": "TextBlock",
"text": "Total Amount of Expenses to be billed",
"id": "InvoiceAmountTextBlock",
"wrap": true
},
{
"type": "Input.Number",
"id": "InvoiceAmount"
},
{
"type": "TextBlock",
"text": "Transaction From Date"
},
{
"type": "Input.Date",
"id": "FromDate"
},
{
"type": "TextBlock",
"text": "Transaction To Date"
},
{
"type": "Input.Date",
"id": "ToDate"
},
{
"type": "TextBlock",
"text": "Comments",
"wrap": true
},
{
"type": "Input.Text",
"id": "Comments",
"isMultiline": true,
"isRequired": true
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "CreditRequest_Submit"
}
}
]
}
Sample Code Language
No response
Sample Code
No response
Hello @Shireen2000,
This bug is fixed in schema 1.3 with the addition of the label property. By using labels for Inputs instead of TextBlocks, the form fields will be correctly associated with the text and Narrator should not have an issue.
Here is an example of the modified card payload.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 2,
"items": [
{
"type": "TextBlock",
"text": "Please enter the below details to create Customer Credit request",
"weight": "bolder",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "InvoiceNumber",
"style": "expanded",
"isMultiSelect": true,
"choices": [],
"label": "Invoices (Number - Amount(Currency)) *"
},
{
"type": "Input.Number",
"id": "InvoiceHours",
"label": "Total Number of Hours to be Billed"
},
{
"type": "Input.Number",
"id": "InvoiceUnits",
"isVisible": "${HasUnitBasedDemands}",
"label": "Total Number of Units to be Billed"
},
{
"type": "Input.Number",
"id": "InvoiceAmount",
"label": "Total Amount of Expenses to be billed"
},
{
"type": "Input.Date",
"id": "FromDate",
"label": "Transaction From Date"
},
{
"type": "Input.Date",
"id": "ToDate",
"label": "Transaction To Date"
},
{
"type": "Input.Text",
"id": "Comments",
"isMultiline": true,
"isRequired": true,
"label": "Comments"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit",
"data": {
"id": "CreditRequest_Submit"
}
}
]
}
Additionally, see the Important note about accessibility that has been added to our documentation site: https://adaptivecards.io/explorer/Input.Text.html.
Let me know if you have any questions!
