microsoft
{Linked:Bug9210947}[Adaptive Cards> Previous/Next Button]: Narrator is announcing the previous and next button as greater/less <> than.
Target Platforms
Other
SDK Version
1.3
Application Name
Adaptive cards
Problem Description
Test Environment: OS Version: 22H2 (Build 25145.1011) Browser: Edge Dev (105.0.1300.0) Screen Reader: Narrator /JAWS URL: https://adaptivecards.io/designer/
Repro Steps:
- Turn on the Narrator through Ctrl+ windows+ Enter key.
- Open the above URL in edge dev browser.
- Add the provided JSON in Sample data editor and card payload editor.
- Navigate to the previous and Next button through Tab key.
- Observe the issue.
Actual Result: Narrator is announcing the previous and next button as greater/less <> than.
Expected Result: Narrator should announce the previous and next button properly so its convey the meaning as where less than sign present it should announce as 'Previous button' and for greater than sign it should announce as 'Next Button'.
Observation: Same issue repro with JAWS.
User Impact: User who relies on the screen reader will be impacted as it is not announcing the name of functional elements present in an appropriate way.
MAS Reference link: https://liquid.microsoft.com/Web/Object/Read/MS.Accessibility/Requirements/01.03.01
"Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com) “,
Screenshots
https://user-images.githubusercontent.com/104483005/178416216-9da7d371-7f76-4c72-a957-e5a3218f665f.mp4
Card JSON
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"msTeams": { "width": "full" },
"body": [
{
"type": "TextBlock",
"text": "Great! Here are some of the things that Icebreaker can help you with. Feel free to give it a try!",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "<",
"targetElements": [
"imageToToggle1",
"imageToToggle2",
"textToToogle1",
"textToToogle1-1",
"textToToggleWelcomeFooter",
"textToToogle2-1",
"textToToogleMatchFooter",
"textToToogle2"
]
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"width": "400px",
"items": [
{
"type": "Image",
"url": "${tour1Url}",
"id": "imageToToggle1",
"altText": "Tour Image one"
},
{
"type": "Image",
"url": "${tour2Url}",
"id": "imageToToggle2",
"isVisible": false,
"altText": "Tour Image two"
}
]
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": ">",
"targetElements": [
"imageToToggle1",
"imageToToggle2",
"textToToogle1",
"textToToogle1-1",
"textToToggleWelcomeFooter",
"textToToogle2-1",
"textToToogleMatchFooter",
"textToToogle2"
]
}
]
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"text": "${tourWelcomeHeader}",
"wrap": true,
"size": "Large",
"weight": "Bolder",
"id": "textToToogle1"
},
{
"type": "TextBlock",
"text": "${tourWelcomebodyText}",
"wrap": true,
"id": "textToToogle1-1"
},
{
"type": "TextBlock",
"text": "${tourFooterText}",
"wrap": true,
"id": "textToToggleWelcomeFooter"
},
{
"type": "TextBlock",
"text": "${tourMatchHeader}",
"wrap": true,
"size": "Large",
"weight": "Bolder",
"id": "textToToogle2",
"isVisible": false
},
{
"type": "TextBlock",
"text": "${tourMatchBody}",
"wrap": true,
"id": "textToToogle2-1",
"isVisible": false
},
{
"type": "TextBlock",
"text": "${tourMatchFooter}",
"wrap": true,
"id": "textToToogleMatchFooter",
"isVisible": false
}
]
}
Sample Code Language
No response
Sample Code
No response
Hello @vaishali1397! To resolve this issue, I recommend using an icon instead of "<" and ">" and assigning a tooltip value.
For instance,
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"iconUrl": "icon_url",
"tooltip": "Previous",
"targetElements": [
"imageToToggle1",
"imageToToggle2",
"textToToogle1",
"textToToogle1-1",
"textToToggleWelcomeFooter",
"textToToogle2-1",
"textToToogleMatchFooter",
"textToToogle2"
]
}
]
}
The screen reader would then properly announce "Previous Button". Let me know if you have any questions!
Resolving this issue since using an icon would result in the correct behavior. Let me know if you need help with anything else!
