microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.
https://adaptivecards.io
MIT License
1.75k stars 547 forks source link

[Rendering] iOS Accessibility not following correct order #6754

Closed blue-stone99 closed 1 year ago

blue-stone99 commented 2 years ago

Target Platforms

iOS

SDK Version

Source code from commit

Application Name

Cisco Webex

Problem Description

When using Voice Over, the logical flow is not in order. The expected flow would be, Right -> Left and Top -> Bottom. The flow is diverged especially when a Column is encountered The behaviour of FactSet is different too, It reads all the titles first (vertically) and then all the values. The expected would be like title -> value (horizontally)

Screenshots

ezgif com-gif-maker

Card JSON

// There are 2 example JSONs here
// First card JSON
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Upgrade Schema Support to 1.2",
            "weight": "Bolder",
            "size": "Medium"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://i.postimg.cc/ht5NHX42/Screen-Shot-2020-04-29-at-1-42-1.png",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Carmen Harrison",
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Created {{DATE(2020-02-14T06:08:39Z, SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "1.2 contains the following features:\nRich text blocks, Background images, Action set buttons, and Container styles.",
            "wrap": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Board:",
                    "value": "Buttons and Cards"
                },
                {
                    "title": "List:",
                    "value": "Backlog"
                },
                {
                    "title": "Assigned to:",
                    "value": "Carmen Harrison"
                },
                {
                    "title": "Due date:",
                    "value": "Feb 25, 2020"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "Set due date",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "Input.Date",
                        "id": "dueDate"
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        },
        {
            "type": "Action.ShowCard",
            "title": "Comment",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "isMultiline": true,
                        "placeholder": "Enter your comment"
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        }
    ]
}

// Second JSON
{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "actions":[
      {
         "card":{
            "actions":[
               {
                  "data":{
                     "FoodChoice":"Steak"
                  },
                  "title":"OK",
                  "type":"Action.Submit"
               }
            ],
            "body":[
               {
                  "size":"medium",
                  "text":"How would you like your steak prepared?",
                  "type":"TextBlock",
                  "wrap":true
               },
               {
                  "choices":[
                     {
                        "title":"Rare",
                        "value":"rare"
                     },
                     {
                        "title":"Medium-Rare",
                        "value":"medium-rare"
                     },
                     {
                        "title":"Well-done",
                        "value":"well-done"
                     }
                  ],
                  "id":"SteakTemp",
                  "style":"expanded",
                  "type":"Input.ChoiceSet"
               },
               {
                  "id":"SteakOther",
                  "isMultiline":true,
                  "placeholder":"Any other preparation requests?",
                  "type":"Input.Text"
               }
            ],
            "type":"AdaptiveCard"
         },
         "title":"Steak",
         "type":"Action.ShowCard"
      },
      {
         "card":{
            "actions":[
               {
                  "data":{
                     "FoodChoice":"Chicken"
                  },
                  "title":"OK",
                  "type":"Action.Submit"
               }
            ],
            "body":[
               {
                  "size":"medium",
                  "text":"Do you have any allergies?",
                  "type":"TextBlock",
                  "wrap":true
               },
               {
                  "choices":[
                     {
                        "title":"I'm allergic to peanuts",
                        "value":"peanut"
                     }
                  ],
                  "id":"ChickenAllergy",
                  "isMultiSelect":true,
                  "style":"expanded",
                  "type":"Input.ChoiceSet"
               },
               {
                  "id":"ChickenOther",
                  "isMultiline":true,
                  "placeholder":"Any other preparation requests?",
                  "type":"Input.Text"
               }
            ],
            "type":"AdaptiveCard"
         },
         "title":"Chicken",
         "type":"Action.ShowCard"
      },
      {
         "card":{
            "actions":[
               {
                  "data":{
                     "FoodChoice":"Vegetarian"
                  },
                  "title":"OK",
                  "type":"Action.Submit"
               }
            ],
            "body":[
               {
                  "size":"medium",
                  "text":"Would you like it prepared vegan?",
                  "type":"TextBlock",
                  "wrap":true
               },
               {
                  "id":"Vegetarian",
                  "title":"Please prepare it vegan",
                  "type":"Input.Toggle",
                  "valueOff":"notVegan",
                  "valueOn":"vegan"
               },
               {
                  "id":"VegOther",
                  "isMultiline":true,
                  "placeholder":"Any other preparation requests?",
                  "type":"Input.Text"
               }
            ],
            "type":"AdaptiveCard"
         },
         "title":"Tofu",
         "type":"Action.ShowCard"
      }
   ],
   "body":[
      {
         "text":"What color do you want? *(isMultiSelect:false, style:compact)*",
         "type":"TextBlock"
      },
      {
         "choices":[
            {
               "title":"Red",
               "value":"1"
            },
            {
               "title":"Green",
               "value":"2"
            },
            {
               "title":"Blue",
               "value":"3"
            }
         ],
         "id":"myColor",
         "isMultiSelect":false,
         "style":"compact",
         "type":"Input.ChoiceSet",
         "value":"1"
      },
      {
         "text":"What color do you want? *(isMultiSelect:false, style:expanded)*",
         "type":"TextBlock"
      },
      {
         "choices":[
            {
               "title":"Red",
               "value":"1"
            },
            {
               "title":"Green",
               "value":"2"
            },
            {
               "title":"Blue",
               "value":"3"
            }
         ],
         "id":"myColor2",
         "isMultiSelect":false,
         "style":"expanded",
         "type":"Input.ChoiceSet",
         "value":"1"
      },
      {
         "text":"What colors do you want? *(isMultiSelect:true, style:compact)*",
         "type":"TextBlock"
      },
      {
         "choices":[
            {
               "title":"Red",
               "value":"1"
            },
            {
               "title":"Green",
               "value":"2"
            },
            {
               "title":"Blue",
               "value":"3"
            }
         ],
         "id":"myColor3",
         "isMultiSelect":true,
         "style":"compact",
         "type":"Input.ChoiceSet",
         "value":"1,3"
      },
      {
         "text":"What colors do you want? *(isMultiSelect:true, style:expanded)*",
         "type":"TextBlock"
      },
      {
         "choices":[
            {
               "title":"Red",
               "value":"1"
            },
            {
               "title":"Green",
               "value":"2"
            },
            {
               "title":"Blue",
               "value":"3"
            }
         ],
         "id":"myColor4",
         "isMultiSelect":true,
         "style":"expanded",
         "type":"Input.ChoiceSet",
         "value":"1"
      },
      {
         "size":"medium",
         "text":"Your registration is almost complete",
         "type":"TextBlock",
         "weight":"bolder",
         "wrap":true
      },
      {
         "items":[
            {
               "actions":[
                  {
                     "data":{
                        "action":"approve",
                        "id":"_qkQW8dJlUeLVi7ZMEzYVw"
                     },
                     "style":"positive",
                     "title":"Approve",
                     "type":"Action.Submit"
                  },
                  {
                     "card":{
                        "actions":[
                           {
                              "data":{
                                 "action":"reject",
                                 "id":"_qkQW8dJlUeLVi7ZMEzYVw"
                              },
                              "title":"Send",
                              "type":"Action.Submit"
                           }
                        ],
                        "body":[
                           {
                              "id":"RejectCommentID",
                              "isMultiline":true,
                              "placeholder":"Please specify an appropriate reason for rejection.",
                              "type":"Input.Text"
                           }
                        ],
                        "type":"AdaptiveCard"
                     },
                     "style":"destructive",
                     "title":"Reject",
                     "type":"Action.ShowCard"
                  }
               ],
               "type":"ActionSet"
            }
         ],
         "type":"Container"
      },
      {
         "text":"What type of food do you prefer?",
         "type":"TextBlock",
         "wrap":true
      },
      {
         "imageSize":"medium",
         "images":[
            {
               "altText":"Steak cut with fries",
               "type":"Image",
               "url":"thumbnail://cardcontents/info?messageId=a9cf1190-cf2d-11eb-a40a-6f7e941d6ecf&contentIndex=0&width=600&height=600"
            },
            {
               "altText":"Fried chicken with lettuce",
               "type":"Image",
               "url":"thumbnail://cardcontents/info?messageId=a9cf1190-cf2d-11eb-a40a-6f7e941d6ecf&contentIndex=1&width=600&height=600"
            },
            {
               "altText":"Tofu topped with red sauce",
               "type":"Image",
               "url":"thumbnail://cardcontents/info?messageId=a9cf1190-cf2d-11eb-a40a-6f7e941d6ecf&contentIndex=2&width=600&height=600"
            }
         ],
         "type":"ImageSet"
      }
   ],
   "type":"AdaptiveCard",
   "version":"1.0"
}

Sample Code Language

No response

Sample Code

No response

jonmill commented 2 years ago

@matthidinger - this looks to be a Cisco WebEx issue....do they have a GitHub repo we can re-file this in? If not, who is the right contact for this?

jonmill commented 2 years ago

@JeanRoca - FYI

akaashdev commented 2 years ago

@jonmill, This was reported by me. @blue-stone99 is my Github account (created with cisco id). Apologies for the confusion caused here. About this issue, it's reproducible with ADCiOSVisualizer app also.

jwoo-msft commented 1 year ago

fixed in the main and the latest patch release. 2.8.8