{Linked:Bug29456976}[Adaptive Cards > Designer] - Visually appearing table under "On call contacts" control is not defined as table programmatically. On using t shortcut key screen reader announces as "No next table". #9052
Labels
A11ySev2
Accessibility issue with severity 2. This may impact the accessibility score
A11yWCAG
Accessibility issue that affects compliance
Area-Accessibility
Bugs around feature accessibility
Area-Renderers
Area-Website
Bug
HCL-AdaptiveCards-Web
Used by accessibility team for scorecard categorization
HCL-E+D
Comments
vagpt
added
A11ySev2
|
Hi @vagpt, I believe this is a card authoring error. In order to have proper accessibility settings, card authors should use the Table element in adaptive cards instead of ColumnSets. For example, the card could be as follows (only fixed the "On-call Contacts" portion): {
"type": "AdaptiveCard",
"version": "1.6",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "ACTIVE",
"wrap": true,
"maxLines": 1
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"isSubtle": true,
"text": " Sev 3",
"wrap": true,
"maxLines": 1
}
],
"verticalContentAlignment": "Center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"isSubtle": true,
"text": "128161826",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"color": "Light",
"isSubtle": true,
"text": "View IcM Bridges",
"horizontalAlignment": "Right",
"wrap": true,
"maxLines": 1,
"height": "stretch"
}
]
}
]
},
{
"type": "TextBlock",
"size": "Medium",
"text": "Test Accessibility",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Team:",
"value": "TestTest - SkypeTeams-Test"
},
{
"title": "Created: ",
"value": "10/22/2024 2:13:40 AM +00:00"
},
{
"title": "Acknowledged: ",
"value": "❌"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "https://teams.microsoft.com/l/task/e7e3211e-46c7-4eac-af53-5820971a9c7a?url=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fdiagnostics%3ffullScreen%3dDiagnosticsTabHealth%26theme%3d%7btheme%7d%26teamsHost%3d%7bhostClientType%7d&fallbackUrl=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fdiagnostics%3ffullScreen%3dDiagnosticsTabHealth&height=large&width=800&title=Incident%20128161826",
"title": "View Health History"
},
{
"type": "Action.OpenUrl",
"url": "https://ppeportal.microsofticm.com/imp/v3/incidents/details/128161826/similarincidents",
"title": "View Recommended Actions"
}
],
"spacing": "Medium"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"id": "cardContent1",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"data": {
"ActionSkill": "l_Icm",
"ActionIntent": "Icm_Incidents_Acknowledge",
"Data": {
"IncidentId": "128161826"
}
},
"title": "Acknowledge"
},
{
"type": "Action.OpenUrl",
"url": "https://teams.microsoft.com/l/task/e7e3211e-46c7-4eac-af53-5820971a9c7a?url=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fhome%3ffullScreen%3dincident-description%26theme%3d%7btheme%7d%26teamsHost%3d%7bhostClientType%7d&fallbackUrl=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fhome%3ffullScreen%3dincident-description&height=large&width=800&title=Incident%20128161826",
"title": "IcM Discussion"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"AppName": "IcM",
"SkillId": "l_Icm",
"TaskModuleFlowType": "ProcessIncidentId",
"SkillName": "IcM",
"FlowData": {
"incidentId": "128161826"
},
"Submit": false
}
},
"title": "Request Assistance"
}
]
}
]
}
]
},
"title": "Actions"
}
],
"separator": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Team: ",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "TestTest - SkypeTeams-Test",
"horizontalAlignment": "Center",
"wrap": true
}
]
}
]
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Primary",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Backup",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "DRI:",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"color": "Light",
"text": "didudeja didudeja (didudeja)",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Gaurav Saini (gauravsaini)",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"id": "IM: ",
"weight": "Bolder",
"text": "IM: ",
"wrap": true
}
]
},
{
"type": "TableCell"
},
{
"type": "TableCell"
}
]
}
],
"showGridLines": false
}
]
},
"title": "On-call Contacts"
}
],
"separator": true
}
],
"msteams": {
"width": "full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}Thanks, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Target Platforms
Other
SDK Version
1.6
Application Name
Adaptive Cards
Problem Description
Test Environment:
URL: https://adaptivecards.io/designer/
OS Version: dev (OS Build 27729.1000)
Browser Version: Version 131.0.2186.2 (Official build) dev (64-bit)
Screen Reader: Narrator
Pre-Requisite:
Run the below attached JSON file under 'Copy Card Payload editor.'
Turn on the Narrator and turn on scan mode.
Repro Steps:
Actual Result:
Visually appearing table under "On call contacts" control is not defined as table programmatically. On using t shortcut key screen reader announces as "No next table".
Expected Result:
Visually appearing table under "On call contacts" control should be defined as table programmatically. On using t shortcut key screen reader should announce as " On call contacts table".
Note:
Same issue is repro with NVDA.
User Impact:
Visually impaired users who depend on screen readers will not get to know the correct type of control due to which they won't be able to utilize the functionality of that control properly.
WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Have feedback to share on Bugs? please tag bug as “A11yRCA” and add your feedback in the comment section
Screenshots
Visually.appearing.as.table.is.not.defined.as.table.mp4
Card JSON
{
"type": "AdaptiveCard",
"version": "1.6",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "ACTIVE",
"wrap": true,
"maxLines": 1
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"isSubtle": true,
"text": " Sev 3",
"wrap": true,
"maxLines": 1
}
],
"verticalContentAlignment": "Center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"isSubtle": true,
"text": "128161826",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"color": "Light",
"isSubtle": true,
"text": "View IcM Bridges",
"horizontalAlignment": "Right",
"wrap": true,
"maxLines": 1,
"height": "stretch"
}
]
}
]
},
{
"type": "TextBlock",
"size": "Medium",
"text": "Test Accessibility",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Team:",
"value": "TestTest - SkypeTeams-Test"
},
{
"title": "Created: ",
"value": "10/22/2024 2:13:40 AM +00:00"
},
{
"title": "Acknowledged: ",
"value": "❌"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "https://teams.microsoft.com/l/task/e7e3211e-46c7-4eac-af53-5820971a9c7a?url=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fdiagnostics%3ffullScreen%3dDiagnosticsTabHealth%26theme%3d%7btheme%7d%26teamsHost%3d%7bhostClientType%7d&fallbackUrl=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fdiagnostics%3ffullScreen%3dDiagnosticsTabHealth&height=large&width=800&title=Incident%20128161826",
"title": "View Health History"
},
{
"type": "Action.OpenUrl",
"url": "https://ppeportal.microsofticm.com/imp/v3/incidents/details/128161826/similarincidents",
"title": "View Recommended Actions"
}
],
"spacing": "Medium"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"id": "cardContent1",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"data": {
"ActionSkill": "l_Icm",
"ActionIntent": "Icm_Incidents_Acknowledge",
"Data": {
"IncidentId": "128161826"
}
},
"title": "Acknowledge"
},
{
"type": "Action.OpenUrl",
"url": "https://teams.microsoft.com/l/task/e7e3211e-46c7-4eac-af53-5820971a9c7a?url=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fhome%3ffullScreen%3dincident-description%26theme%3d%7btheme%7d%26teamsHost%3d%7bhostClientType%7d&fallbackUrl=https%3a%2f%2fppeportal.microsofticm.com%2fimp%2fv3%2fincidents%2fdetails%2f128161826%2fhome%3ffullScreen%3dincident-description&height=large&width=800&title=Incident%20128161826",
"title": "IcM Discussion"
},
{
"type": "Action.Submit",
"data": {
"msteams": {
"type": "task/fetch"
},
"data": {
"AppName": "IcM",
"SkillId": "l_Icm",
"TaskModuleFlowType": "ProcessIncidentId",
"SkillName": "IcM",
"FlowData": {
"incidentId": "128161826"
},
"Submit": false
}
},
"title": "Request Assistance"
}
]
}
]
}
]
},
"title": "Actions"
}
],
"separator": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"id": "cardContent2",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Team: ",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "TestTest - SkypeTeams-Test",
"horizontalAlignment": "Center",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "80px"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Primary",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Backup",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "80px",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "DRI:",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"color": "Light",
"text": "didudeja didudeja (didudeja)",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Gaurav Saini (gauravsaini)",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "80px",
"items": [
{
"type": "TextBlock",
"id": "IM: ",
"weight": "Bolder",
"text": "IM: ",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"color": "Light",
"text": "",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "",
"wrap": true
}
]
}
]
}
]
}
]
},
"title": "On-call Contacts"
}
],
"separator": true
}
],
"msteams": {
"width": "full"
},
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Sample Code Language
No response
Sample Code
No response
The text was updated successfully, but these errors were encountered: