Keyboard navigation issue inside the Chatbot window

[venkatoesc]

We are using webchat-es5.js for our Virtual assistant and it should be 508 compliant. Users not able to navigate the virtual agent using keyboard. The focus is not going inside the chatbot window. When pressing tab key, the entire chatbot window getting focused and shows "end of transcript" with black outline. In version 4.11.0, it works fine and no Black outline.

Screenshots

Version

webchat es5 version 4.12.0
https://cdn.botframework.com/botframework-webchat/4.12.0/webchat-es5.js
Integrating the CDN version js directly on the page using script tag (No Iframe). Desktop Chrome Browser.

<meta name="botframework-directlinespeech:version" content="4.12.0">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.12.0">
<meta name="botframework-webchat:core:version" content="4.12.0">
<meta name="botframework-webchat:ui:version" content="4.12.0">"

Describe the bug

We are using webchat-es5.js for our Virtual assistant and it should be 508 compliant. Users not able to navigate the virtual agent using keyboard. The focus is not going inside the chatbot window. When pressing tab key, the entire chatbot window getting focused and shows "end of transcript".

Steps to reproduce

1. Create web app bot
2. Integrate the bot as floatable using Javascript (add in host webpage DOM) + webchat-es5.js version 4.12.0
3. Open the chatbot in Chrome browser.
4. Press tab key on keyboard.
5. Type some text in question box and press Shift + Tab (to navigate backwards).

Expected behavior

1. On Step 3 and Step 4 above, the focus should navigate to each element(Buttons, textboxes) in the chatbot.

Additional context

When the chatbot div is on focus, it shows black outline, but doesn't allow to navigate inside with keyboard.

[Bug]

[corinagum]

This is by design. When user is focused inside the transcript (black line), they are able to use up/down arrows to navigate individual activities.

#3703

[compulim]

@venkatoesc you can read more about the design here, https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/ACCESSIBILITY.md#ux-navigating-activities-in-the-transcript.

The background story is:

• This is an accessibility requirement we gathered from our customers. In one-line: use up/down arrow keys to navigate the transcript;
• Web Chat is a complex UI component. In the transcript, some activities may contain focusable elements, such as buttons.

WAI-ARIA does not offer any guidelines for chat UI or UI with nested focus like Web Chat. Please do correct us if we overlooked it.

So, the closest we could get from WAI-ARIA and WAI-ARIA Authoring Practices is a grid scenario, like Excel.

Transcript accessibility as a grid:

• After end-user focuses on the grid, they can use up/down arrow keys to navigate across cells;
• 20-50% of cells contain focusable buttons;
• The grid is very large, and we are only able to show < 5% of all cells in any viewport;
• The input box is the next common thing they would use, but unlike Excel where it is at the top of the grid, it is below the grid
  • In other words, to get to the input box, the user presses TAB instead of SHIFT + TAB (or F2).

In this setting, if the end-user's focus is on the grid, what's the quickest way to get to the input box? They will press TAB. But since many grid cells contains multiple focusable buttons, it is very likely that the viewport will jump to an unexpected location. Their action does not match their intention. They need to press TAB several times to get to the input box.

So we decided not to allow end-user to use TAB key to focus on the button. Instead, they should use up/down arrow keys plus ENTER to focus inside the message, i.e. focus on the button.

If you have a better (or more creative) idea to make the Web Chat more accessible and would provide a better UX, please do let us know. I am happy to experiment it together and potentially implement it in production.

[venkatx5]

Thanks a lot for the clarification!