BotFramework-WebChat
BotFramework-WebChat copied to clipboard
microsoft
When using Talkback, multiple swipes are required to navigate between messages in the transcript.
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?
- With an Android device, navigate to https://compulim.github.io/webchat-loader/.
- Select the preset "[Public] MockBot" and start a webchat.
- Send at least two messages.
- Enable TalkBack if not done already.
- Tap the first message to focus it. TalkBack should read out its content.
- 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.
- After the first swipe, the timestamp for the first message was read out.
- After the second swipe, nothing was read out.
- After the third swipe, nothing was read out.
- After the fourth swipe, "Bot said colon" was read out.
- After the fifth swipe, the content of the second message was read out.
Environment Details:
- Application Name: Chat widget
- URL: https://ppe2dot1with5dot1serorg3.crm10.dynamics.com/
- App name: Customer Service admin centerC
- Device: Android Version 14.
- Organization name: ppe2dot1with5dot1serorg3
- Server version: 9.2.23053.00184
- Client version: 1.4.5733-2305.3
- #URL: React App (windows.net)
- Browser: Chrome
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
Bug Copied from TCS team: (https://dev.azure.com/dynamicscrm/OneCRM/_workitems/edit/3593696)
#A11yMAS;#A11ySev2;#HCL;#FeatureBotframeworkwebchat-Apr23;#Accessibility;#MAS1.3.2;
@compulim As verified issue is still repro and do you have any update on this issue?
