fix(a11y): wrong focus selection on toggleFullscreen method

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,9 +554,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 +575,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, toggleFullscreen: 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 = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        onFullscreenToggle(!isFullscreen, event.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);
         });
     });