Botframework-webchat: [Screen Reader-Intelligent Support Experience-Feedback]: Voiceover/Talkback are not narrating the state(selected) for the buttons present in the Tell us about your experience chat while navigating using right swipe.

[Amit8527510735]

User Impact:
Users who rely on Screen reader are not knowing the state if Voiceover is not narrating the state(selected) for the buttons present in the Tell us about your experience chat while navigating using right swipe.

Product name, version, and build: Intelligent Support Experience/Chrome v.83/Safari
Device: iPhone X, Android
OS : iOS version 13.6.1,version 10
Browser: Safari, Chrome version 83.0.4103.106
URL: https://servicesuat.microsoft.com/#/time/timeentry
Screen Readers: Voiceover, Talkback

Does this repro with other AT? (If applicable): NA

AT version and build (if applicable): NA

Prerequisite (if any): NA

Repro Steps:
Step 1: Open the above URL in Safari/Chrome browser with valid credentials and turn on Voiceover/Talkback
Step 2: Type 'Startover' -> Bot reponse -> Type 'Feedback' -> 'Feedback Screens' card will be displayed.
Step 3: Navigate to buttons (I like something,I don’t like something & I have a suggestion) and select any button.
Step 4: Now navigate to the button Verify whether voiceover/Talkback are narrating the state(selected) or not.

Screenshots:

Actual:
Voiceover/Talkback are not narrating the state(selected) for the buttons present in the Tell us about your experience chat while navigating using right swipe.

Observation: After selecting When the voiceover focus is on I like something button Voiceover is narrating as 'I like something button'

Expected:
Voiceover/Talkback should narrate the state(selected) for the buttons present in the Tell us about your experience chat while navigating using right swipe.

Ex: After selecting When the voiceover/Talkback focus is on I like something button Voiceover/Talkback should narrate as 'I like something button selected'

WCAG Reference:

https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5.html

[Amit8527510735]

A11yMAS;#A11ySev2;#Accessibility;#WCAG4.1.2;#HCL;#HCL_BotFramework_WebChat;#Linked:BUG6389369;#LinkedBug

[corinagum]

Thank you for filing this issue. @compulim could you take a look on Android?

[compulim]

I think the activity is an Adaptive Card.

Adaptive Card should not be used for a one-off choice prompt. It is designed to be able to repetitively submitted. Thus, no selected state is given.

For one-off choice prompt, please use suggested actions.

[Amit8527510735]

@compulim So you are telling this is external to Adaptive Card team? We need to route this to Adaptive Card team ?

[corinagum]

@Amit8527510735 please disregard submitting to Adaptive Card for now

This will need design discussion - UX today can repetitively submit cards (not disabled, no selected state). Move to Suggested Actions? Or add a property for one-off AC? This would need AC 2.0 schema

@sangwoohaan Inline suggested actions changes could be applied here - could you give an update on your schedule for that work item #3083

[Quirinevwm]

@corinagum form design perspective can we go for the following:

• State selection is communicated in voice over: "[content button] selected" versus "Nothing selected yet".
  The questions about the 'active' state of the buttons in the card is still valid. A user could go back and change the initial feedback they have selected, so from like to dislike for example. In that case the communication voice over should describe the newly selected button.
• For the UI coloring, this issue is focused on the state call out in the communication layer (previous comment). I do think for selection in adaptive cards, we can provide the user with visual feedback (an outline, or lighter shade). That would be something to explore separate from this issue. Since in this particular case, when you would go back and look at the card, you would see your previous selected option highlighted (also in voice over) and you would have the ability to make changes.

[corinagum]

@Quirinevwm thanks for the feedback!

Makes sense on the first bullet!

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/l.disable-adaptive-cards

Regarding second bullet: We have a sample that allows the user to see what they selected previously (visually; screenreader feature is not enabled yet), by changing the background color of the button they selected. This sample also disables old cards, but please ignore that part of the feature re this discussion.

To get this feature that user has to implement the code in the sample. Would you say this is something that should be available as a property to Web Chat developers by default? In this sample, the button background turns blue (which in our case is the accent color for Web Chat), but if you think outline or lighter shade is better, please let us know. If you think we should have this available by default, we can create a new feature-request for tracking and I will move this discussion over there.

Now that I've typed it all out, to me it seems like we absolutely should have have the button selected indication available by default, but just in case I will leave the question haha.

@compulim since this is assigned to you I'll let you handle any other questions.

[Quirinevwm]

@corinagum thanks for sharing your thinking regarding the 2nd bullet ;) I do think it should be available as a property by default, since it's an indicator of progress for the end user. If the accent color for Web Chat is already set to that kind of blue, I think it might be best to go for a thicker outline around the selection. So "previous selected" pattern is a thicker outline in that color blue.

This way the accent color can still be used for set actions (full on blue color) as a "recommended" button, just a in GitHub when you write up a comment, the "comment" button is in full color.

So I would not like to copy this exact pattern, for the previously selected pattern.

[amal-khalaf]

@Amit8527510735
I did some more research regarding aria-selected and when adding this attribute to Adaptive-Card button , AT is not announcing the selected message.
I also tried changing the 'role' attribute to 'button' instead of "menuitem" and still AT did not announce "selected"

so only thing which worked for me was:
setting role='button' and adding aria-pressed="true" : AT announced 'Foo button pressed' instead of "foo button selected"

is this an acceptable work around until Adaptive Card team support this out of the box?

[Amit8527510735]

@amal-khalaf : Yes above work around is acceptable.

[Amit8527510735]

@amal-khalaf whenever you implement the workaround, please let us know will validate the issue.

[Amit8527510735]

@amal-khalaf Can you please confirm is this ready for re-test?

[amal-khalaf]

@Amit8527510735 I am having some issues in our CI tests - will update this thread when the change is merged to master branch.

[corinagum]

@Amit8527510735 this is ready for re-test on https://cdn.botframework.com/botframework-webchat/4.12.0/webchat-es5.js

Could you verify?