microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.58k stars 1.53k forks source link

Ensures ARIA attributes are allowed for an element's role #4887

Closed Kirank915 closed 8 months ago

Kirank915 commented 11 months ago

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

When an assistive technology encounters a mismatch between an element's role and its state or property attributes, it might ignore attributes or respond in an unexpected way. As a result, people who use assistive technologies might find the element difficult or impossible to use.

What browsers and screen readers do this issue affect?

Windows: Chrome with NVDA

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?

ARIA roles

What is the public URL for the website?

https://servicesuat.microsoft.com/#/opdashboard/

How to reproduce the issue?

  1. Hit the URL https://servicesuat.microsoft.com/#/opdashboard/
  2. Tab till iris bot icon in the header section and press enter.
  3. Iris bit welcome screen will be displayed
  4. Tab till type your message textbox and type Sap access request.
  5. Select self and press enter.
  6. Run fastpass

What do you expect?

Elements must use only ARIA attributes allowed for their implicit or explicit ARIA role

What actually happened?

Ensures ARIA attributes are allowed for an element's role

Environment Details:

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

MicrosoftTeams-image (11)

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

MicrosoftTeams-image (11)

MAS reference

MAS 4.1.2 – Name, Role, Value

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

v-prahu commented 11 months ago

A11yMAS;#A11ySev2;#MAS4.1.2;#HCL;#Accessibility;#FeatureBotframeworkwebchat-Apr23;

Kirank915 commented 11 months ago

This bug is copied from TCS team: Bug 11048400

compulim commented 11 months ago

This is an issue in Adaptive Cards.

The following screenshot showing the payload rendered in Adaptive Cards Designer, with the problematic ARIA attribute.

Adaptive Cards should not put disallowed ARIA attribute to the element.

image

Adaptive Cards JSON

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "2",
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "text": "Please enter the below details to create SAP user account request",
              "wrap": true
            },
            {
              "type": "Input.ChoiceSet",
              "id": "Roles",
              "value": "",
              "style": "expanded",
              "isMultiSelect": true,
              "choices": [
                {
                  "title": "ES Project Manager",
                  "value": "YR:ES_PROJECT_MGR_0000"
                },
                {
                  "title": "ES Relationship Manager",
                  "value": "YR:ES_RELATIONSHIP_MGR_0000"
                },
                {
                  "title": "ES Operations Specialist - Non-Confidential",
                  "value": "YR:ES_OPS_SPECIALIST_0000"
                },
                {
                  "title": "ES Operations Specialist - Confidential",
                  "value": "YR:ES_OPS_SPECIALIST_CNFD_0000"
                },
                {
                  "title": "ES Operations Specialist - Confidential(USPS)",
                  "value": "YR:ES_OPS_SPC_USPS_CNFD_0000"
                },
                {
                  "title": "ES Operations Pricing Maintenance (Business Add On)",
                  "value": "YRESOP0000"
                },
                {
                  "title": "ES Business Desk Support Read Only - Confidential",
                  "value": "YR:ES_BUS_SUPPT_DISP_CNFD_0000"
                },
                {
                  "title": "ES Business Desk Support Read Only",
                  "value": "YR:ES_BUS_SUPPT_DISPLAY_0000"
                },
                {
                  "title": "ES Operations Read Only - Non-Confidential",
                  "value": "YR:ES_OPS_DISPLAY_0000"
                },
                {
                  "title": "ES Operations Read Only - Confidential",
                  "value": "YR:ES_OPS_DISPLAY_CNFD_0000"
                },
                {
                  "title": "ES Operations Read Only - Confidential(USPS)",
                  "value": "YR:ES_OPS_DIS_USPS_CNFD_0000"
                },
                {
                  "title": "ES Project Controller - Non-Confidential",
                  "value": "YR:ES_PROJECT_CONTROLLER_0000"
                },
                {
                  "title": "ES Project Controller - Confidential",
                  "value": "YR:ES_PROJECT_CTRLR_CNFD_0000"
                },
                {
                  "title": "ES Compliance - Non-Confidential",
                  "value": "YR:ES_COMPLIANCE_0000"
                },
                {
                  "title": "ES Compliance - Confidential",
                  "value": "YR:ES_COMPLIANCE_CNFD_0000"
                },
                {
                  "title": "Enterprise Services Authorization Role (Business Add On)",
                  "value": "YRESAD0000"
                },
                {
                  "title": "ES Business Read Only (Plan and Forecast Access)",
                  "value": "YR:ES_BUS_RO_PLFC_0000"
                }
              ],
              "wrap": true,
              "isRequired": true,
              "label": "Role",
              "errorMessage": "Please select the role"
            },
            {
              "type": "Input.Text",
              "id": "Justification",
              "value": "",
              "isMultiline": true,
              "isRequired": true,
              "label": "Business Justification",
              "errorMessage": "Please provide the business justification",
              "wrap": true
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "data": {
        "id": "SAPUserRequest_Submit"
      },
      "title": "Submit"
    }
  ]
}
compulim commented 8 months ago

Please file the issue to Adaptive Cards.