AdaptiveCards icon indicating copy to clipboard operation
AdaptiveCards copied to clipboard

{Linked:Bug2235147}[Adaptive Cards> Designer]: The name of payment provider is not associated with the 'Open' control.

Open vaishali1397 opened this issue 3 years ago • 0 comments

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:

  1. Attached the provided JSON in sample data editor and Card payload editor under Designer tab.
  2. And activate the preview mode.

Repro steps:

  1. Turn on the narrator.
  2. Open the above URL in edge dev browser.
  3. Navigate to the 'Open' button in card.
  4. 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

vaishali1397 avatar Jul 29 '22 07:07 vaishali1397