{Linked:Bug2235147}[Adaptive Cards> Designer]: The name of payment provider is not associated with the 'Open' control.
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.1329.1 (Official build) dev (64-bit)) URL: https://adaptivecards.io/ Screen reader: Narrator
Pre-Requisite:
- Attached the provided JSON in sample data editor and Card payload editor under Designer tab.
- And activate the preview mode.
Repro steps:
- Turn on the narrator.
- Open the above URL in edge dev browser.
- Navigate to the 'Open' button in card.
- Observe the issue.
Actual Result: 'Stripe (Poc) i.e payment provider name is not associated with the 'Open' control.
Expected Result: 'Stripe (Poc) i.e payment provider name should be associated with the 'Open' control. Narrator should announce as 'Stripe (PoC) Open link'.
Observation: Same issue repro with NVDA on Chrome browser.
User Impact: Screen reader user will get impacted as they will not be able to understand the proper information which in turn will not be able to track or navigate the content properly.
MAS Reference link: Info and Relationships - Liquid (microsoft.com)
"Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com) “,
Screenshots
https://user-images.githubusercontent.com/104483005/181704271-233b9e83-9fa8-4b23-b6ec-3a2381d9997b.mp4
Card JSON
{
"type": "AdaptiveCard",
"body": [
{
"items": [
{
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": "medium",
"text": "Payment providers",
"weight": "bolder",
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": true,
"maxLines": 0,
"size": null,
"text": "You'll view payments and take related actions straight from your provider accounts.",
"weight": null,
"wrap": true,
"separator": false,
"type": "TextBlock"
}
],
"separator": false,
"type": "Container"
},
{
"columns": [
{
"items": [
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://us-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url=https%3a%2f%2fwpforms.com%2fwp-content%2fuploads%2f2016%2f03%2faddon-icon-stripe.png",
"height": "auto",
"separator": false,
"type": "Image"
}
],
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "**Stripe (PoC)**",
"weight": "bolder",
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "Stripe, Inc.",
"weight": "lighter",
"wrap": true,
"spacing": "None",
"separator": false,
"type": "TextBlock"
}
],
"separator": false,
"type": "Column"
}
],
"separator": false,
"type": "ColumnSet"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "A complete payments platform, engineered for growth. Accepts payments with Stripe's powerful APIs and solutions which designed to help you capture",
"weight": null,
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "",
"weight": null,
"wrap": false,
"separator": false,
"type": "TextBlock"
},
{
"actions": [
{
"url": "https://teams.microsoft.com/l/entity/74e1b13c-33cf-48e2-9471-850fdf9bcdb7/homeTab",
"title": "Open",
"type": "Action.OpenUrl"
}
],
"separator": false,
"type": "ActionSet"
}
],
"style": "default",
"separator": false,
"type": "Container"
}
],
"separator": false,
"type": "Column"
},
{
"items": [
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://us-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url=https%3a%2f%2fpmservices.cp.microsoft-int.com%2fstaticresourceservice%2fimages%2fv4%2flogo_stripe_small.png",
"height": "auto",
"separator": false,
"type": "Image"
}
],
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "**Stripe**",
"weight": "bolder",
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "Stripe Inc",
"weight": "lighter",
"wrap": true,
"spacing": "None",
"separator": false,
"type": "TextBlock"
}
],
"separator": false,
"type": "Column"
}
],
"separator": false,
"type": "ColumnSet"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "Stripe is a financial infrastructure platform for businesses. Millions of companies—from the world’s largest enterprises to the most ambitious startups—use Stripe to accept payments, grow their revenue, and accelerate new business opportunities.",
"weight": null,
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "",
"weight": null,
"wrap": false,
"separator": false,
"type": "TextBlock"
},
{
"actions": [
{
"url": "https://pifd.cp.microsoft-int.com/v6.0/thirdpartyapi/payment-providers/stripe/link?pid=EAAAALVaK8nU4ZWefXeyQECGz8%2FVNKZr6ySr16%2Bq7OlNAI18GOcskwcGZjNjkHnOwkt%2BY3JZslgeKN8FbtKS5eIVtg%2Fm5KAvB5fCPvyiRGXBjt1tGygq615QDxaZ4c7Jd7JfoCwvdpV7G02YqHB2jC9xIq1C5%2BYQZ0A2A7nwT9%2B4K51zOPBjPvoWPwGGj4KKoZ0LQUJ3ItMknqRcyQYvGtbsj1RhHQomCqbxEyYQDI5Sd1O4&x-ms-correlation-id=hs3+6o2+AkedThG/.0",
"title": "Connect",
"type": "Action.OpenUrl"
}
],
"separator": false,
"type": "ActionSet"
}
],
"style": "default",
"separator": false,
"type": "Container"
}
],
"separator": false,
"type": "Column"
},
{
"items": [
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"horizontalAlignment": null,
"size": "small",
"style": null,
"url": "https://us-prod.asyncgw.teams.microsoft.com/urlp/v1/url/content?url=https%3a%2f%2fpmservices.cp.microsoft.com%2fstaticresourceservice%2fimages%2fv4%2flogo_paypal_rect.png",
"height": "auto",
"separator": false,
"type": "Image"
}
],
"separator": false,
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "**PayPal**",
"weight": "bolder",
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "PayPal Holdings, Inc",
"weight": "lighter",
"wrap": true,
"spacing": "None",
"separator": false,
"type": "TextBlock"
}
],
"separator": false,
"type": "Column"
}
],
"separator": false,
"type": "ColumnSet"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "Accept payments online or in-store in over 100 currencies, get paid quickly, and let your customers pay the way they want with PayPal.",
"weight": null,
"wrap": true,
"separator": false,
"type": "TextBlock"
},
{
"color": null,
"horizontalAlignment": null,
"isSubtle": false,
"maxLines": 0,
"size": null,
"text": "",
"weight": null,
"wrap": false,
"separator": false,
"type": "TextBlock"
},
{
"actions": [
{
"url": "https://pifd.cp.microsoft-int.com/v6.0/thirdpartyapi/payment-providers/paypal/link?pid=EAAAAGTkHF0h%2Bt5UrDTkq8uMNDIdXpOkH12Pxs0a9b5Qw0Sig0AX7YNkomlkCjuf4FOy4ZLi7KEgGklX17wI2Wm%2BKuo8KLCDkRw5ZCaxYomEu6%2Bv%2Bp3nQITraxTWpWmNiJvsoV8nXbOp7TMHV1o1hSdEqOR%2FCYWjrPrBLWuSrVrn1RDzTfFUvm982YOr5umZG5n10sHCh%2BScB%2Fa02BY15hSPFngDUISasqiiSjtSIQtvPSDq&x-ms-correlation-id=hs3+6o2+AkedThG/.0",
"title": "Connect",
"type": "Action.OpenUrl"
}
],
"separator": false,
"type": "ActionSet"
}
],
"style": "default",
"separator": false,
"type": "Container"
}
],
"separator": false,
"type": "Column"
}
],
"spacing": "small",
"separator": false,
"type": "ColumnSet"
}
],
"style": "emphasis",
"bleed": true,
"id": "providers",
"separator": false,
"type": "Container"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"actions": []
}
Sample Code Language
No response
Sample Code
No response