Our current SDK includes an event listener that overrides the tab cycle functionality, so that when the stream takes focus, it keeps it. This behavior affects the ability to navigate through elements on the page using the tab key.

Why does this happen?

The focus trapping occurs because the SDK's keyboard event listener is designed to handle input within the streaming environment. This functionality is intended to manage user interactions more effectively, but it can interfere with normal tab navigation on the page.

This behavior is not a bug. It is a default feature of the SDK that manages keyboard inputs. However, we understand that it can lead to unintended focus issues, and we are working on allowing a way to provide more control over this feature.

How can I modify the tabbing behaviour in my custom web client?

To modify the tabbing behaviour, you can implement a simple code change in your app.tsx file. This will ensure that the tab cycle within page elements will be the default.

What steps do I need to follow to implement this change?

  1. Modify the app.tsx file:
  • Add the following code to handle browser key events
emitter.IsBrowserKey = (e: KeyboardEvent): boolean => { 
	return (e.keyCode >= 112 && e.keyCode <= 123); }

2.   Insert the code above at the appropriate location:

  • Place the code snippet immediately after the following lines, which can be found around line 303 in your app.tsx 
const [streamerStatus, emitter, videoStream, audioStream, messageSubject] = useStreamer( 
    platform, 
    launchRequest, 
    streamerOptions 
);