{Linked:Bug13080573}[Adaptive Cards > Designer] - After activating the Submit button, screen reader does convey checkbox information along with the Error message.

[vagpt]

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 27766.1000)
Browser Version: Version 132.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:

1. Open the above URL on the EDGE Dev browser.
2. Run the Json file.
3. Navigate to the Preview mode and press enter key to activate it.
4. Navigate to the card and press tab key and navigate to the Submit button.
5. Without filling required values Press enter key to activate submit button and observe the issue.

Actual Result:
Without filling required values on activating the Submit button, screen reader is announcing the checkbox information along with error message.
It is announcing as "Invoices (Number - Amount(Currency)) The invoice field is required. ${Title} check box not checked required".

Expected Result:
Screen Reader should not announce the checkbox information while activating the Submit button. It should announce only Error message and it should announce as "Invoices (Number - Amount(Currency)) The invoice field is required.".

Note:
Same issue is repro with NVDA.

User Impact:
It will impact the screen reader user as they will get confused if the screen reader will convey the extra information along with error message.

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

Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.

Screenshots

Untitled.video.-.Made.with.Clipchamp.63.mp4

Card JSON

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": 2,
          "items": [
            {
              "type": "TextBlock",
              "text": "Please enter the below details to create cancellation and rebill request",
              "weight": "bolder",
              "wrap": true
            },
            {
              "type": "Input.ChoiceSet",
              "id": "InvoiceNumber",
              "style": "expanded",
              "isMultiSelect": true,
              "isRequired": true,
              "errorMessage": "The invoice field is required.",
              "label": "Invoices (Number - Amount(Currency))",
              "choices": [
                {
                  "$data": "${invoiceChoices}",
                  "title": "${Title}",
                  "value": "${Value}"
                }
              ],
              "value": "${if(empty(updateRequest.InvoiceNumber), '', updateRequest.InvoiceNumber)}"
            },
            {
              "type": "Input.Number",
              "label": "Total amount of expenses to be billed",
              "wrap": true,
              "isRequired": true,
              "errorMessage": "The total amount of expenses to be billed is required.",
              "id": "InvoiceAmount",
              "value": "${if(equals(invoiceAmount,0), '', invoiceAmount)}"
            },
            {
              "type": "Input.ChoiceSet",
              "id": "Milestones",
              "style": "expanded",
              "isMultiSelect": true,
              "isRequired": true,
              "errorMessage": "The milestone field is required.",
              "label": "Billed Milestones (Description - Amount(Currency))",
              "wrap": true,
              "choices": [
                {
                  "$data": "${milestoneChoices}",
                  "title": "${Title}",
                  "value": "${Value}"
                }
              ],
              "value": "${if(empty(updateRequest.Milestones), '', updateRequest.Milestones)}"
            },
            {
              "type": "Input.Date",
              "label": "Transaction from date",
              "id": "FromDate",
              "value": "${if(empty(updateRequest.FromDate), '', updateRequest.FromDate)}"
            },
            {
              "type": "Input.Date",
              "label": "Transaction to date",
              "id": "ToDate",
              "value": "${if(empty(updateRequest.ToDate), '', updateRequest.ToDate)}"
            },
            {
              "type": "Input.ChoiceSet",
              "id": "Reason",
              "style": "compact",
              "isMultiSelect": false,
              "isRequired": true,
              "errorMessage": "Please select a reason",
              "label": "Reason",
              "choices": [
                {
                  "$data": "${reasonChoices}",
                  "title": "${Title}",
                  "value": "${Value}"
                }
              ],
              "value": "${if(empty(updateRequest.Reason), '', updateRequest.Reason)}"
            },
            {
              "type": "Input.Text",
              "id": "Comments",
              "label": "Comments",
              "wrap": true,
              "isMultiline": true,
              "value": "${if(empty(updateRequest.Comments), '', updateRequest.Comments)}"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "id": "CancelAndRebillRequest_Submit"
      }
    }
  ]
}

Sample Code Language

No response

Sample Code

No response