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

[vhuseinova-msft]

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

[vhuseinova-msft]

It looks like this can be updated by using ...useFocusableGroup({ tabBehavior: 'unlimited' }) and handling Enter key locally. But please let me know if there is a better solution for this.

UPD: it looks like it's not a very good approach to add additional keyboard handlers as it changes the browsers keyboard navigation too much

[YuanboXue-Amber]

Following up with the creator to request an example

[vhuseinova-msft]

Attaching the POC
https://github.com/vhuseinova-msft/fluentui-contrib-github-issue-272