Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optional Focus Indicator doesn't work in fullscreen mode. #168

Open
duhrer opened this issue Feb 25, 2024 · 2 comments
Open

Optional Focus Indicator doesn't work in fullscreen mode. #168

duhrer opened this issue Feb 25, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@duhrer
Copy link
Contributor

duhrer commented Feb 25, 2024

In #162, an optional focus indicator was added. This uses a layer similar to the modal manager, but unlike the modal manager, the focus indicator is not visible when working with a fullscreen element on a page like this one.

This may be a layering issue, or we may have to look at what we did with the modal manager to make it work in fullscreen mode.

@duhrer duhrer added the bug Something isn't working label Feb 25, 2024
@duhrer
Copy link
Contributor Author

duhrer commented Feb 25, 2024

There is no special logic to the modal manager. My best guess is that because the modal receives focus, it jumps in front of the fullscreen element on its own. We may need to watch the state of fullscreen and move the focus indicator back and forth. This may require more of the DOM manipulation used for #155.

@duhrer
Copy link
Contributor Author

duhrer commented Feb 26, 2024

We may have to live with this, especially with regards to video elements.

I tried wrapping a video element with an overlay element ,which did nothing. I tried inserting the overlay into the video element, which didn't work either. I tried fiddling with the z-index of the overlay and pointer in both scenarios, no difference.

It seems like the modal manager only works because it receives focus and jumps in front of the fullscreen content. In this case, we can't use a similar approach because we want to keep focus where the user intended, i.e. on the play button, timeline, et cetera.

I've seen posts like this one on stackoverflow suggesting simulating fullscreen by changing the width of the element, but there are problems with this approach.

First, you can't request full screen without user input. This means that you'd either need to hijack the initial click on the fullscreen icon, or to prompt the user to confirm that they want to go into fullscreen. If you just resize the video and don't request fullscreen for your container, the browser controls will still be displayed, which is not what the user expects.

Even if you manage to fullscreen your own element and stretch the video to fill it, the browser wouldn't hide the video controls. You might be able to specifically hide the controls, but you're also messing with whatever code sites may have bound to the fullscreenchangeevent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant