AdaptiveCards
AdaptiveCards copied to clipboard
microsoft
{Linked:Bug12323019}[Adaptive Cards > Designer] - Screen Reader does not announce about selection status of "helpful" and "Unhelpful" button present within the IRIS reply card
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 26252.5000) Browser Version: Version 120.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: Open the above URL on the EDGE Dev browser. Run the Json file. Navigate to the Preview mode and press enter key to activate it. Press the tab key and navigate to 'Helpful' and 'Unhelpful' button and press enter key to activate it. Now press tab key again and renavigate to the helpful button and observe the issue.
Actual Result: Screen Reader does not announce about selection status of "helpful" and "Unhelpful" button present within the IRIS reply card.
Expected Result: Screen Reader should announce about selected/unselected status of "helpful" and "Unhelpful" button present within the IRIS reply card. It should announce something like 'Helpful button selected.'
Note: Same issue is observed with NVDA screen reader.
User Impact: Screen Reader users are impacted as they might not know about the selection status of the "Helpful"/"unhelpful" button.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
Screenshots
https://github.com/user-attachments/assets/24a11693-b679-4d91-b708-b9139a596341
Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"width": 10,
"items": [
{
"type": "TextBlock",
"text": "AI-generated content may be incorrect",
"wrap": true,
"isSubtle": true,
"size": "Small",
"horizontalAlignment": "Left"
}
]
},
{
"type": "Column",
"width": "24px",
"items": [
{
"type": "Image",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/LikeBlue.png",
"id": "thumbsUpUnselected",
"width": "24px",
"height": "24px",
"horizontalAlignment": "Right",
"altText": "Helpful",
"title": "Helpful",
"selectAction": {
"title": "Helpful",
"type": "Action.ToggleVisibility",
"data": {
"faqActionType": "HelpfulAnswerFeedback",
"source": "icon"
},
"targetElements": [
{
"elementId": "thumbsUpSelected",
"isVisible": true
},
{
"elementId": "thumbsUpUnselected",
"isVisible": false
},
{
"elementId": "thumbsDownUnselected",
"isVisible": true
},
{
"elementId": "thumbsDownSelected",
"isVisible": false
},
{
"elementId": "submitThumbsDown",
"isVisible": false
},
{
"elementId": "submitThumbsUp",
"isVisible": true
},
{
"elementId": "commentBox",
"isVisible": false
}
]
}
},
{
"type": "Image",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/LikeSolidBlue.png",
"id": "thumbsUpSelected",
"width": "24px",
"height": "24px",
"horizontalAlignment": "Right",
"altText": "Helpful",
"title": "Helpful",
"isVisible": false,
"selectAction": {
"title": "Helpful",
"type": "Action.ToggleVisibility",
"data": {
"faqActionType": "HelpfulAnswerFeedback",
"source": "icon"
},
"targetElements": [
{
"elementId": "thumbsUpUnselected",
"isVisible": true
},
{
"elementId": "thumbsUpSelected",
"isVisible": false
},
{
"elementId": "thumbsDownUnselected",
"isVisible": true
},
{
"elementId": "submitThumbsUp",
"isVisible": false
},
{
"elementId": "commentBox",
"isVisible": false
}
]
}
}
]
},
{
"type": "Column",
"width": "24px",
"items": [
{
"type": "Image",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/DislikeBlue.png",
"id": "thumbsDownUnselected",
"width": "24px",
"height": "24px",
"horizontalAlignment": "Right",
"title": "Unhelpful",
"altText": "Unhelpful",
"selectAction": {
"title": "Unhelpful",
"type": "Action.ToggleVisibility",
"data": {
"faqActionType": "UnhelpfulAnswerFeedback",
"source": "icon"
},
"targetElements": [
{
"elementId": "thumbsDownSelected",
"isVisible": true
},
{
"elementId": "thumbsDownUnselected",
"isVisible": false
},
{
"elementId": "thumbsUpSelected",
"isVisible": false
},
{
"elementId": "thumbsUpUnselected",
"isVisible": true
},
{
"elementId": "submitThumbsDown",
"isVisible": true
},
{
"elementId": "submitThumbsUp",
"isVisible": false
},
{
"elementId": "commentBox",
"isVisible": true
}
]
}
},
{
"type": "Image",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/DislikeSolidBlue.png",
"id": "thumbsDownSelected",
"width": "24px",
"height": "24px",
"horizontalAlignment": "Right",
"title": "Unhelpful",
"altText": "Unhelpful",
"isVisible": false,
"selectAction": {
"title": "Unhelpful",
"type": "Action.ToggleVisibility",
"data": {
"faqActionType": "UnhelpfulAnswerFeedback",
"source": "icon"
},
"targetElements": [
{
"elementId": "thumbsDownSelected",
"isVisible": false
},
{
"elementId": "thumbsDownUnselected",
"isVisible": true
},
{
"elementId": "thumbsUpUnselected",
"isVisible": true
},
{
"elementId": "submitThumbsDown",
"isVisible": false
},
{
"elementId": "commentBox",
"isVisible": false
}
]
}
}
]
}
]
},
{
"type": "Input.Text",
"placeholder": "Leave a comment or suggestion",
"isMultiline": true,
"isVisible": false,
"wrap": true,
"id": "commentBox"
},
{
"type": "ActionSet",
"id": "submitThumbsUp",
"isVisible": false,
"actions": [
{
"type": "Action.Submit",
"title": "Submit Feedback",
"data": {
"faqActionType": "HelpfulAnswerFeedback",
"source": "icon"
}
}
]
},
{
"type": "ActionSet",
"id": "submitThumbsDown",
"isVisible": false,
"actions": [
{
"type": "Action.Submit",
"title": "Submit Feedback",
"data": {
"faqActionType": "UnhelpfulAnswerFeedback",
"source": "icon"
}
}
]
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "**References:**",
"wrap": true,
"weight": "Bolder",
"isSubtle": false,
"size": "Small"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "fileIcon0",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
"width": "24px",
"height": "24px",
"altText": "Board",
"title": "Board"
}
],
"width": "auto",
"type": "Column"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "[1] Board",
"wrap": true,
"size": "Small"
},
{
"type": "Container",
"style": "emphasis",
"id": "cardContent0",
"isVisible": false,
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Adaptive Cards",
"wrap": true,
"size": "Small"
}
],
"width": "stretch"
}
]
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "chevronDown0",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
"width": "24px",
"height": "24px",
"altText": "Board collapsed",
"title": "Board collapsed",
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Board collapsed",
"title": "Board collapsed",
"targetElements": [
"cardContent0",
"chevronDown0",
"chevronUp0"
]
}
},
{
"type": "Image",
"id": "chevronUp0",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
"width": "24px",
"height": "24px",
"altText": "Board expanded",
"title": "Board expanded",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Board expanded",
"title": "Board expanded",
"targetElements": [
"cardContent0",
"chevronDown0",
"chevronUp0"
]
}
}
],
"width": "auto"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "fileIcon1",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
"width": "24px",
"height": "24px",
"altText": "List",
"title": "List"
}
],
"width": "auto",
"type": "Column"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "[2] List",
"wrap": true,
"size": "Small"
},
{
"type": "Container",
"style": "emphasis",
"id": "cardContent1",
"isVisible": false,
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Backlog",
"wrap": true,
"size": "Small"
}
],
"width": "stretch"
}
]
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "chevronDown1",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
"width": "24px",
"height": "24px",
"altText": "List collapsed",
"title": "List collapsed",
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "List collapsed",
"title": "List collapsed",
"targetElements": [
"cardContent1",
"chevronDown1",
"chevronUp1"
]
}
},
{
"type": "Image",
"id": "chevronUp1",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
"width": "24px",
"height": "24px",
"altText": "List expanded",
"title": "List expanded",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "List expanded",
"title": "List expanded",
"targetElements": [
"cardContent1",
"chevronDown1",
"chevronUp1"
]
}
}
],
"width": "auto"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "fileIcon2",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
"width": "24px",
"height": "24px",
"altText": "Assigned to",
"title": "Assigned to"
}
],
"width": "auto",
"type": "Column"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "[3] Assigned to",
"wrap": true,
"size": "Small"
},
{
"type": "Container",
"style": "emphasis",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"wrap": true,
"size": "Small"
}
],
"width": "stretch"
}
]
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "chevronDown2",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
"width": "24px",
"height": "24px",
"altText": "Assigned to collapsed",
"title": "Assigned to collapsed",
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Assigned to collapsed",
"title": "Assigned to collapsed",
"targetElements": [
"cardContent2",
"chevronDown2",
"chevronUp2"
]
}
},
{
"type": "Image",
"id": "chevronUp2",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
"width": "24px",
"height": "24px",
"altText": "Assigned to expanded",
"title": "Assigned to expanded",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Assigned to expanded",
"title": "Assigned to expanded",
"targetElements": [
"cardContent2",
"chevronDown2",
"chevronUp2"
]
}
}
],
"width": "auto"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "fileIcon3",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
"width": "24px",
"height": "24px",
"altText": "Due date",
"title": "Due date"
}
],
"width": "auto",
"type": "Column"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "[4] Due date",
"wrap": true,
"size": "Small"
},
{
"type": "Container",
"style": "emphasis",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Not set",
"wrap": true,
"size": "Small"
}
],
"width": "stretch"
}
]
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Top",
"items": [
{
"type": "Image",
"id": "chevronDown3",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
"width": "24px",
"height": "24px",
"altText": "Due date collapsed",
"title": "Due date collapsed",
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Due date collapsed",
"title": "Due date collapsed",
"targetElements": [
"cardContent3",
"chevronDown3",
"chevronUp3"
]
}
},
{
"type": "Image",
"id": "chevronUp3",
"url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
"width": "24px",
"height": "24px",
"altText": "Due date expanded",
"title": "Due date expanded",
"isVisible": false,
"selectAction": {
"type": "Action.ToggleVisibility",
"altText": "Due date expanded",
"title": "Due date expanded",
"targetElements": [
"cardContent3",
"chevronDown3",
"chevronUp3"
]
}
}
],
"width": "auto"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Couldn't find answer? Create an Incident request",
"data": {
"faqActionType": "Create Support ticket",
"source": "button"
}
}
]
}
]
}
Sample Code Language
No response
Sample Code
No response
Originally tracked with below bug -
https://dev.azure.com/MicrosoftIT/OneITVSO/_workitems/edit/12323019
Hi @vagpt,
I am closing this issue because it can be resolved with authoring updates. For each selectAction, you can use both the title and tooltip property to get the desired behavior:
For instance, this example would show the tooltip as "Helpful", but Narrator will announce "Helpful selected button".
Thanks, Anna
Hi @anna-dingler,
Thanks for the above comment.
We have received below comments from the Dev team so could you please look on the comments below and provide us solution.
Thanks for your help.
Hi @jwoo-msft @anna-dingler,
Could you please look on the Dev team below comment and help us to resolve this issue in Bot Framework.