From 95b4b407e76460d623cbc826ab57cf6f830ad541 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Wed, 22 Sep 2021 13:56:08 -0300
Subject: [PATCH 1/9] fix(fullscreen): focus button when toggle fullscreen

---
 src/lib/viewers/BaseViewer.js                      |  6 +++++-
 .../controls/fullscreen/FullscreenToggle.tsx       | 14 ++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 4bfd273f8..738232e0a 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -553,7 +553,8 @@ class BaseViewer extends EventEmitter {
      * @protected
      * @return {void}
      */
-    toggleFullscreen() {
+    toggleFullscreen(isFullscreen, fullscreenToggleEl) {
+        this.fullscreenToggleEl = fullscreenToggleEl;
         fullscreen.toggle(this.containerEl);
     }
 
@@ -569,6 +570,9 @@ class BaseViewer extends EventEmitter {
             this.annotator.emit(ANNOTATOR_EVENT.setVisibility, false);
             this.disableAnnotationControls();
         }
+        if (this.fullscreenToggleEl && this.fullscreenToggleEl.focus) {
+            this.fullscreenToggleEl.focus();
+        }
     }
 
     /**
diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
index c2b6197f4..d5a516b53 100644
--- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
+++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
@@ -5,7 +5,7 @@ import useFullscreen from '../hooks/useFullscreen';
 import './FullscreenToggle.scss';
 
 export type Props = {
-    onFullscreenToggle: (isFullscreen: boolean) => void;
+    onFullscreenToggle: (isFullscreen: boolean, toggleFullscreen: EventTarget | null) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
 
@@ -14,12 +14,14 @@ export default function FullscreenToggle({ onFullscreenToggle, ...rest }: Props)
     const Icon = isFullscreen ? IconFullscreenOut24 : IconFullscreenIn24;
     const title = isFullscreen ? __('exit_fullscreen') : __('enter_fullscreen');
 
-    const handleClick = (): void => {
-        onFullscreenToggle(!isFullscreen);
-    };
-
     return (
-        <button className="bp-FullscreenToggle" onClick={handleClick} title={title} type="button" {...rest}>
+        <button
+            className="bp-FullscreenToggle"
+            onClick={({ target }) => onFullscreenToggle(!isFullscreen, target)}
+            title={title}
+            type="button"
+            {...rest}
+        >
             <Icon />
         </button>
     );

From 31f5a277b29e7bfdb2668796c646e63d17058753 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Wed, 22 Sep 2021 14:00:03 -0300
Subject: [PATCH 2/9] fix(fullscreen): add void to function

---
 src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
index d5a516b53..48bb24dd1 100644
--- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
+++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
@@ -17,7 +17,7 @@ export default function FullscreenToggle({ onFullscreenToggle, ...rest }: Props)
     return (
         <button
             className="bp-FullscreenToggle"
-            onClick={({ target }) => onFullscreenToggle(!isFullscreen, target)}
+            onClick={({ target }): void => onFullscreenToggle(!isFullscreen, target)}
             title={title}
             type="button"
             {...rest}

From d1d71328924e9914d72ad7f08639080e5cdb8bcb Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Wed, 22 Sep 2021 14:06:40 -0300
Subject: [PATCH 3/9] fix(fullscreen): fix test

---
 .../controls/fullscreen/__tests__/FullscreenToggle-test.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/viewers/controls/fullscreen/__tests__/FullscreenToggle-test.tsx b/src/lib/viewers/controls/fullscreen/__tests__/FullscreenToggle-test.tsx
index d9ddeb00e..048a9e8c8 100644
--- a/src/lib/viewers/controls/fullscreen/__tests__/FullscreenToggle-test.tsx
+++ b/src/lib/viewers/controls/fullscreen/__tests__/FullscreenToggle-test.tsx
@@ -34,10 +34,11 @@ describe('FullscreenToggle', () => {
 
         test('should invoke onFullscreenToggle prop on click', () => {
             const onToggle = jest.fn();
+            const mockedEvent = { target: document.createElement('button') };
             const wrapper = getWrapper({ onFullscreenToggle: onToggle });
 
-            wrapper.simulate('click');
-            expect(onToggle).toBeCalledWith(true);
+            wrapper.simulate('click', mockedEvent);
+            expect(onToggle).toBeCalledWith(true, mockedEvent.target);
         });
     });
 

From 18747a96e046ec55b23b560498e6404bd0eea078 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Wed, 22 Sep 2021 15:00:22 -0300
Subject: [PATCH 4/9] fix(fullscreen): update names of methods and functions

---
 src/lib/viewers/BaseViewer.js                        |  5 +++++
 .../viewers/controls/fullscreen/FullscreenToggle.tsx | 12 +++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 738232e0a..1fad2a91b 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -191,6 +191,9 @@ class BaseViewer extends EventEmitter {
         // From the perspective of viewers bp-content holds everything
         this.containerEl = container.querySelector(SELECTOR_BOX_PREVIEW_CONTENT);
 
+        // Element to focus when fullscreen is toggled.
+        this.fullscreenToggleEl = null;
+
         // Set an aria-label for all files
         this.containerEl.setAttribute('aria-label', __('file_preview_label'));
 
@@ -551,6 +554,8 @@ class BaseViewer extends EventEmitter {
      * Enters or exits fullscreen
      *
      * @protected
+     * @param {boolean} [isFullscreen] - flag to allow fullscreen
+     * @param {HTMLElement} element - Element to be focused after fullscreen toggle
      * @return {void}
      */
     toggleFullscreen(isFullscreen, fullscreenToggleEl) {
diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
index 48bb24dd1..6b079162d 100644
--- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
+++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
@@ -14,14 +14,12 @@ export default function FullscreenToggle({ onFullscreenToggle, ...rest }: Props)
     const Icon = isFullscreen ? IconFullscreenOut24 : IconFullscreenIn24;
     const title = isFullscreen ? __('exit_fullscreen') : __('enter_fullscreen');
 
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        onFullscreenToggle(!isFullscreen, event.target);
+    };
+
     return (
-        <button
-            className="bp-FullscreenToggle"
-            onClick={({ target }): void => onFullscreenToggle(!isFullscreen, target)}
-            title={title}
-            type="button"
-            {...rest}
-        >
+        <button className="bp-FullscreenToggle" onClick={handleClick} title={title} type="button" {...rest}>
             <Icon />
         </button>
     );

From 70c52d6d0cdc054798473387bb60a5934ca8d2c1 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Wed, 22 Sep 2021 17:55:07 -0300
Subject: [PATCH 5/9] fix(fullscreen): destructure property

---
 src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
index 6b079162d..3183dac16 100644
--- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
+++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
@@ -14,8 +14,8 @@ export default function FullscreenToggle({ onFullscreenToggle, ...rest }: Props)
     const Icon = isFullscreen ? IconFullscreenOut24 : IconFullscreenIn24;
     const title = isFullscreen ? __('exit_fullscreen') : __('enter_fullscreen');
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-        onFullscreenToggle(!isFullscreen, event.target);
+    const handleClick = ({ target }: React.MouseEvent): void => {
+        onFullscreenToggle(!isFullscreen, target);
     };
 
     return (

From 97ad06e15c3c03848c5954a10b203db047a53743 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Thu, 23 Sep 2021 15:08:18 -0300
Subject: [PATCH 6/9] fix(fullscreen): remove property

---
 src/lib/viewers/BaseViewer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 1fad2a91b..8821f4ec1 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -191,9 +191,6 @@ class BaseViewer extends EventEmitter {
         // From the perspective of viewers bp-content holds everything
         this.containerEl = container.querySelector(SELECTOR_BOX_PREVIEW_CONTENT);
 
-        // Element to focus when fullscreen is toggled.
-        this.fullscreenToggleEl = null;
-
         // Set an aria-label for all files
         this.containerEl.setAttribute('aria-label', __('file_preview_label'));
 

From b36acbaa6299b4147a0265287596a7ca267ad413 Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Thu, 23 Sep 2021 17:06:19 -0300
Subject: [PATCH 7/9] fix(fullscreen): add property to class

---
 src/lib/viewers/BaseViewer.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 8821f4ec1..12b5cdb10 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -121,6 +121,9 @@ class BaseViewer extends EventEmitter {
     /** @property {HTMLElement} - The .bp-content which is the container for the viewer's content */
     containerEl;
 
+    /** @property {HTMLButtonElement} - The button which will be focus when fullscreen is toggle */
+    fullscreenToggleEl;
+
     /** @property {boolean} - Stores whether the Viewer has been setup yet. */
     isSetup = false;
 

From 75669b0a82c57a102539bbc7e57d225b59ab99cb Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Fri, 24 Sep 2021 16:58:09 -0300
Subject: [PATCH 8/9] fix(fullscreen): clean property in destroy method

---
 src/lib/viewers/BaseViewer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 12b5cdb10..97c8adfbe 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -281,6 +281,7 @@ class BaseViewer extends EventEmitter {
         this.annotatorPromise = null;
         this.annotatorPromiseResolver = null;
         this.emittedMetrics = null;
+        this.fullscreenToggleEl = null;
         this.emit('destroy');
     }
 

From b4551db261acd37a8e89d6cde6202b44ca68360d Mon Sep 17 00:00:00 2001
From: Hormaza <matiasbecerra@box.com>
Date: Fri, 24 Sep 2021 17:08:54 -0300
Subject: [PATCH 9/9] fix(fullscreen): change method name for consistency

---
 src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
index 3183dac16..f4a040898 100644
--- a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
+++ b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx
@@ -5,7 +5,7 @@ import useFullscreen from '../hooks/useFullscreen';
 import './FullscreenToggle.scss';
 
 export type Props = {
-    onFullscreenToggle: (isFullscreen: boolean, toggleFullscreen: EventTarget | null) => void;
+    onFullscreenToggle: (isFullscreen: boolean, toggleFullscreenEl: EventTarget | null) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 };