search

microsoft / BotFramework-WebChat

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

When using Talkback, multiple swipes are required to navigate between messages in the transcript. #5047

Open pgopinadhu opened 4 months ago

pgopinadhu commented 4 months ago

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Screen reader users will be impacted as the users get confused and need to swipe many times while navigating. The screen reader users efforts will be increased.

What browsers and screen readers do this issue affect?

Android: Chrome with TalkBack

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?

Transcript navigation

What is the public URL for the website?

No response

How to reproduce the issue?

  1. With an Android device, navigate to https://compulim.github.io/webchat-loader/.
  2. Select the preset "[Public] MockBot" and start a webchat.
  3. Send at least two messages.
  4. Enable TalkBack if not done already.
  5. Tap the first message to focus it. TalkBack should read out its content.
  6. With the first message in focus, swipe right to move focus to the next message.

What do you expect?

Swiping right once should move focus to the next message.

What actually happened?

Moving focus to the next message required five swipes.

  1. After the first swipe, the timestamp for the first message was read out.
  2. After the second swipe, nothing was read out.
  3. After the third swipe, nothing was read out.
  4. After the fourth swipe, "Bot said colon" was read out.
  5. After the fifth swipe, the content of the second message was read out.

Environment Details:

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

https://github.com/microsoft/BotFramework-WebChat/assets/120019572/eb5b853e-4a23-4101-a1c6-4b0cb0cf46a7

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

After the second swipe when nothing is read out, I suspect TalkBack is reading the second FocusRedirector in the FocusTrap wrapping the first message. https://github.com/microsoft/BotFramework-WebChat/blob/58ec6cd3fcd19a8b070f9afad4ae05e6ab6881a4/packages/component/src/Transcript/FocusTrap.tsx#L56C1-L57C1

After the third swipe when nothing is read out, I suspect TalkBack is reading the first FocusRedirector in the FocusTrap wrapping the second message. https://github.com/microsoft/BotFramework-WebChat/blob/58ec6cd3fcd19a8b070f9afad4ae05e6ab6881a4/packages/component/src/Transcript/FocusTrap.tsx#L52C1-L53C1

MAS reference

MAS 1.3.2 – Meaningful Sequence

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

No response

pgopinadhu commented 4 months ago

Bug Copied from TCS team: (https://dev.azure.com/dynamicscrm/OneCRM/_workitems/edit/3593696)

pgopinadhu commented 4 months ago

A11yMAS;#A11ySev2;#HCL;#FeatureBotframeworkwebchat-Apr23;#Accessibility;#MAS1.3.2;

Kirank915 commented 1 month ago

@compulim do you have any update on this issue?

kattepalli commented 3 weeks ago

@compulim As verified issue is still repro and do you have any update on this issue?