From 56543b310ade6de6ce71cba0961e677ab3b66e28 Mon Sep 17 00:00:00 2001
From: Gary Katsevman <git@gkatsev.com>
Date: Fri, 3 Feb 2017 16:30:49 -0500
Subject: [PATCH] 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 | 18 +++++++++++++++++-
 src/js/component.js       | 14 ++++++++++++++
 src/js/player.js          |  3 +++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/js/big-play-button.js b/src/js/big-play-button.js
index 4f81abd62a..5cdc4752bf 100644
--- a/src/js/big-play-button.js
+++ b/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);
+    }
   }
 }
 
diff --git a/src/js/component.js b/src/js/component.js
index d3ca172ecd..95b1c5d2cf 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -1232,6 +1232,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
diff --git a/src/js/player.js b/src/js/player.js
index 8054882837..91f483778a 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -481,6 +481,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');