microsoft / microsoft/fluentui-contrib

[A11y] Actions component navigation for '@fluentui-contrib/react-chat'

Open
#272 3 comments 0 reactions 1 assignee View on GitHub

@YuanboXue-Amber is already working on this.

Since Jan 6, 2025.

react-chat
Dominant language
TypeScript
Stars
56
Forks
62
Avg merge
3d 2h
Merged PRs (30d)
1

Description

Currently, the body of the message components in '@fluentui-contrib/react-chat' are considered tabbable elements. However, when the actions component is specified for my message FluentUI component, it is added at the same level as the body component. This breaks the keyboard navigation hierarchy, as both the actions and message body are on the same level. As a result, actions are accessible with the Tab key instead of the Enter key.

Steps to Reproduce:

  • Use '@fluentui-contrib/react-chat' to create a chat interface.
  • Add actions buttons list
  • Specify an actions component at the same level as the message body.
  • Attempt to navigate using the keyboard.

Expected Behavior: The actions component should be accessible with the Enter key, maintaining a proper keyboard navigation hierarchy.

Actual Behavior: The actions component is accessible with the Tab key, disrupting the expected navigation flow

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.