AdaptiveCards
AdaptiveCards copied to clipboard
microsoft
{Linked:Bug108119}[Adaptive Card-How are you feeling today]: ‘Alt’ attribute is not defined for emotion icons control appearing on 'How are you feeling today' card.
Target Platforms
Other
SDK Version
105.0.1300.0
Application Name
Adaptive Cards
Problem Description
Test Environment: OS: 22H2 (OS Build 25120.1000) Browser: Edge Dev Browser Version: Version 103.0.1255.0 (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 to emotion icon control which is appearing under How do you feeling today heading and inspect code for image using F12. Observe the issue.
Actual Result: ‘Alt’ attribute is not defined for emotion icons control appearing on 'How are you feeling today' card.
Expected Result: ‘Alt’ attribute should be defined for emotion icons control appearing on 'How are you feeling today' card.
Observation: Issue is also repro with JAWS and NVDA.
User Experience: Screen reader users will not be able to know name of emotion icons if alt attribute is not defined.
MAS Reference: Non-text Content - Liquid (microsoft.com)
Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com) “
Screenshots
Card JSON
{
"type": "AdaptiveCard",
"version": "0.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"weight": "lighter",
"text": "Educators see your name and reflection, classmates won’t see your name",
"wrap": true,
"spacing": "none"
}
],
"style": "emphasis",
"bleed": true,
"height": "stretch"
}
]
},
{
"type": "TextBlock",
"size": "large",
"weight": "bolder",
"text": "How are you feeling today?",
"wrap": true
},
{
"type": "TextBlock",
"size": "small",
"text": "By Fadi Teacher | Closes {date}",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "VeryHappy"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/veryHappyIcon.png"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Happy"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/happyIcon.png"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Neutral"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/neutralIcon.png"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Sad"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/sadIcon.png"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "VerySad"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/verySadIcon.png"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "exploreFeedbacks",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "None"
}
},
"title": "Explore",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/exploreReflectIcon.png"
}
]
}
Sample Code Language
No response
Sample Code
No response
I believe this issue is resolved by setting the tooltip property for each of the actions.
@JeanRoca Does this need to be updated on one of our samples?
Resolving this issue because updating the card payload should fix the bug. Let me know if you need help with anything else!
I am asking to reopen the bug since the issue is not solved We are using the c# package and I cant change the json from there,
We use the c# sdk of teams adaptive card The tooltip field is not implemented there. we use this code in c#
new AdaptiveOpenUrlAction() { Title = " ", IconUrl = $"../hostedContents/{veryPleasant}/$value", Url = new Uri(reflectCardSettings.CardDeeplinks.VeryPleasantFeedbackButtonDeeplink), },
no option for accessibility in this code tooltip option is available by the json but not by the c# nuget, So I will ask you to reopen the bug for adaptive card guys to handle it in the c# nuget package and to add that ability of accessibility there. The C# nuget link
I am asking to reopen the bug since the issue is not solved We are using the c# package and I cant change the json from there,
We use the c# sdk of teams adaptive card The tooltip field is not implemented there. we use this code in c#
new AdaptiveOpenUrlAction() { Title = " ", IconUrl = $"../hostedContents/{veryPleasant}/$value", Url = new Uri(reflectCardSettings.CardDeeplinks.VeryPleasantFeedbackButtonDeeplink), },
no option for accessibility in this code tooltip option is available by the json but not by the c# nuget, So I will ask you to reopen the bug for adaptive card guys to handle it in the c# nuget package and to add that ability of accessibility there. The C# nuget link
Tooltip is recently implemented by this PR. We will make a release in December.
- will be supported with c# (the nuget that you have for c#), I am using your c# nugest and the json format
- I need the narrator to read it and not a tooltip
- will be supported with c# (the nuget that you have for c#), I am using your c# nugest and the json format
- I need the narrator to read it and not a tooltip
What does it referring to? Yes, AdaptiveCards nuget package will be released in Dec.
we don't have a firm plan to update AdaptiveCards.Rendering.Wpf nuget package to v1.5 as of yet. We will update AdaptiveCards.Rendering.Html package pretty soon.
As the attached photo: We have an adaptive card with buttons, each button has an icon inside it In order to be accessible each photo/icon needs to have an alt attribute. Alt attribute will help giving a label for the photo/icon so the narrator can read it
As the attached photo: We have an adaptive card with buttons, each button has an icon inside it In order to be accessible each photo/icon needs to have an alt attribute. Alt attribute will help giving a label for the photo/icon so the narrator can read it
Renderers will set appropriate a11y label if tooltip or title are set in json. Since you're referring to AdaptiveCards.Rendering.Html nuget package. We haven't updated the nuget package or made the release. Since the feature is not yet implemented for the renderer; it's not a bug.
Hi @jwoo-msft , is there an ETA for when it will be released to AdaptiveCards.Rendering.Html nuget package?
Hi guys, Jumping in with some finding after a test:
The new Tooltip prop that is added in version 3.0.0 can be used in the C# nuget like in here:
But though it does change the title and aria-description attributes, It does not add an alt attribute, nor making the screen reader to announce that tooltip (tested in edge browser & windows narrator).
Hence, I will have to ask to re-open this bug and get your approval about this one.
Thank you.
@jwoo-msft @anna-dingler is there a workaround that can be used for the case @NadRose is describing?
@JeanRoca No, there isn't a work around for what they are describing (unless I'm missing something @jwoo-msft?).
Exposing altText to images within actions seems like a schema change to me. I don't think using the tooltip value as alt text for images will always be the expected outcome (ex: text and image are both included on the action, tooltip is used for a longer description of the action, etc.).
Updated JSON:
{
"type": "AdaptiveCard",
"version": "0.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"weight": "lighter",
"text": "Educators see your name and reflection, classmates won’t see your name",
"wrap": true,
"spacing": "none"
}
],
"style": "emphasis",
"bleed": true,
"height": "stretch"
}
]
},
{
"type": "TextBlock",
"size": "large",
"weight": "bolder",
"text": "How are you feeling today?",
"wrap": true
},
{
"type": "TextBlock",
"size": "small",
"text": "By Fadi Teacher | Closes {date}",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "VeryHappy"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/veryHappyIcon.png",
"tooltip": "Very happy"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Happy"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/happyIcon.png",
"tooltip": "Happy"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Neutral"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/neutralIcon.png",
"tooltip": "Neutral"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "Sad"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/sadIcon.png",
"tooltip": "Sad"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "setFeedback",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "VerySad"
}
},
"title": " ",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/verySadIcon.png",
"tooltip": "Very sad"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"Type": "task/fetch"
},
"datajson": {
"PostCreatorName": "Fadi Teacher",
"PostCreatorId": "c4e6beb4-5115-408d-8965-7328b0bfc6d4",
"ReflectId": "8fcc02d7-1506-445c-b881-10649ff556b0",
"Action": "exploreFeedbacks",
"ReflectPrivacyId": "AnonymousForClassmates",
"ReflectQuestionId": "FeelingToday",
"DueDateUtc": "2021-05-27T22:49:04.051Z",
"ReflectFeedback": "None"
}
},
"title": "Explore",
"iconUrl": "https://roravi.ngrok.io/reflectCardImages/exploreReflectIcon.png",
"tooltip": "Explore"
}
]
}
