Keyboard accessibility of control bar after it is hidden during playback

[OwenEdwards]

If a user uses tab and enter/space to play the video, focus shifts onto the control bar and the user can continue to use keyboard-only access.

However, once inactivity causes the controls to be hidden, the keyboard cannot be used to restore focus to the controls, so the video player is no longer accessible.

[1Copenut]

This will be a big step forward. As soon as the video player loses focus, or the controls disappear from inactivity, it's no longer keyboard accessible, which is limiting. Users benefit from a way to scrub backwards via keyboard, toggle captions, play and pause video. For technical discussions, or even ones that are in-depth or dialog heavy, being able to scrub back, review, pause, playback are critical for learning and comprehension.

[gkatsev]

We definitely should fix this. We probably need to listen to keyboard events and make the user active when that happens. I think we only make the user active on mouse movement. If someone cares to make a PR, it'll make it that much more likely to get completed earlier rather than later.
Thanks!

[1Copenut]

@gkatsev Agreed. It might be useful to listen for the player object focus event to show and announce the control bar. Bar show could be announced to screen readers by updating aria-hidden attribute to false on the control bar.

I'm just getting my JS leveled up, but I want to help. If that's testing, writing documentation, reading specs, so be it.

[marguinbc]

Not sure how keen anyone is on using another CSS class but I created a workaround that checks if any of the children of the control-bar have focus and applies a class called hasFocus to the control-bar. The hasFocus class simply prevents the transition and transform which occurs when the player looses focus.

    $('.vjs-control-bar > *').focus(function() {
      $('.vjs-control-bar').addClass('hasFocus');
    });

    $('.vjs-control-bar > *').focusout(function(e) {
      setTimeout(function () {
        if ($(':focus').closest('.vjs-control-bar').length <=0) {
          $('.vjs-control-bar').removeClass('hasFocus');
         }
      });
    });
```js
and the CSS
```cs
.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar.hasFocus, 
 .vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar.hasFocus, 
 .vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar.hasFocus, 
 .vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar.hasFocus  {
  transform: none;
  transition: none;
}

[gkatsev]

@marguinbc after a discussion with @OwenEdwards about it (see #3023), we've come to the conclusion that we don't actually want to prevent hiding the control bar in these situations. We actually want to make the control continue working, particularly with screenreaders, even when it is not being displayed.

[chrisauclair]

To get around this in the past, I've opted to make the controls always visible so that there is no loss of focus for SR and keyboard users, but not all designers are willing to get on board with that. The best way to make everyone happy is to hide the controls visually, but make them accessible to SRs and preserve the focus for keyboard users. It's important to get this right because it's one of the biggest general a11y issues with the player.

[chrisauclair]

@gkatsev , is there some reason the control bar can't stay visibile even while it's transparent? The opacity: 0 applied to the controls by the vjs-user-inactive state isn't really a problem compared to setting visibility: hidden. In a visible, transparent state screen readers can still access the controls, and keyboard users don't lose control focus.

[gkatsev]

@chrisauclair I believe that's exactly the solution that @OwenEdwards and I came about (without specific code changes) that the control bar should be made not visible to a sighted user when the player has gone inactive but still be accessible to screen readers.

[OwenEdwards]

@gkatsev and I were looking at something like this, and I just hadn't cleared up whether we could just make it opaque, or whether we need to change the z-index, move the controls off-screen and/or shrink them down to achieve it. @chrisauclair, would you be able to test this on different browser and screen reader combinations?

[chrisauclair]

@OwenEdwards , @gkatsev , I can run some tests this week, but IE 8 won't be included. Does that matter at this point?

[gkatsev]

videojs 5 still supports IE8. For new features, depending on what they are, we could consider not implementing them on IE8 but any change must not break IE8.

[gkatsev]

Fixed by #3237