[KEYBOARD]: Navigation through the chat log must be easy and intuitive

[ianpsant]

Please view our Technical Support Guide before filing a new issue.

Screenshots

Version

<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

• As a keyboard user, I want to be be able to tab to the chat log container, and use arrow keys to scroll, instead of jump from one message to the next. This feels like custom behavior that could interfere with screen readers.
• As a screen reader user, I do not want custom navigation to interfere with default navigation patterns

Steps to reproduce

The screen reader instructions say to use "arrow keys" to navigate through messages, and sighted users are not offered any instructions to use the arrow keys to navigate. It would be better to remove the custom instructions to screen readers, and have the chat log container include a tabindex="0" so it will receive focus, and an overflow-y: auto declaration so users can scroll with up and down arrow keys. This is a default browser behavior.

Expected behavior

• Consistent navigation experience that relies as much on defaults (arrow keys, default screen reader patterns) as possible.
• Custom navigation patterns must include instructions and not interfere with assistive technology
• End of Transcript message should be reachable using the same navigation paradigm. It's extremely helpful to be able to focus this text and know I've reached the end of the conversation.

Additional context

During implementation we realized this seems to be an intentional design decision that was recently released. Want to confirm that this is fundamental to PVA. Corresponds to this VA GitHub issue: https://github.com/department-of-veterans-affairs/va.gov-team/issues/25164

[Bug]

[khathuynh-tw]

The new canvas provided by Microsoft addresses some of our concerns around keyboard navigation by including a modal that appears before the user can interact with the chatbot. The modal contains instructions for how to navigate the chatbot with a keyboard.

However there are some new issues to follow up on, to be documented here:

• [NEW ISSUE] New instruction modal/overlay is not navigable with keyboard or screenreader.
• [NEW ISSUE] There is additional white space after the last message a bot sends which is a visual quirk. When there are buttons, the added space appears shows between the last message and the buttons.
• [NEW ISSUE] Screenreader announces “You are currently on an empty article” after a message bubble is read.