Video Controls are not respected when using FocusScope
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When using a native HTML video element inside of `FocusScope` with `contains={true}`, we are unable to tab into the individual native video controls like fullscreen, volume, etc.
### 🤔 Expected Behavior?
Focus trapping an element should still allow for the native video controls to be accessible via keyboard using the tab key.
### 😯 Current Behavior
If you place a native HTML video element inside of `FocusScope` like this pseudo-code:
```
...
```
Then you are unable to tab into the individual video controls using a keyboard. The video element is in focus, but the focus never goes deeper.
### 💁 Possible Solution
_No response_
### 🔦 Context
This is a breaking scenario for keyboard-only users for native video elements inside of `FocusScope`.
### 🖥️ Steps to Reproduce
1. Place a native HTML video element inside of `FocusScope` like this pseudo-code:
```
...
```
2. Try to navigate to the fullscreen or volume controls. by pressing the "tab" key.
Expected: You are able to tab into the controls
Actual: Focus stays locked on the overall video player
If I comment out `contain={ true }` for `FocusScope`, I am able to access the video controls as expected, but of course the focus trapping does not work at that point.
### Version
3.17.1
### What browsers are you seeing the problem on?
Firefox, Chrome, Safari
### If other, please specify.
(I have not been able to test on Edge)
### What operating system are you using?
Mac Sonoma 14.3.1
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.