From a37fdb7e84a3f22543908d846179943fd86ea143 Mon Sep 17 00:00:00 2001
From: Conrad Chan <conrad@box.com>
Date: Tue, 6 Nov 2018 13:31:03 -0800
Subject: [PATCH] Fix: Add tabindex to preview container (#858)

* Fix: Add tabindex to preview container

* Chore: Refactor for unit test

* Chore: addressing PR comments

* Chore: addressing PR comments

* Chore: adding tests to focusFullscreenElement

* Chore: adding back event callback test
---
 src/lib/Fullscreen.js                  | 28 +++++++++++-----
 src/lib/__tests__/Fullscreen-test.html |  1 +
 src/lib/__tests__/Fullscreen-test.js   | 45 +++++++++++++++++++++++---
 src/lib/shell.html                     |  2 +-
 4 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/__tests__/Fullscreen-test.html

diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js
index 7a4d01b35..769f7aac6 100644
--- a/src/lib/Fullscreen.js
+++ b/src/lib/Fullscreen.js
@@ -91,27 +91,39 @@ class Fullscreen extends EventEmitter {
      * Fires events when the fullscreen state changes
      *
      * @private
-     * @param {HTMLElement|Event} [el] - Fullscreen element
+     * @param {HTMLElement|Event} el - Fullscreen element
      * @return {void}
      */
     fullscreenchangeHandler = (el) => {
         let enter = false;
 
-        if (this.isSupported()) {
-            if (this.isFullscreen()) {
-                enter = true;
-            }
-        } else if (!this.isFullscreen(el)) {
-            enter = true;
-        }
+        enter = (this.isSupported() && this.isFullscreen()) || (!this.isSupported() && !this.isFullscreen(el));
 
         if (enter) {
+            this.focusFullscreenElement(el);
             this.emit('enter');
         } else {
             this.emit('exit');
         }
     };
 
+    /**
+     * Focuses the element
+     *
+     * @private
+     * @param {HTMLElement|Event} el - Fullscreen element or event
+     * @return {void}
+     */
+    focusFullscreenElement = (el) => {
+        // Focus on the fullscreen element so keyboard
+        // events are triggered without an extra click
+        // If el has target property, then it is an Event
+        // otherwise it is a HTMLElement
+        const element = el.target || el;
+
+        element.focus();
+    };
+
     /**
      * Toggles fullscreen mode
      *
diff --git a/src/lib/__tests__/Fullscreen-test.html b/src/lib/__tests__/Fullscreen-test.html
new file mode 100644
index 000000000..52a93d7c6
--- /dev/null
+++ b/src/lib/__tests__/Fullscreen-test.html
@@ -0,0 +1 @@
+<div id='test-container'></div>
diff --git a/src/lib/__tests__/Fullscreen-test.js b/src/lib/__tests__/Fullscreen-test.js
index c6182a6a7..7bf992981 100644
--- a/src/lib/__tests__/Fullscreen-test.js
+++ b/src/lib/__tests__/Fullscreen-test.js
@@ -38,30 +38,47 @@ describe('lib/Fullscreen', () => {
     });
 
     describe('fullscreenchangeHandler()', () => {
+        before(() => {
+            fixture.setBase('src/lib');
+        });
+
+        beforeEach(() => {
+            fixture.load('__tests__/Fullscreen-test.html');
+        });
+
+        afterEach(() => {
+            fixture.cleanup();
+        });
+
         it('should emit enter if we are entering fullscreen and if true fullscreen is supported', () => {
             sandbox.stub(fullscreen, 'isSupported').returns(true);
             sandbox.stub(fullscreen, 'isFullscreen').returns(true);
             sandbox.stub(fullscreen, 'emit');
+            sandbox.stub(fullscreen, 'focusFullscreenElement');
 
             fullscreen.fullscreenchangeHandler({});
 
             expect(fullscreen.emit).to.have.been.calledWith('enter');
+            expect(fullscreen.focusFullscreenElement.called).to.be.true;
         });
 
         it('should emit exit if we are exiting fullscreen and if true fullscreen is supported', () => {
             sandbox.stub(fullscreen, 'isSupported').returns(true);
             sandbox.stub(fullscreen, 'isFullscreen').returns(false);
             sandbox.stub(fullscreen, 'emit');
+            sandbox.stub(fullscreen, 'focusFullscreenElement');
 
             fullscreen.fullscreenchangeHandler({});
 
             expect(fullscreen.emit).to.have.been.calledWith('exit');
+            expect(fullscreen.focusFullscreenElement.called).to.be.false;
         });
 
         it('should emit enter if we are entering fullscreen and if true fullscreen is not supported', () => {
             sandbox.stub(fullscreen, 'isSupported').returns(false);
             sandbox.stub(fullscreen, 'isFullscreen').returns(false);
             sandbox.stub(fullscreen, 'emit');
+            sandbox.stub(fullscreen, 'focusFullscreenElement');
 
             fullscreen.fullscreenchangeHandler({});
 
@@ -80,12 +97,11 @@ describe('lib/Fullscreen', () => {
 
         it('should be called only once when the fullscreenchange event is emitted', () => {
             const spy = sandbox.spy(fullscreen, 'fullscreenchangeHandler');
+            sandbox.stub(fullscreen, 'focusFullscreenElement').returns(true);
             // rebind the dom listeners to use the spy
             fullscreen.bindDOMListeners();
-
-            const event = new Event('webkitfullscreenchange');
-
-            window.document.dispatchEvent(event);
+            const event = new Event('webkitfullscreenchange', { bubbles: true });
+            document.getElementById('test-container').dispatchEvent(event);
             expect(spy).to.be.called.once;
         });
     });
@@ -213,4 +229,25 @@ describe('lib/Fullscreen', () => {
             expect(fullscreen.fullscreenchangeHandler).to.have.been.calledWith(element);
         });
     });
+
+    describe('focusFullscreenElement()', () => {
+        it('should focus the element when element passed in', () => {
+            const element = document.createElement('div');
+            sandbox.stub(element, 'focus');
+
+            fullscreen.focusFullscreenElement(element);
+
+            expect(element.focus.called).to.be.true;
+        });
+
+        it('should focus the element when event is passed in', () => {
+            const element = document.createElement('div');
+            sandbox.stub(element, 'focus');
+            const event = { target: element };
+
+            fullscreen.focusFullscreenElement(event);
+
+            expect(element.focus.called).to.be.true;
+        });
+    });
 });
diff --git a/src/lib/shell.html b/src/lib/shell.html
index 6f8d6229d..44711cf67 100644
--- a/src/lib/shell.html
+++ b/src/lib/shell.html
@@ -33,7 +33,7 @@
             </div>
         </div>
     </div>
-    <div class="bp">
+    <div class="bp" tabindex="0">
         <div class="bp-loading-wrapper">
             <div class="bp-loading">
                 <div class="bp-icon bp-icon-file"></div>