[KEYBOARD]: Links in the chat log must be keyboard focusable

[ianpsant]

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

Screenshots

links-not-focusable.mov

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

The links added to the VA chatbot's responses are not reachable by keyboard when I am navigating through the page with the TAB key. Quicktime movie attached below.

Steps to reproduce

1. Links can be confirmed to receive keyboard focus when navigating with the TAB key
2. This can be verified by typing document.activeElement into the Chrome DevTools console

Expected behavior

Additional context

We cannot make links in the chat log tabbable. We tried adding tab indexes to the links, but this does not solve this issue. Corresponds to this VA GitHub issue: department-of-veterans-affairs/va.gov-team#25156

[Bug]

[compulim]

The transcript is modelled as a composite widget. End-user would need to use arrow keys to select activity, then press ENTER key to put focus in the activity. While they are navigating using arrow keys, screen reader should narrate "click to interact" for activities with links (or buttons, <input> and other interactive elements).

It seems the discoverability about keyboard commands are not clear or explicit for the end-user to understand. We have discussed and should add a help screen for keyboard users.

[compulim]

I am still waiting for our designer to complete the design of the new keyboard commands modal.

[jgacek]

After discussion with Aaron to resolve this ticket we would require that once focus is on an activity that you would be able to interact with all the links within it and for you to be able to back out of the activity.

1. User uses arrow to navigate activities
2. User hits enter to enter activity
3. User should be able to navigate between all the link/buttons within activity
4. User should be able to leave the activity

[compulim]

Agree and it should be doable today.

For step 3, after focusing in the activity, the user press TAB orSHIFT + TAB to jump between links/buttons.

For step 4, the user will leave the activity and go back to step 1 if they do one of the following:

• Press ESCAPE
• Press TAB on the last links/buttons in the activity
• Press SHIFT + TAB on the first links/buttons in the activity

[LucianaAlexanderMorais]

This was a rough experience. We definitely need to work on improving this if we can. Right now I am drafting directions to place on the main page when we launch the bot:

"Please note, we are currently working on improving accessibility on this virtual agent.
We apologize for any inconvenience.

To start using the virtual agent with a screen reader, you can:

1. Tab to select the virtual agent window
2. Tab to select the "Accept" button and press Enter
3. Use arrow keys to listen to chatbot messages
4. Tab to select the "Type your message" section
5. Ask your question and press Enter
6. Use Shift+Tab to move back to messages
7. Use arrow keys to focus on a specific message.
8. Press Enter to focus on a link
9. Press Enter again to open a link. Link will open on another page.
10. Use Shift+Tab to exit the chatbot window.