BotFramework-WebChat icon indicating copy to clipboard operation
BotFramework-WebChat copied to clipboard

A11y_Finance Digital Assistant_Profile_like_AI4W-Ensures buttons have discernible text (.webchat__suggested-action__button[aria-keyshortcuts="Alt\ \+\ Shift\ \+\ A"])

Open KattaBhargav opened this issue 2 years ago • 5 comments

Environment Details:

  • Application Name: Finance Digital Assistant.
  • #URL: Finance Digital Assistant (microsoft.com)
  • OS Details: Microsoft Windows 11 Enterprise Version 21H2(OS build: 22000.318) Chromium Edge Version: Version 100.0.1185.44 (Official build) (64-bit)

Issue:

Ensures buttons have discernible text (button-name - https://accessibilityinsights.io/info-examples/web/button-name)

Target application:

Finance Digital Assistant - https://staging-fda.microsoft.com/fda/?&hostappid=1ED4BBD7-CF02-41D2-8363-8F21EF7F07F5

Element path:

.react-film__filmstrip__item:nth-child(1) > .webchat__suggested-action.webchat--css-ohhjn-xccdat.webchat--css-ohhjn-oe4onf > .webchat__suggested-action__button[aria-keyshortcuts="Alt\ +\ Shift\ +\ A"]

Snippet:

How to fix:

Fix any of the following:

  1. Element does not have inner text that is visible to screen readers
  2. aria-label attribute does not exist or is empty
  3. aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  4. Element has no title attribute
  5. Element's default semantics were not overridden with role="none" or role="presentation"

MAS Reference:

MAS 4.1.2 – Name, Role, Value

KattaBhargav avatar Jun 28 '22 13:06 KattaBhargav

#A11yMAS;#A11ySev2;#HCL;#WCAG4.1.2;#Accessibility;#Win11-Edge(Chromium);#BotFrameworkWebChat-Aug21;#Linked:Bug8884824;#LinkedBug;

KattaBhargav avatar Jun 28 '22 13:06 KattaBhargav

Bug copied from Azurebot team Bug id:-BUG 8884824

KattaBhargav avatar Jun 28 '22 13:06 KattaBhargav

Thanks @KattaBhargav. This will take some time, my backlog of accessibility stuff is quite full right now. 😁

And I have access to the bot. 😉

compulim avatar Jun 28 '22 19:06 compulim

There are no repro steps in the issue. I am guessing this issue is talking about the upvote/downvote button that appears after a conversation.

image

compulim avatar Jul 25 '22 17:07 compulim

There are two things need to be done to resolve this issue:

  1. Web Chat to support imageAltText field
    • Currently, the schema did specify the imageAltText field
    • However, the schema did not specify where to use this field
    • Filed a bug to resolve this schema deficiency, https://github.com/microsoft/botframework-sdk/issues/6527
  2. Bot author needs to use this field
    • Currently, the bot does not reply with imageAltText
    • image

compulim avatar Jul 25 '22 17:07 compulim

This is fixed on Web Chat side in #4441.

The bot author would still need to modify their bot to use this field. Instructions have been given above.

compulim avatar Oct 28 '22 18:10 compulim