[MAS4.1.2][Name, Role and Value-Debug] Incorrect role is defined for the chat boxes.

[ShikhaMishra11]

Actual Result: The chat boxes are defined in the list but they are not accessible by up/down arrow key whereas they are accessible by tab only, due to tab access on each chat boxes the user will not be able to reach "New Message" button.

Expected Result: The chat boxes should be accessible by up and down arrow and on pressing tab from chat box the focus should jump on "New Message" button.

Repro Steps:

1. Open the Bot Framework V4 Emulator.
2. Welcome tab screen gets opened.
3. Navigate to the "Open Bot" button and activate it.
4. Open a Bot Dialog box gets opened.
5. Navigate to the "bot URL" edit box and enter URL- http://localhost:3979/api/messages
6. Enter "Microsoft App ID and Microsoft App Password". As well as check debug mode.
7. Navigate to "Connect" button and activate it.
8. "Debug" separate window appears.
9. Copy the "/INSPECT attach ” and paste it in M.S. Teams opened from "Azure Portal"
10. Chat with the created bot, the chat's done on "MS Teams" are appeared on the "Debug" screen.
11. Navigate to the chat boxes and observe the issue.

User Impact: Keyboard user will have to use "Tab" key again and again, if the chat list have more data. As well as to reach to the next item i.e. "JSON", the user must be go through all the chat.
More over the AT user will not be able to activate or use the functionality of "New Message" button.

Note: Same issue observed on "Live chat" screen.

Observation: "New Message" button can be accessed by mouse. Moreover if it can be accessed by any predefined "Shortcut keys" it will be beneficial for the user.

Test Environment: OS: Ubuntu 18.04.3 LTS Application: BotFramework-Emulator-4.5.2-linux

Impacted MAS Link: https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={54f28d1f-a2d1-4dcd-84e1-5c9b87e8aba4}

Attachment: Incorrect role is defined for the chat boxes.zip

[tonyanziano]

@corinagum @compulim This would have to be fixed at the Web Chat level and is not a Linux-specific issue.

The problem is that the "New messages" button on Web Chat to scroll down to the bottom is not easily accessible via keyboard. By the time you use tab to navigate to where it would be in the DOM, you are already at the bottom of the messages panel, which causes the button to disappear.

The only way you can access it currently is via mouse, or by putting focus into the send box, and then using shift-tab to go out of the send box, to the button.

[corinagum]

@tonyanziano agreed. I'm a little sad that I overlooked this. ~I'm going to transfer this over to Web Chat for tracking.~ Thanks for the heads up. I'll wait to discuss with you before I transfer xD

[corinagum]

@ShikhaMishra11, @awalia13, what role should the transcript be changed to do allow for up/down arrow navigation?

[awalia13]

@tonyanziano Though the role is correct in code which is list item ideally element should be accessible through up\down arrow key but we are not able to access the element through up/down arrow , they are only accessible through tab key. Due to the use of tab we are not be able to use the functionality of "New Messages" button. It is beneficial if the user reaches the first chat elements with Tab then navigate to them via arrow keys. On pressing next tab the focus should lands on the "New Message" button. By this implementation the user will able to use each and every functionality of the application.

[corinagum]

@awalia13 so if the role is correct, what behavior needs to be corrected here? My plan is to add an access key that will return focus to the send box, with an aria-live region that will announce the presence of the button and shortcut when it shows up. I'm also seeing the transcript as navigable via arrows when in scan mode. Is it true that the arrows need to be enabled for non-scan mode as well?

[ShikhaMishra11]

@corinagum We took the SME opinion on this issue. According to him, "The focus should go to each item of the list via up/down arrow keys. This is the expectation in order to avoid the navigation flaws". As well as i agree with you to implement the shortcut key to access the "New Message" button.

[corinagum]

Thank you! Just one more clarification: should up/down arrows work in non-scan mode? I am confused on this point.

[awalia13]

@corinagum - It should work in both modes Scan/Non-Scan mode.

[corinagum]

@awalia13 I believe there are two problems that are being addressed in this issue.

1. Up/down arrows in AT mode should navigate up and down the transcript
2. New Messages button is not reachable via keyboard

Right now, my question is only regarding:

Up/down arrows in AT mode should navigate up and down the transcript

To summarize the issue with problem 1 above, currently in Web Chat AT focus does not navigate from the send box (bottom input) to inside the transcript. This makes it difficult for keyboard users to individually access different activities in the transcript, and to review the conversation.

I have been having trouble finding a fix for this. However, I believe this is an Edge problem, not a Web Chat problem.

Please see attached for my sample index.html, which I have tested in Chrome x Narrator (a) and Edge Anaheim x Narrator (b). 1978.zip

• I am able to navigate through the transcript using up and down arrows in Web Chat, using Narrator x Chrome
• When I open the index.html file in (a), I am able to navigate through the different DOM objects using up and down arrows in Narrator x Chrome
• I am NOT able to navigate using up and down arrows in Edge x Narrator using Web Chat, nor in the index.html

For the following error, can we mark the following as an Edge problem?

Up/down arrows in AT mode should navigate up and down the transcript

Please note: I will continue working on the following regardless of outcome of the above:

New Messages button is not reachable via keyboard

I am happy to schedule a call to go over this in real time to discuss questions / solutions.

[ashish315]

@corinagum As per previous comments. The bug is fixed for the online bot emulator but our issue are still repro for "Bot Emulator Framework" application.

The chats should be accessible by up/down arrow in all mode (Keyboard and Screen reader). For reference you can have a look on "MS Teams or Skype". For the second issue i.e. 'New Message', it sounds good to have a shortcut key to reach them but it should also be accessible by tab as if the new user will use the application who is not aware of shortcut keys. He also be able to access the "New Message" button.

[corinagum]

Thank you for the help.

After looking into this problem more closely, I recall that each activity being clickable is by design. Since every activity can be accessed in the log panel, it is necessary for the user to be able to iterate through all of them. This means that the user will still be tabbing from the activity they search all the way to the sendbox. This behavior is different from Web Chat, but is also intentional.

The accesskey will be announced when a new message arrives, and allow the user to move to the bottom. Rather than focusing on the New Message button, it will focus on the sendbox.

I request to close this issue due to 'by design'

[ShikhaMishra11]

As per above comment I am closing the bug.