fix(a11y): wrong focus selection on toggleFullscreen method (#1431)

* fix(fullscreen): focus button when toggle fullscreen

* fix(fullscreen): add void to function

* fix(fullscreen): fix test

* fix(fullscreen): update names of methods and functions

* fix(fullscreen): destructure property

* fix(fullscreen): remove property

* fix(fullscreen): add property to class

* fix(fullscreen): clean property in destroy method

* fix(fullscreen): change method name for consistency

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;
 
@@ -278,6 +281,7 @@ class BaseViewer extends EventEmitter {
         this.annotatorPromise = null;
         this.annotatorPromiseResolver = null;
         this.emittedMetrics = null;
+        this.fullscreenToggleEl = null;
         this.emit('destroy');
     }
 
@@ -551,9 +555,12 @@ 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() {
+    toggleFullscreen(isFullscreen, fullscreenToggleEl) {
+        this.fullscreenToggleEl = fullscreenToggleEl;
         fullscreen.toggle(this.containerEl);
     }
 
@@ -569,6 +576,9 @@ class BaseViewer extends EventEmitter {
             this.annotator.emit(ANNOTATOR_EVENT.setVisibility, false);
             this.disableAnnotationControls();
         }
+        if (this.fullscreenToggleEl && this.fullscreenToggleEl.focus) {
+            this.fullscreenToggleEl.focus();
+        }
     }
 
     /**

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, toggleFullscreenEl: EventTarget | null) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
 
@@ -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 = (): void => {
-        onFullscreenToggle(!isFullscreen);
+    const handleClick = ({ target }: React.MouseEvent): void => {
+        onFullscreenToggle(!isFullscreen, target);
     };
 
     return (

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);
         });
     });