adobe / adobe/react-spectrum

Video Controls are not respected when using FocusScope

Open
#6,729 6 comments 0 reactions 0 assignees View on GitHub
bug needs investigation
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.