FreeTubeApp / FreeTubeApp/FreeTube

[Feature Request]: Disable spacebar activation for buttons except through keyboard navigation, & vice versa

Open
#4,137 19 comments 1 reaction 0 assignees View on GitHub
E: ease of use improvement E: improvement existing feature
Dominant language
Vue
Stars
21.9k
Forks
1.5k
Avg merge
1d 14h
Merged PRs (30d)
62

Description

### Guidelines

- [X] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [X] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [X] This issue contains only one feature request.

### Problem Description

As someone who often un-favorites a video and then clicks the spacebar to continue the video, I experience an undesirable and unexpected outcome: 1a) the video unpauses (good), but 1b) the video is re-favorited (bad). This occurs because the focus is on the favorite button, which is toggled by hitting either the Enter key or the spacebar. The same happens for the video player controls; try muting the video by clicking on the Mute button, then hitting the spacebar. Not only is 2a) the video unmuted (bad), but 2b) the video doesn't even unpause (also bad).

To compare with a website like YouTube: with clicking the like button and then pressing the spacebar, 1a) the video unpauses (good), and 1b) the video is not un-liked (good). With clicking the Mute button and then pressing the spacebar, 2a) the video is not unmuted (good), and 2b) the video unpauses (good).

Vice versa, if you're navigating through the controls using keyboard navigation, hitting the Spacebar on FreeTube both 3a) pauses/unpauses the video (bad) and 3b) toggles the focused button (good). You only want the focused control to be being affected. For the video player, though, our current behavior is good in this respect: navigating to the Mute button through keyboard controls and presses the spacebar 4a) mutes the video without pausing/unpausing the video, and 4b) successive presses of the spacebar continue to only toggle the Mute button without pausing/unpausing the video. As expected, YT is perfect here as well.

One last important behavior is 5) that focus is still applied to a control that is clicked (verified by clicking a button, then pressing the Enter key, which should still toggle the button), which FreeTube does (good), as well as YouTube. I don't know the selected method that YouTube has implemented to achieve this one while maintaining the rest.

In summary, here's where we're at:
1a) good
1b) bad
2a) bad
2b) bad
3a) bad
3b) good
4a) good
4b) good
5) good

### Proposed Solution

Behavior-wise, 1b, 2a, 2b, and 3a need to be fixed while still preserving 1a, 3b, 4a, 4b, and 5. Technical-wise, there are a few different ways you could do this, although I'll admit there are probably better ways that I don't know about. Here is what I was able to find online:

- https://stackoverflow.com/questions/70831240/when-pressing-on-spacebar-the-previous-clicked-button-gets-clicked
- https://stackoverflow.com/questions/38603936/limit-spacebar-trigger-to-button

One promising route is to identify if it's a A) "keyboard navigation focus" or B) "it's focused because it was clicked" kind of focus and have the spacebar trigger only the button for Case A & only the videoplayer for case B. The only problem is that I have no idea how to determine that programmatically. Edit: There are [some answers in this article](https://stackoverflow.com/questions/43282841/differentiate-between-focus-via-tab-key-and-focus-via-click-in-css). You can track the `click` event in JS on the `/watch` route and disable the selected button's spacebar event listener until `focus` changes (handling 1a through 2b), while setting `event.stopPropagation()` on the main controls (i.e., `ft-icon-button` and the video player buttons) to handle behaviors 3a through 5. Alternatively, you can listen for `focus-visible` events somehow and selectively temporarily disable the spacebar event listeners that way.

### Alternatives Considered

Behavior-wise, I don't think there are any good alternatives. 1a through 5 as YT does it are all the best behaviors for optimal usability, intuitiveness, and accessibility. Technical-wise, there are probably other ways to do this that I'm missing, which all are fine as long as they work (and are not absurdly convoluted, of course).

### Issue Labels

ease of use improvement, improvement to existing feature

### Additional Information
I use the Mute button and Favorite button as examples, but these behavioral problems affect many other controls as well. A really common & pesky one is that clicking the Fullscreen button and then pressing Spacebar toggles Fullscreen rather than pausing/unpausing the video. Fullscreen is a somewhat unique case in YouTube, though, in that focus is applied to the full video player & removed from the button when going from non-fullscreen to fullscreen.

Overall, this issue is one that's hard to place your finger on and isn't too hard to fix, but it has massive effects on the UX of FreeTube, à la the Pareto principle.

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.