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

[Screen Reader-Intelligent Support Experience-Rate your experience]: Voiceover/Talkback is not narrating the name and state for the star rating controls present in 'Rate your experience' message section. #3621

Closed Amit8527510735 closed 3 years ago

Amit8527510735 commented 3 years ago

User Impact: Screen readers users will face difficulty while navigating over the star rating controls if Voiceover doesn't narrate the name and state. Hence users might not be able to understand the functionality and the purpose of these controls.

Product name, version, and build: Intelligent Support Experience/Chrome v.84 OS : iOS version 13.6.1,version 10 Device: iPhone X, Android 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: Select 'Bot' control from the header section of the page. Step 3: Say 'Hi' to Iris chat bot. Step 4: 'Would you like me to create a support ticket for you?' response comes back. Step 5: Choose 'No' to reply back. Step 6: Reply with 'No' for 'Is there anything else that I can help you with?' response from chat bot. Step 7:Navigate over the star rating buttons of 'Rate your experience!' message using right swipe. Step 8: Verify whether VoiceOver /Talkback is announcing the name and state for the star rating controls or not.

Screenshots: image

image

Actual: Voiceover/Talkback is not narrating the name and state for the star rating controls present in 'Rate your experience' message section. Observation: When the voiceover focus is on rating stars Voiceover is announcing as "undefined button"

Expected: Name and state should be defined for the star rating controls present in 'Rate your experience' message section. Ex: Voiceover/Talkback should announce as "1 star button selected/not selected"

WCAG Reference Link: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html https://www.w3.org/WAI/WCAG21/Techniques/general/G108

Amit8527510735 commented 3 years ago

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

corinagum commented 3 years ago

Thank you for reporting this issue. @compulim could you take a look?

compulim commented 3 years ago

I believe this is an Adaptive Card.

Adaptive Card is designed to allow repetitive input, thus, selection is not marked. For one-off choice prompt, please use suggested actions, or render a custom activity.

Amit8527510735 commented 3 years ago

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

corinagum commented 3 years ago

@Amit8527510735 Could you share your Adaptive Card json? If the stars are custom-implemented, this problem would need to be resolved by the customizer (bot developer).

Amit8527510735 commented 3 years ago

@corinagum Will discuss with CSEO team and if possible will provide Adaptive Card json.

Amit8527510735 commented 3 years ago

@corinagum Please find JSON in the attachment rating-card.zip

corinagum commented 3 years ago

I believe this is external to Web Chat and needs to be brought up with the Adaptive Cards team. At the moment, I'm not sure what the accessibility status of Toggle Visibility actions are.

As a workaround, please note @compulim's comment above, rendering a custom activity or using suggested actions.