VikrantSingh01
commented
1 year ago @ardlank : Can you check this a11y issue.
Closed Bhaskar301101 closed 1 year ago
VikrantSingh01
commented
1 year ago @ardlank : Can you check this a11y issue.
ardlank
commented
1 year ago {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Your Flight Details",
"wrap": true,
"style": "heading"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Container",
"backgroundImage": "https://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
"items": [
{
"type": "Image",
"horizontalAlignment": "center",
"url": "https://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png",
"altText": "Departing airplane"
}
],
"bleed": true,
"style": "emphasis"
},
{
"type": "Container",
"spacing": "none",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"size": "extraLarge",
"weight": "lighter",
"color": "accent",
"text": "Flight to JFK",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "small",
"text": "Continental Air Lines flight UA110",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Confirmation code: RXJ34P",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "4 hours 15 minutes",
"wrap": true
}
],
"bleed": true,
"height": "stretch"
}
],
"width": 45
},
{
"type": "Column",
"items": [
{
"type": "Container",
"height": "stretch",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "extraLarge",
"weight": "lighter",
"text": "SFO",
"wrap": true
}
],
"width": "1"
},
{
"type": "Column",
"verticalContentAlignment": "center",
"items": [
{
"type": "Image",
"url": "https://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
"height": "16px",
"altText": "Flight to"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"size": "extraLarge",
"weight": "lighter",
"text": "JFK",
"wrap": true
}
],
"width": "1"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "RichTextBlock",
"inlines": [
{
"type": "TextRun",
"size": "medium",
"text": "8:15 PM\n"
},
{
"type": "TextRun",
"text": "Sat, Mar 4, 2017\n",
"isSubtle": true
},
{
"type": "TextRun",
"text": "San Francisco",
"isSubtle": true
}
]
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "RichTextBlock",
"horizontalAlignment": "right",
"inlines": [
{
"type": "TextRun",
"size": "medium",
"text": "3:30 AM\n"
},
{
"type": "TextRun",
"text": "Sat, Mar 4, 2017\n",
"isSubtle": true
},
{
"type": "TextRun",
"text": "New York",
"isSubtle": true
}
]
}
],
"width": 1
}
]
},
{
"type": "ActionSet",
"separator": true,
"actions": [
{
"type": "Action.Submit",
"title": "Check in",
"style": "positive"
},
{
"type": "Action.Submit",
"title": "View"
}
],
"spacing": "medium"
}
]
}
],
"width": 55
}
],
"height": "stretch"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5"
}@Bhaskar301101 Here is the card. AdaptiveCards are not able to recognize if you are using an airport code. For these situations, a subtle text should be added next to the textblock. Please see isSubtle here:
vagpt
commented
8 months ago Hi @ardlank
It should be either work same as working on iOS platform as on the iOS there is a descriptive label is present beside the SFO and JFK or you can describe the ARIA label property here so that when SR focus lands on it then it should announce the complete name infomration.
Now this issue is being tracking with below URL -
Target Platforms
Android
SDK Version
2023.03.31.1
Application Name
Adaptive Card
Problem Description
Test Environment: OS: Android 12 Device: S21+ Screen reader: Talkback AdaptiveCard Android App version: 2023.03.31.1
Pre-requisite: Import-Sample Cards->FlightDetails.json; Config-Default
Repro Steps:
Actual Result: Screen reader announcement is not descriptive enough for "SFO" and "JFK" and does not describe the topic or purpose of the element. Screen reader only announces "SFO" and "JFK" when focus moves to the said text block elements.
Expected Result: Screen reader announcement should describe the purpose of "SFO" and "JFK" text elements. Forex, Screen reader should announce like as 'Where from San Francisco international airport (SFO)' and 'Where to John F Kennedy international airport (JFK)'.
Note: This issue is also repro on Time and date text block, "Screen reader does not announce the label relationship of 'origin' and 'destination' names with respective 'time and date' details text block content." PFA for reference 'Note-time and date.mp4'
User Experience: The screen reader users will get impact and might get confuse when there is no heading or label info provided for text block element describing its purpose.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships
"Have feedback to share on Bugs ? Please help fill Trusted Tester Bug Feedback (office.com) “,
Screenshots
https://user-images.githubusercontent.com/89897257/232744072-0c40922e-572d-4fdf-ac33-e2e1503a16bf.mp4
https://user-images.githubusercontent.com/89897257/232744097-407ca3ab-0935-4c69-9a5a-8761ddd6ce74.mp4
Card JSON
Sample Code Language
No response
Sample Code
No response