microsoft / microsoft/AdaptiveCards
{Linked:Bug2509191}[Accessibility][Visual Requirements -Workflow Notification Card]: Keyboard focus indicator is not properly visible on "view in portal" link in company name section.
Open
Nobody has claimed this yet.
A11yMissing_HCLReviewed
A11ySev3
A11yWCAG
AdaptiveCards_Web
Area-Accessibility
Area-Renderers
Bug
HCL-AdaptiveCards-Web
HCL-E+D
MissingReviewedDeprecated
Product-AC
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
Target Platforms
Other
SDK Version
1.6
Application Name
Adaptive Cards
Problem Description
Test Environment:
OS Build: Windows 11
OS Version: 23H2 ( Build 26020.1000)
Browser: Edge Dev
Version ( 122.0.2325.0) (Official build) (64-bit)
URL: Designer | Adaptive Cards
Repro Steps:
- Open the above URL in Edge Dev browser.
- Navigate to the 'Card Payload Editor' button and activate it.
- Paste the attached JSON.
- Navigate to the Preview button and press enter key to activate it.
Actual Result:
Keyboard focus indicator is not properly visible on "view in portal" link in company name section.
Focus indicator is visible only on two sides for the "View in portal" link.
Expected Result:
Keyboard focus indicator should be properly visible four sides on "view in portal" link in company name section.
Focus indicator(s) must be clearly visible on each interactive element when navigating the page using the tab key.
User Impact:
Keyboard only users need to know which element has focus so they can track their navigation through and interaction with interactive controls.
WCAG Reference:
[MAS 2.4.7 - Focus Visible
](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)
“Have feedback to share on Bugs ? Please help fill Trusted Tester Bug Feedback (office.com) “
Screenshots
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"id": "1ede2aba-61b9-faa0-9895-9ed0c26b2e6f",
"columns": [
{
"type": "Column",
"id": "e5756242-0963-37a2-7cb4-4397886d60bb",
"padding": "None",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"id": "20f3833e-0435-5c87-fad1-b528e0046fb6",
"text": "Company Name",
"wrap": true
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "74215a26-fa8b-e549-cced-7f99fd34a661",
"padding": "None",
"width": "auto",
"items": [
{
"type": "Image",
"id": "795047e2-e63e-6e14-07ba-5a3e13323dff",
"url": "https://amdesigner.azurewebsites.net/samples/assets/PlaceHolder_Person.png",
"size": "Small"
}
],
"horizontalAlignment": "Right"
}
],
"padding": {
"top": "Small",
"bottom": "Small",
"left": "Default",
"right": "Small"
},
"style": "emphasis"
},
{
"type": "Container",
"id": "fbcee869-2754-287d-bb37-145a4ccd750b",
"padding": "Default",
"spacing": "None",
"items": [
{
"type": "TextBlock",
"id": "44906797-222f-9fe2-0b7a-e3ee21c6e380",
"text": "[#83] Calls are getting dropped unexpectedly",
"wrap": true,
"weight": "Bolder",
"size": "Large",
"style": "heading"
},
{
"type": "TextBlock",
"id": "f7abdf1a-3cce-2159-28ef-f2f362ec937e",
"text": "We have this ongoing issue for the last one week. Outgoing calls from our account sometime get dropped unexpectedly. We need a quick resolution!",
"wrap": true
},
{
"type": "ActionSet",
"id": "c8a5ba7e-7ec6-53ae-79da-0cfb952a527e",
"actions": [
{
"type": "Action.ShowCard",
"id": "c5884df0-9c4d-aef4-9bf2-0ac49d064f75",
"title": "Change status",
"card": {
"type": "AdaptiveCard",
"padding": "Default",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "c50c0c98-4cc1-6ff6-04b8-889577aaec86",
"padding": "None",
"items": [
{
"type": "Input.ChoiceSet",
"id": "ChangeStatus",
"placeholder": "Select an option",
"label": "Select an option to change status. Please select an item in the list",
"choices": [
{
"title": "Open",
"value": "Open"
},
{
"title": "Close",
"value": "Close"
}
],
"isRequired": true
},
{
"type": "ActionSet",
"id": "ff6a8953-50c0-bf33-9d01-2316bc1ff50f",
"actions": [
{
"type": "Action.Http",
"id": "17cf96b1-6455-a959-f88c-e301106c9c01",
"title": "Submit",
"url": "https://www.microsoft.com",
"method": "POST",
"body": "{ChangeStatus:{{ChangeStatus.value}}}"
}
]
}
]
}
]
},
"isPrimary": true,
"style": "positive"
},
{
"type": "Action.ShowCard",
"id": "6698711a-d6d4-e3a1-9f8b-1042852d0b25",
"title": "Set priority",
"card": {
"type": "AdaptiveCard",
"padding": "Default",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "6ba7238e-025b-e060-cf41-b4732848967b",
"padding": "None",
"items": [
{
"type": "Input.ChoiceSet",
"id": "Priority",
"placeholder": "Select a Priority",
"label": "Select a Priority for the task.",
"choices": [
{
"title": "Low",
"value": "Low"
},
{
"title": "Medium",
"value": "Medium"
},
{
"title": "High",
"value": "High"
},
{
"title": "Urgent",
"value": "Urgent"
}
],
"style": "expanded",
"isRequired": true
},
{
"type": "ActionSet",
"id": "827ea28d-3d41-91c6-cf84-30b74244afe8",
"actions": [
{
"type": "Action.Http",
"id": "d499a757-ee04-ee57-ef75-4e3f01c536d1",
"title": "Submit",
"method": "POST",
"url": "https://www.microsoft.com",
"body": "{Priority: {{Priority.value}}}"
}
]
}
]
}
]
}
},
{
"type": "Action.ShowCard",
"id": "f8541cdd-a532-3b7f-fca8-713b74529057",
"title": "Choose an assignee",
"card": {
"type": "AdaptiveCard",
"padding": "Default",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "d2a2f235-2cf2-90c1-dab4-4a28dbea74d8",
"padding": "None",
"items": [
{
"type": "Input.ChoiceSet",
"id": "Assignee",
"placeholder": "Choose an assignee",
"label": "Choose an assignee for the task.",
"choices": [
{
"title": "kat.larrson@contoso.com",
"value": "kat.larrson@contoso.com"
},
{
"title": "daisy.philip@contoso.com",
"value": "daisy.philip@contoso.com"
},
{
"title": "miguel.garcia@contoso.com",
"value": "miguel.garcia@contoso.com"
},
{
"title": "collin.ballinger@contoso.com",
"value": "collin.ballinger@contoso.com"
},
{
"title": "elvia.atkins@contoso.com",
"value": "elvia.atkins@contoso.com"
},
{
"title": "lydia.bauer@contoso.com",
"value": "lydia.bauer@contoso.com"
},
{
"title": "henry.brill@contoso.com",
"value": "henry.brill@contoso.com"
},
{
"title": "mona.kane@contoso.com",
"value": "mona.kane@contoso.com"
}
],
"style": "expanded",
"isRequired": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Http",
"id": "124e2030-8e95-2a1f-11f5-0da852070b0a",
"title": "Submit",
"method": "POST",
"url": "https://www.microsoft.com",
"body": "{Assignee:{{Assignee.value}}}"
}
]
}
]
}
]
}
}
]
}
]
},
{
"type": "Container",
"id": "77102c5d-fde2-e573-4ea5-66022d646d64",
"padding": {
"top": "Small",
"bottom": "Small",
"left": "Small",
"right": "Default"
},
"spacing": "None",
"separator": true,
"items": [
{
"type": "TextBlock",
"id": "42654e7e-cece-b419-867a-3e3ef4076870",
"text": "[View in portal](https://amdesigner.azurewebsites.net)",
"wrap": true,
"color": "Accent",
"horizontalAlignment": "Right"
}
],
"horizontalAlignment": "Right"
}
],
"padding": "None"
}
Sample Code Language
No response
Sample Code
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Adaptive Cards Designer entry point and reproduce the provided card JSON in Edge Dev using the listed keyboard steps. Inspect the implementation responsible for the “view in portal” link’s focus styling; done means the focus indicator is clearly visible on all four sides while tabbing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- accessibility, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100