microsoft / microsoft/BotFramework-WebChat

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

Open
#3,935 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

backlog Bot Services bug customer-reported ExemptFromDailyDRIReport external-dova
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

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

Screenshots

Screen Shot 2021-05-24 at 1 56 47 PM

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]

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Start by reviewing the current chat-log focus and screen-reader behavior described in the issue, then read the linked VA issue to clarify whether the navigation is intentional. Done means keyboard and screen-reader navigation follow consistent default patterns, with the end-of-transcript message reachable the same way.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.