Board - Accessibility/control issues with mediaControls component

[BoldBigflank]

Since the outline is removed on buttons, there's some strange behavior that happens when you use

Steps to reproduce:
Load up a replay.
Click the "step forward" button
Hit the space bar
Observe that rather that starting playback, the board advances one more frame.

The space bar is being used to press the step forward button again, since it's considered "active" by the browser.

I think you could solve this by adding e.target.blur() or e.currentTarget.blur() to all the button actions, but I would ask that you consider accessibility for those that use these a keyboard to navigate the web site.

Perhaps the fix for this is to change the shortcuts to match YouTube (j moves backward, k play/pause, l move forward) so that there's not a conflict between media controls and keyboard browser navigation.

[originalwebgurl]

Thanks for the feedback! Accessibility is definitely on our radar. I really like the idea of matching it up to YouTube's shortcuts. I'll work this into our upcoming board tasks.

[bvanvugt]

@BoldBigflank thanks for this - we discussed and are very much in favor of following YouTube's lead on this, altering the hotkeys to match their setup (which should in turn address the valid accessibility concern raised here). Great call :)

We'd like to roll this out post-Winter Classic 2021, in an effort to be less disruptive to those currently developing competition-ready Battlesnakes. Stay tuned.