Botframework-webchat: [Accessibility][Keyboard] - Message navigation is not available.

[Valentyn-Chornovol]

[edit from @corinagum 11/10/2020]

Note that this also applies to carousels and suggested actions

/end edit

---

Version: latest

Actual result:
Message navigation is not available.

Expected result:
The chat messages should be accessible by up and down arrow and on pressing tab button focus should have the ability to move to the message box.

Repro Steps:

1. Open the ChatWidget.
2. Start the conversation.
3. Try to use the keyboard to navigate to messages.

User Impact:
Keyboard users have to able to navigate by messages.

[omega1119]

This is also an issue or new feature I'm in need of.

[edemehmetcan]

same issue. Need that feature. It is a huge accessibility issue....

[1Copenut]

I feel like this one could be remediated by changing the following tabindex="-1" to tabindex="0":

<div class="css-1t62idy css-1ep0qf1" role="complementary" tabindex="-1" style="outline: 0px;">

I tested it locally using just a keyboard (no screen reader) and was able to set focus on the chat bot "container" then scroll inside the container using DOWN_ARROW and UP_ARROW.

There could be a need for this to be tabindex="-1" for cases where the chat bot is being embedded in an iframe or a page and focus has to be set with JavaScript. Maybe this could be a prop that defaults to one or the other and can be easily overridden?

[compulim]

tabindex="0" will make the non-interactive element focusable, which violated a rule in ARIA. So this approach is not possible.

[compulim]

For accessibility, in Windows Narrator, user can press CAPS + N to navigate to the landmark and then press CAPS + DOWN to start reading the transcript.

[edemehmetcan]

Users have to able to navigate by messages by using tab button or up/down... this is a core accessibility access

[corinagum]

This is a high-priority item for our next release, R12.

[corinagum]

Notes from #3567 (dupe)
@tejamora says

Running a fast pass on WebChat bot, getting this error

Path | .react-scroll-to-bottom--css-qgskw-1n7m0yu

Fix ONE of the following:
Element should have focusable content
Element should be focusable

Screenshots

Same replicable on Web Chat's minimizable sample: https://microsoft.github.io/BotFramework-WebChat/06.recomposing-ui/a.minimizable-web-chat/

Steps to reproduce

1. Go to chatbot icon
2. Click on chatbot
3. when there are numerous activities between the bot and user

---

Comment from @compulim:

A previous issue on "should not focus on non-interactive element" (#1340) and WCAG 2.4.3. Since transcript is not interactive element, it should not be focusable based on the issue and WCAG criterion.

Since this accessibility issue is conflicting to one we previously fixed, we should raise this issue to internal accessibility team and ask them to clarify, and possibly a correct/reference implementation.

For instance, WhatsApp Web does not allow focus on the transcript thru TAB keys. But pressing PGUP/PGDN keys will page the transcript up/down.

[thiessenp]

Any progress on this? Or was it decided not to add keynav to the transcript? If not, is there a general way screen reader users (Jaws/NVDA/...) have been accessing the transcript (message history)?

[corinagum]

This is scheduled for our next release, March 8th