search

microsoft / AdaptiveCards

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

{Linked:Bug12323019}[Adaptive Cards > Designer] - Screen Reader does not announce about selection status of "helpful" and "Unhelpful" button present within the IRIS reply card #8963

Open vagpt opened 2 months ago

vagpt commented 2 months ago

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment: URL: https://adaptivecards.io/designer/ OS Version: 24H2 (OS Build 26252.5000) Browser Version: Version 120.0.2186.2 (Official build) dev (64-bit) Screen Reader: Narrator

Pre-Requisite: Run the below attached JSON file under 'Copy Card Payload editor.'

Repro Steps: Open the above URL on the EDGE Dev browser. Run the Json file. Navigate to the Preview mode and press enter key to activate it. Press the tab key and navigate to 'Helpful' and 'Unhelpful' button and press enter key to activate it. Now press tab key again and renavigate to the helpful button and observe the issue.

Actual Result: Screen Reader does not announce about selection status of "helpful" and "Unhelpful" button present within the IRIS reply card.

Expected Result: Screen Reader should announce about selected/unselected status of "helpful" and "Unhelpful" button present within the IRIS reply card. It should announce something like 'Helpful button selected.'

Note: Same issue is observed with NVDA screen reader.

User Impact: Screen Reader users are impacted as they might not know about the selection status of the "Helpful"/"unhelpful" button.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Screenshots

https://github.com/user-attachments/assets/24a11693-b679-4d91-b708-b9139a596341

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Card JSON

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": 10,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "AI-generated content may be incorrect",
                            "wrap": true,
                            "isSubtle": true,
                            "size": "Small",
                            "horizontalAlignment": "Left"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "24px",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/LikeBlue.png",
                            "id": "thumbsUpUnselected",
                            "width": "24px",
                            "height": "24px",
                            "horizontalAlignment": "Right",
                            "altText": "Helpful",
                            "title": "Helpful",
                            "selectAction": {
                                "title": "Helpful",
                                "type": "Action.ToggleVisibility",
                                "data": {
                                    "faqActionType": "HelpfulAnswerFeedback",
                                    "source": "icon"
                                },
                                "targetElements": [
                                    {
                                        "elementId": "thumbsUpSelected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "thumbsUpUnselected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "thumbsDownUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "thumbsDownSelected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "submitThumbsDown",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "submitThumbsUp",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "commentBox",
                                        "isVisible": false
                                    }
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/LikeSolidBlue.png",
                            "id": "thumbsUpSelected",
                            "width": "24px",
                            "height": "24px",
                            "horizontalAlignment": "Right",
                            "altText": "Helpful",
                            "title": "Helpful",
                            "isVisible": false,
                            "selectAction": {
                                "title": "Helpful",
                                "type": "Action.ToggleVisibility",
                                "data": {
                                    "faqActionType": "HelpfulAnswerFeedback",
                                    "source": "icon"
                                },
                                "targetElements": [
                                    {
                                        "elementId": "thumbsUpUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "thumbsUpSelected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "thumbsDownUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "submitThumbsUp",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "commentBox",
                                        "isVisible": false
                                    }
                                ]
                            }
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "24px",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/DislikeBlue.png",
                            "id": "thumbsDownUnselected",
                            "width": "24px",
                            "height": "24px",
                            "horizontalAlignment": "Right",
                            "title": "Unhelpful",
                            "altText": "Unhelpful",
                            "selectAction": {
                                "title": "Unhelpful",
                                "type": "Action.ToggleVisibility",
                                "data": {
                                    "faqActionType": "UnhelpfulAnswerFeedback",
                                    "source": "icon"
                                },
                                "targetElements": [
                                    {
                                        "elementId": "thumbsDownSelected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "thumbsDownUnselected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "thumbsUpSelected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "thumbsUpUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "submitThumbsDown",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "submitThumbsUp",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "commentBox",
                                        "isVisible": true
                                    }
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/DislikeSolidBlue.png",
                            "id": "thumbsDownSelected",
                            "width": "24px",
                            "height": "24px",
                            "horizontalAlignment": "Right",
                            "title": "Unhelpful",
                            "altText": "Unhelpful",
                            "isVisible": false,
                            "selectAction": {
                                "title": "Unhelpful",
                                "type": "Action.ToggleVisibility",
                                "data": {
                                    "faqActionType": "UnhelpfulAnswerFeedback",
                                    "source": "icon"
                                },
                                "targetElements": [
                                    {
                                        "elementId": "thumbsDownSelected",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "thumbsDownUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "thumbsUpUnselected",
                                        "isVisible": true
                                    },
                                    {
                                        "elementId": "submitThumbsDown",
                                        "isVisible": false
                                    },
                                    {
                                        "elementId": "commentBox",
                                        "isVisible": false
                                    }
                                ]
                            }
                        }
                    ]
                }
            ]
        },
        {
            "type": "Input.Text",
            "placeholder": "Leave a comment or suggestion",
            "isMultiline": true,
            "isVisible": false,
            "wrap": true,
            "id": "commentBox"
        },
        {
            "type": "ActionSet",
            "id": "submitThumbsUp",
            "isVisible": false,
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit Feedback",
                    "data": {
                        "faqActionType": "HelpfulAnswerFeedback",
                        "source": "icon"
                    }
                }
            ]
        },
        {
            "type": "ActionSet",
            "id": "submitThumbsDown",
            "isVisible": false,
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit Feedback",
                    "data": {
                        "faqActionType": "UnhelpfulAnswerFeedback",
                        "source": "icon"
                    }
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "**References:**",
                            "wrap": true,
                            "weight": "Bolder",
                            "isSubtle": false,
                            "size": "Small"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "fileIcon0",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Board",
                            "title": "Board"
                        }
                    ],
                    "width": "auto",
                    "type": "Column"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[1] Board",
                            "wrap": true,
                            "size": "Small"
                        },
                        {
                            "type": "Container",
                            "style": "emphasis",
                            "id": "cardContent0",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Adaptive Cards",
                                                    "wrap": true,
                                                    "size": "Small"
                                                }
                                            ],
                                            "width": "stretch"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "chevronDown0",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Board collapsed",
                            "title": "Board collapsed",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Board collapsed",
                                "title": "Board collapsed",
                                "targetElements": [
                                    "cardContent0",
                                    "chevronDown0",
                                    "chevronUp0"
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "id": "chevronUp0",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Board expanded",
                            "title": "Board expanded",
                            "isVisible": false,
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Board expanded",
                                "title": "Board expanded",
                                "targetElements": [
                                    "cardContent0",
                                    "chevronDown0",
                                    "chevronUp0"
                                ]
                            }
                        }
                    ],
                    "width": "auto"
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "fileIcon1",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "List",
                            "title": "List"
                        }
                    ],
                    "width": "auto",
                    "type": "Column"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[2] List",
                            "wrap": true,
                            "size": "Small"
                        },
                        {
                            "type": "Container",
                            "style": "emphasis",
                            "id": "cardContent1",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Backlog",
                                                    "wrap": true,
                                                    "size": "Small"
                                                }
                                            ],
                                            "width": "stretch"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "chevronDown1",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "List collapsed",
                            "title": "List collapsed",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "List collapsed",
                                "title": "List collapsed",
                                "targetElements": [
                                    "cardContent1",
                                    "chevronDown1",
                                    "chevronUp1"
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "id": "chevronUp1",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
                            "width": "24px",
                            "height": "24px",
                            "altText": "List expanded",
                            "title": "List expanded",
                            "isVisible": false,
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "List expanded",
                                "title": "List expanded",
                                "targetElements": [
                                    "cardContent1",
                                    "chevronDown1",
                                    "chevronUp1"
                                ]
                            }
                        }
                    ],
                    "width": "auto"
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "fileIcon2",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Assigned to",
                            "title": "Assigned to"
                        }
                    ],
                    "width": "auto",
                    "type": "Column"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[3] Assigned to",
                            "wrap": true,
                            "size": "Small"
                        },
                        {
                            "type": "Container",
                            "style": "emphasis",
                            "id": "cardContent2",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Matt Hidinger",
                                                    "wrap": true,
                                                    "size": "Small"
                                                }
                                            ],
                                            "width": "stretch"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "chevronDown2",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Assigned to collapsed",
                            "title": "Assigned to collapsed",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Assigned to collapsed",
                                "title": "Assigned to collapsed",
                                "targetElements": [
                                    "cardContent2",
                                    "chevronDown2",
                                    "chevronUp2"
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "id": "chevronUp2",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Assigned to expanded",
                            "title": "Assigned to expanded",
                            "isVisible": false,
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Assigned to expanded",
                                "title": "Assigned to expanded",
                                "targetElements": [
                                    "cardContent2",
                                    "chevronDown2",
                                    "chevronUp2"
                                ]
                            }
                        }
                    ],
                    "width": "auto"
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "fileIcon3",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/txt-icon.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Due date",
                            "title": "Due date"
                        }
                    ],
                    "width": "auto",
                    "type": "Column"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[4] Due date",
                            "wrap": true,
                            "size": "Small"
                        },
                        {
                            "type": "Container",
                            "style": "emphasis",
                            "id": "cardContent3",
                            "isVisible": false,
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Not set",
                                                    "wrap": true,
                                                    "size": "Small"
                                                }
                                            ],
                                            "width": "stretch"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "verticalContentAlignment": "Top",
                    "items": [
                        {
                            "type": "Image",
                            "id": "chevronDown3",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Expand.png",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Due date collapsed",
                            "title": "Due date collapsed",
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Due date collapsed",
                                "title": "Due date collapsed",
                                "targetElements": [
                                    "cardContent3",
                                    "chevronDown3",
                                    "chevronUp3"
                                ]
                            }
                        },
                        {
                            "type": "Image",
                            "id": "chevronUp3",
                            "url": "https://irisstorageaccdev.z5.web.core.windows.net/iris-ux/assets/images/Collapse.jpg",
                            "width": "24px",
                            "height": "24px",
                            "altText": "Due date expanded",
                            "title": "Due date expanded",
                            "isVisible": false,
                            "selectAction": {
                                "type": "Action.ToggleVisibility",
                                "altText": "Due date expanded",
                                "title": "Due date expanded",
                                "targetElements": [
                                    "cardContent3",
                                    "chevronDown3",
                                    "chevronUp3"
                                ]
                            }
                        }
                    ],
                    "width": "auto"
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Couldn't find answer? Create an Incident request",
                    "data": {
                        "faqActionType": "Create Support ticket",
                        "source": "button"
                    }
                }
            ]
        }
    ]
}

Sample Code Language

No response

Sample Code

No response

vagpt commented 2 months ago

Originally tracked with below bug -

https://dev.azure.com/MicrosoftIT/OneITVSO/_workitems/edit/12323019