diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index 4bfd273f8..97c8adfbe 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; @@ -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(); + } } /** diff --git a/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx b/src/lib/viewers/controls/fullscreen/FullscreenToggle.tsx index c2b6197f4..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) => void; + onFullscreenToggle: (isFullscreen: boolean, toggleFullscreenEl: EventTarget | null) => void; onKeyDown?: (event: React.KeyboardEvent) => 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 ( 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); }); });