fix: focus play toggle from Big Play Btn on play (#4018)

If the control bar and playtoggle exist, focus the playtoggle after
triggering play via the keyboard from the Big Play Button.
If the control bar isn't available, then focus the player element.
If play() returns a promise, wait until it resolves to focus,
otherwise, use a setTimeout.

Fixes #2729

src/js/big-play-button.js

@@ -34,7 +34,23 @@ class BigPlayButton extends Button {
    * @listens click
    */
   handleClick(event) {
-    this.player_.play();
+    const playPromise = this.player_.play();
+
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+
+    if (!playToggle) {
+      this.player_.focus();
+      return;
+    }
+
+    if (playPromise) {
+      playPromise.then(() => playToggle.focus());
+    } else {
+      this.setTimeout(function() {
+        playToggle.focus();
+      }, 1);
+    }
   }
 }
 

src/js/component.js

@@ -998,6 +998,20 @@ class Component {
     return this.currentDimension('height');
   }
 
+  /**
+   * Set the focus to this component
+   */
+  focus() {
+    this.el_.focus();
+  }
+
+  /**
+   * Remove the focus from this component
+   */
+  blur() {
+    this.el_.blur();
+  }
+
   /**
    * Emit a 'tap' events when touch event support gets detected. This gets used to
    * support toggling the controls through a tap on the video. They get enabled

src/js/player.js

@@ -492,6 +492,9 @@ class Player extends Component {
       el = this.el_ = super.createEl('div');
     }
 
+    // set tabindex to -1 so we could focus on the player element
+    tag.setAttribute('tabindex', '-1');
+
     // Remove width/height attrs from tag so CSS can make it 100% width/height
     tag.removeAttribute('width');
     tag.removeAttribute('height');