Screen reader announces as required for individual check boxes.

[Kirank915]

Is it an issue related to Adaptive Cards?

Yes.

What is the PWD impact?

It is required to make a selection, but not to select each checkbox. Each checkbox also has the prompt narrated along with its label and that it is required. This increases screen reader verbosity.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator, Windows: Chrome with NVDA, Windows: Chrome/Firefox with JAWS

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

https://www.microsoft.com/en-us/surface?at_preview_token=4FhxMZZq5RXQNNpOOuFqCLBpWwq30eLAUx7_sjX2n68&at_preview_index=1_2&at_preview_listed_activities_only=true i

How to reproduce the issue?

1. Open https://www.microsoft.com/en-us/surface?at_preview_token=4FhxMZZq5RXQNNpOOuFqCLBpWwq30eLAUx7_sjX2n68&at_preview_index=1_2&at_preview_listed_activities_only=true in Edge.
2. Start NVDA.
3. Turn off your monitor.
4. [Tab] to the ‘Help me choose’ button and open the window. Focus will be on the close “X”.
5. Tab x2
6. Use the down arrow key to access the message content.
7. Listen to the prompt.
8. Can you hear that it is required.
9. Now [down arrow] or [Tab] to the selections.
10. Is each selection narrated as required? Is it clear that you are only required to select one or more?

What do you expect?

Screen reader should not announce as required for individual check boxes.

What actually happened?

Screen reader announces as required for individual check boxes. This is incorrect. It is required to make a selection, but not to select each checkbox. Each checkbox also has the prompt narrated along with its label and that it is required. This increases screen reader verbosity.

Do you have any screenshots or recordings to repro the issue?

Did you find any DOM elements that might have caused the issue?

No response

MAS reference

https://aka.ms/MAS1.3.1

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

[Kirank915]

A11yMAS;#A11ySev2;#MAS1.3.1;#AILimited;#HCL;#Accessibility;#FeatureBotframeworkwebchat-Apr23;

[OEvgeny]

Is it an issue related to Adaptive Cards?

No.

This is related to AdaptiveCards as everything with the prefix ac- (in this case ac-choiceSetInput-multiSelect) is displayed by AdaptiveCards

[OEvgeny]

I can't reproduce this anymore: "Help me choose" doesn't open the chat anymore

[OEvgeny]

I was able to repro this. This is due to how the adaptive card formed by the application:

Here is the adaptive card:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "size": "Small",
                            "style": "Person",
                            "url": "https://cdn-dynmedia-1.microsoft.com/is/content/microsoftcorp/HMC-Assistant-Chatbot-Icon%201?scl=1&fmt=png-alpha",
                            "altText": "bot",
                            "text": null,
                            "wrap": null
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "id": "ac-heading-Q1",
                            "size": "Medium",
                            "text": "How will you use your Surface?",
                            "wrap": true,
                            "altText": null,
                            "url": null
                        }
                    ]
                }
            ],
            "choices": null,
            "errorMessage": null,
            "isMultiSelect": null,
            "isRequired": null,
            "label": null,
            "role": null
        },
        {
            "type": "Input.ChoiceSet",
            "id": "usageData",
            "isMultiSelect": true,
            "choices": [
                {
                    "title": "Surf and connect",
                    "value": "Surf and connect"
                },
                {
                    "title": " Entertainment",
                    "value": " Entertainment"
                },
                {
                    "title": " Get things done",
                    "value": " Get things done"
                },
                {
                    "title": " Creating",
                    "value": " Creating"
                },
                {
                    "title": " Top performance",
                    "value": " Top performance"
                }
            ],
            "isRequired": true,
            "label": "Check all that apply",
            "errorMessage": "This is a required input",
            "columns": null,
            "role": "options"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

Can be checked here: https://adaptivecards.io/designer/