MS Teams: adaptive cards don't indicate mandatory fields

[sanketdixit2013]

Steps to reproduce:

1. Enable NVDA Screen Reader
2. Focus on the adaptive card with required field text.
3. Observe the screen reader input.

   Actual behavior:

   Whenever there is any interactive element on the card/response(* after textbox) which indicates that this is a mandatory field. The screenreader is reading the textfield as normal text. Hence User will not be able to understand that this field is mandatory for the user to fill the form.

   Expected behavior:

   If there is any interactive element on the card(eg: mandatory field with * after textbox). Screenreader should explain the interactive element to the user, so that user will understand if that is a mandatory field or normal field.

   NVDA logs, crash dumps and other attachments:

System configuration

NVDA installed/portable/running from source:

Windows 10

NVDA version:

2022.3.1

Windows version:

10

Name and version of other software in use when reproducing the issue:

MS Teams

Other information about your system:

Other questions

Does the issue still occur after restarting your computer?

Have you tried any other versions of NVDA? If so, please report their behaviors.

If NVDA add-ons are disabled, is your problem still occurring?

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

[feerrenrut]

It's hard to know the cause of this. Has it been reported to Microsoft?

Because there are so many layers of tech between an application like teams and NVDA, we typically need a minimal sample in order to be able to investigate effectively. For an app like teams, a minimal HTML sample is usually appropriate. This also ensures that some developer has considered whether this sample is using the appropriate accessibility features.

[sanketdixit2013]

Hello @feerrenrut ,

Yes we have reported this to Microsoft and they have suggested us to get in touch with NVDA team. Please find the below sample json of the adaptive card which is having the issue.

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "text": "**Some Text**",
      "wrap": true,
      "weight": "Bolder"
    },
    {
      "type": "TextBlock",
      "text": "Some Text",
      "wrap": true
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "Input.Date",
              "placeholder": "Select a date",
              "id": "OutofOfficeStartDate",
              "label": "Some Text",
              "isRequired": true,
              "errorMessage": "Some Text",
              "min": "2022-10-12"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "Input.Time",
              "placeholder": "--:-- --",
              "id": "OutofOfficeStartTime",
              "isRequired": true,
              "label": "Some Text",
              "errorMessage": "Some Text"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "Input.Date",
              "placeholder": "Select a date",
              "id": "OutofOfficeEndDate",
              "label": "Some Text",
              "isRequired": true,
              "errorMessage": "Some Text",
              "min": "2022-10-12"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "Input.Time",
              "placeholder": "--:-- --",
              "id": "OutofOfficeEndTime",
              "isRequired": true,
              "errorMessage": "Some Text",
              "label": "Some Text"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Some Text",
      "wrap": true,
      "color": "Attention",
      "isVisible": false
    },
    {
      "type": "TextBlock",
      "text": "Some Text",
      "wrap": true,
      "color": "Attention",
      "isVisible": false
    },
    {
      "type": "TextBlock",
      "text": "Some Text",
      "wrap": true
    },
    {
      "type": "Input.Text",
      "wrap": false,
      "placeholder": "Type here…",
      "id": "InsideOrganizationMsg",
      "isMultiline": true,
      "label": "Some Text",
      "isRequired": true,
      "errorMessage": "Some Text",
      "regex": "^(?!\\s*$).+"
    },
    {
      "type": "Input.Text",
      "wrap": false,
      "weight": null,
      "placeholder": "Some Text",
      "id": "OutsideOrganizationMsg",
      "isMultiline": true
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "Action": "OutofOffice",
        "Intent": "BTGeneralOutOfOffice",
        "AdaptiveDelayToken": "OutofofficeDelaymessage",
        "DateEntity": "DateTime"
      }
    },
    {
      "type": "Action.Submit",
      "title": "Cancel",
      "data": {
        "Action": "Cancel",
        "Intent": "BTGeneralOutOfOffice"
      },
      "associatedInputs": "none"
    }
  ]
}

[feerrenrut]

@sanketdixit2013 This is sample is not usable with NVDA. Microsoft engineers (who work on teams) will need to supply a minimal HTML / Javascript / CSS sample that reproduces the issue in a web browser. This helps us to ensure that the bug is not caused by teams itself.

[sanketdixit2013]

@feerrenrut Do you mean we need to ask Microsoft to share this sample? The issue is within the bot application that is for MS Teams platform. The bot shows these adaptive cards to users who chat with it. If you want I can share with you a video of the issue?

[sanketdixit2013]

Hi @feerrenrut , Could you please confirm on the above comment?

[feerrenrut]

@sanketdixit2013, yes or someone else who can reproduce the underlying issue between Chromium and NVDA. Typically, these situations are caused by bugs at the HTML level. The sample allows us to ensure that is not the case, it also makes reproducing the problem easier, as well as investigating the cause.

[sanketdixit2013]

Ok @feerrenrut. I will try to get the sample from MS.

[sanketdixit2013]

Hi @feerrenrut ,

We would really appreciate if you could provide steps to get this sample?

This would be helpful as we as bot engineers may be able to get this sample by reproducing this issue on MS Teams using web browser.

Thanks!

[sanketdixit2013]

Hello @feerrenrut ,

I tried getting the sample. But I'm finding it difficult to get what exactly you will need as sample. I can chat with the bot via chrome browser in web teams so It would be great if you can mention the steps that I need to follow to get this sample.

Thanks!

[PuspanjaliMuduli]

Hi @feerrenrut ,

Here is the html sample for this issue. Let us know if you need more information on this. html-sample-14291.txt

Thanks!

[seanbudd]

This needs to be a minimal HTML sample, something that we as developers can debug and understand.

Provide a minimal HTML sample to reproduce this using codepen which reproduces the issue.

[sanketdixit2013]

Hello @seanbudd,

We have gathered the previously shared sample using chrome browser inspect element. The below screenshot is from codepen where we can see the mandatory fields which are not read by the screen reader. We have pasted the same html there. .

Could you please elaborate a little on what exactly is required in this sample which will help you to reproduce the issue?

Thanks!

[seanbudd]

There is a lot of noise in the HTML. The HTML should be the minimal amount of code required to reproduce the problem you are facing.

these resources may explain what a minimal reproducible example is better. https://en.wikipedia.org/wiki/Minimal_reproducible_example https://stackoverflow.com/help/minimal-reproducible-example

[sanketdixit2013]

Hello @seanbudd,

PFA for the updated html where we have removed the unwanted code. We have only kept the html where there is mandatory field text which is having the issue.

Please let me know if you need any changes. Minimal HTML Sample.txt

Thanks!

[seanbudd]

@sanketdixit2013 - great thanks, this is much easier to work with

[sanketdixit2013]

Hello @seanbudd,

Do you have any updates regarding this issue?

Thanks!

[sanketdixit2013]

Hello @seanbudd,

Is there any updates regarding this issue?

Thanks!

[sanketdixit2013]

Hello @seanbudd, Is there any updates regarding this issue?

Thanks!

[seanbudd]

@sanketdixit2013 there are almost 3000 open issues. When there is an update on the issue, it will be shared here. Please stop spamming. If you want to see this issue fixed sooner, you are welcome to open a pull request.

[Adriani90]

@sanketdixit2013, @PuspanjaliMuduli you have to put the aria 2 atribute on all the inputs that the user needs to do. The aria atribute is aria-required="true", examples are here: https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html

I tested your example by putting these atributes in the inputs and the screen reader then reports that this is a required field.

I am closing this issue since this is not NVDA related issue but rather a web authoring issue.

[sanketdixit2013]

Hello @Adriani90, Thanks for the update. As this input box is inside an adaptive card which we are using in our bot. We just use the adaptive card json to send responses from the bot. As you said we have to put Aria 2 attribute we will request this with Microsoft as we don't have control over the html that is displayed using adaptive card.

[sanketdixit2013]

Hello @Adriani90,

We raised this issue with MS Support and we got a partial fix for this issue. But this issue still persists for input.choiceset schema in Adaptive cards. We raised this with MS but below is the comment from MS Support:

The details read when you focus on the message is from NVDA Reader and not something which Microsoft Engineering can control. As per Teams expected behavior, no content details is expected to be read when the focus lands on the card other than the speak field. The behavior in other readers such as JAWS, Voice Over etc. seems to be in line with this. Since, we don't control the text generated, the same needs to be taken up with NVDA team. This is the final response for request query.

Could you please check this and reopen this ticket? Please let me know if you have any queries.

Thanks!

[Adriani90]

NVDA actually behaves correctly here. According to this source: https://adaptivecards.io/explorer/Input.ChoiceSet.html I am testing in browsers and NVDA reads the required atribute on the adaptive cards as expected. The options in an input.choiseset card can be displayed in a combobox, as radio buttons or as checkboxes, depending if you allow multiselection or not. If they allow multi selection, Then Microsoft should use the aria multiselectable atribute on the adaptive card. In any case, aria-required="true" works correctly in NVDA in comboboxes, radio buttons or checkboxes. So Microsoft should add the aria-required="true" on each radio button or checkbox of the adaptive card, and they should put an aria-required="true" on the combobox in case there is one in the adaptive card, to indicate that at least one option should be chosen.

What kind of card are you using? Are the options displayed as checkboxes? Or Radio buttons? Or what exactly are the elements like?

Here is also a link to the aria multiselectable atribute, maybe this helps as well: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable

[sanketdixit2013]

Hello @Adriani90,

We are using Adaptive cards. The issue is with the compact and expanded style and we are not using multiselect. The compact and expanded style consists of Radio buttons and dropdown. Thanks!

[sanketdixit2013]

Hello @Adriani90,

Could you please check the above comment regarding your question on the type of cards and the choice sets we are using?

Thanks!

[Adriani90]

If you are using adaptive cards 1.3, it seems on compact and expanded versions there is not a required state added to all of them. It is possible in your case Microsoft has provided the wrong type of adaptive card, i.e. the place holder adaptive card does not have a required state. You might need the "is error" adaptive card with compact or expanded property. Or they should add the required state to all of them. This can be found also in the same source: https://adaptivecards.io/explorer/Input.ChoiceSet.html

[sanketdixit2013]

Hello @Adriani90 ,

So you mean that the is required property is not added for all the options? Because I can see there is an required property for the version 1.3 as shown below. We are using the same property in our adaptive card json.

[sanketdixit2013]

Hello @Adriani90 ,

So you mean that the is required property is not added for all the options? Because I can see there is an required property for the version 1.3 as shown below. We are using the same property in our adaptive card json.

Thanks!

[Adriani90]

Hello,

for the input.choiseSet and the inherited properties in adaptive cards 1.3 there is no "is required" atribute added. At least the example with the colors on the website I provided above shows it. NVDA does not report required state on the colors choise set.

However, when you scroll down the page under the link I provided above, you will see the actual properties for single elements such as placeholders, wrapers, radio buttons etc. For those it seems there is a "is required" atribute added and is reported properly by NVDA when focusing the options.

I think Microsoft has to put "is required" atributes on the input.choiceSet as well.

But since we don't have access to your code, I cannot give a more competent answer than this. So if the problem still persists, please send this and the link I provided above to Microsoft and try to clarify it with them. Unfortunately we cannot do anything about this in the NVDA code.