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 0f2e79e7f2..a1bd1fdd77 100644 --- a/src/js/component.js +++ b/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 diff --git a/src/js/player.js b/src/js/player.js index 6fa3561703..9ca18f0d1a 100644 --- a/src/js/player.js +++ b/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');