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]