After activating Send button voice over focus is navigating to Safari Web address edit field.

[maggi1129]

After activating Send button voice over focus is navigating to Safari Web address edit field.

[corinagum]

@maggi1129, could please provide more information? Repro steps and an explanation of what you mean by "Send button voice over focus" would be great. Please also explain expected and actual behavior in as much detail as possible.

[maggi1129]

Repro Steps:
Step 1: Navigate to the any webchat URL in IOS/android device
Step 2: Navigate to type your message edit field and give input "Help".
Step 3: Navigate to send button with voice over "ON" and verify the issue.

Actual Result:

After activating Send button voice over focus is navigating to Safari Web address edit field.

Expected Result:
After activating Send button voice over focus should navigate to "Type your text" edit filed.

Note: Same issue repros in Android phone also.
After activating "Send button", Talkback focus is not on "Type your message" edit field.

[maggi1129]

@corinagum hope the repro steps help

[corinagum]

@maggi1129 Thank you!! Yes they helped a lot. Today I learned about VoiceOver and how the mobile and accessible experience on Web Chat/iOS really leaves something to be desired. However for me on iOS, focus remains on the send button and does not go to the web address field.

@tonyanziano could you try to repro this on Android? https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle/ with command help is sufficient to repro the problem for me. Thanks! In particular I am wondering where focus goes for you after hitting send.

I'll be adding more comments with screencaps of the iOS experience in a few minutes.

[tonyanziano]

I was not able to repro this on Android 9. With Talk Back (Android narrator) enabled, after typing text and hitting the send button, the focus returns to the send box.

[corinagum]

1. Mobile view (on iOS and Android 9) shows a tiny sendbox that is hard to navigate. Accessibility aside, Web Chat should create a better mobile experience simply by making the send box larger and usable without zooming.
   

2. Typing in the send box automatically zooms in but does not show what the user has typed. (I typed 'Help, which you can see in the auto-complete suggestions but you don't see the actual text)
   

3. After hitting send, focus remains on the send button instead of returning to the input of the send box. (this only seems to repro on iOS). Further, the transcript with user's text and bot's response is not visible from this view.

1. Once the bot responds, zooming out to read the text with VoiceOver enabled is extremely cumbersome, I think because the transcript is blocking the interaction with the background. This makes it extremely difficult to read the transcript and interact with it.

[corinagum]

Related to #1789

[compulim]

To "zoom in" on mobile devices, we should add <meta name="viewport" content="initial-scale=1.0, width=device-width" /> to our sample pages so they works nicely on mobile device.