feat(viewer): Add focus trap for fullscreen

src/lib/FocusTrap.ts

@@ -0,0 +1,141 @@
+import { decodeKeydown } from './util';
+
+const FOCUSABLE_ELEMENTS = [
+    'a[href]',
+    'button',
+    'textarea',
+    'input[type="text"]',
+    'input[type="radio"]',
+    'input[type="checkbox"]',
+    'select',
+];
+const ATTRIBUTES = ['disabled', 'tabindex="-1"', 'aria-disabled="true"'];
+const FOCUSABLE_ELEMENTS_SELECTOR = FOCUSABLE_ELEMENTS.map(element => {
+    let selector = element;
+    ATTRIBUTES.forEach(attribute => {
+        selector += `:not([${attribute}])`;
+    });
+    return selector;
+}).join(', ');
+
+function isButton(element: HTMLElement): boolean {
+    return element.tagName.toLowerCase() === 'button';
+}
+function isVisible(element: HTMLElement): boolean {
+    return element.offsetHeight > 0 && element.offsetWidth > 0;
+}
+function createFocusAnchor(): HTMLElement {
+    const element = document.createElement('i');
+    element.setAttribute('aria-hidden', 'true');
+    element.tabIndex = 0;
+
+    return element;
+}
+
+class FocusTrap {
+    element: HTMLElement;
+
+    firstFocusableElement: HTMLElement | null = null;
+
+    lastFocusableElement: HTMLElement | null = null;
+
+    trapFocusableElement: HTMLElement | null = null;
+
+    constructor(element: HTMLElement) {
+        if (!element) {
+            throw new Error('FocusTrap needs an HTMLElement passed into the constructor');
+        }
+
+        this.element = element;
+    }
+
+    destroy(): void {
+        this.disable();
+    }
+
+    focusFirstElement = (): void => {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        } else if (this.trapFocusableElement) {
+            this.trapFocusableElement.focus();
+        }
+    };
+
+    focusLastElement = (): void => {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[focusableElements.length - 1].focus();
+        } else if (this.trapFocusableElement) {
+            this.trapFocusableElement.focus();
+        }
+    };
+
+    getFocusableElements = (): Array<HTMLElement> => {
+        // Look for focusable elements
+        const foundElements = this.element.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);
+        // Filter out the elements that are preview control buttons and not visible
+        return Array.from(foundElements).filter(el => (isButton(el) && isVisible(el)) || !isButton(el));
+    };
+
+    handleTrapKeydown = (event: KeyboardEvent): void => {
+        const key = decodeKeydown(event);
+        const isTabPressed = key === 'Tab' || key === 'Shift+Tab';
+
+        if (!isTabPressed) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    };
+
+    handleKeydown = (event: KeyboardEvent): void => {
+        const key = decodeKeydown(event);
+        const isTabPressed = key === 'Tab' || key === 'Shift+Tab';
+
+        if (this.element === document.activeElement && isTabPressed) {
+            this.focusFirstElement();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    };
+
+    enable(): void {
+        this.element.addEventListener('keydown', this.handleKeydown);
+
+        // Create focus anchors (beginning, end and trap)
+        this.firstFocusableElement = createFocusAnchor();
+        this.lastFocusableElement = createFocusAnchor();
+        this.trapFocusableElement = createFocusAnchor();
+
+        this.firstFocusableElement.addEventListener('focus', this.focusLastElement);
+        this.lastFocusableElement.addEventListener('focus', this.focusFirstElement);
+        this.trapFocusableElement.addEventListener('keydown', this.handleTrapKeydown);
+
+        this.element.insertBefore(this.firstFocusableElement, this.element.firstElementChild);
+        this.element.append(this.lastFocusableElement);
+        this.element.append(this.trapFocusableElement);
+    }
+
+    disable(): void {
+        this.element.removeEventListener('keydown', this.handleKeydown);
+
+        if (this.firstFocusableElement) {
+            this.element.removeChild(this.firstFocusableElement);
+        }
+
+        if (this.lastFocusableElement) {
+            this.element.removeChild(this.lastFocusableElement);
+        }
+
+        if (this.trapFocusableElement) {
+            this.element.removeChild(this.trapFocusableElement);
+        }
+
+        this.firstFocusableElement = null;
+        this.lastFocusableElement = null;
+        this.trapFocusableElement = null;
+    }
+}
+
+export default FocusTrap;

src/lib/viewers/BaseViewer.js

@@ -1,6 +1,7 @@
 import EventEmitter from 'events';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
+import FocusTrap from '../FocusTrap';
 import fullscreen from '../Fullscreen';
 import intlUtil from '../i18n';
 import RepStatus from '../RepStatus';
@@ -79,6 +80,9 @@ class BaseViewer extends EventEmitter {
     /** @property {boolean} - Flag for tracking whether or not this viewer has been destroyed */
     destroyed = false;
 
+    /** @property {FocusTrap} - FocusTrap instance, if any */
+    focusTrap;
+
     /** @property {number} - Number of milliseconds to wait, while loading, until messaging that the viewer took too long to load */
     loadTimeout;
 
@@ -261,6 +265,10 @@ class BaseViewer extends EventEmitter {
         document.defaultView.removeEventListener('resize', this.debouncedResizeHandler);
         this.removeAllListeners();
 
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
+        }
+
         if (this.containerEl) {
             this.containerEl.removeEventListener('contextmenu', this.preventDefault);
             this.containerEl.innerHTML = '';
@@ -282,6 +290,7 @@ class BaseViewer extends EventEmitter {
         this.annotatorPromiseResolver = null;
         this.emittedMetrics = null;
         this.fullscreenToggleEl = null;
+        this.focusTrap = null;
         this.emit('destroy');
     }
 
@@ -579,6 +588,12 @@ class BaseViewer extends EventEmitter {
         if (this.fullscreenToggleEl && this.fullscreenToggleEl.focus) {
             this.fullscreenToggleEl.focus();
         }
+
+        if (!this.focusTrap) {
+            this.focusTrap = new FocusTrap(this.containerEl);
+        }
+
+        this.focusTrap.enable();
     }
 
     /**
@@ -593,6 +608,10 @@ class BaseViewer extends EventEmitter {
             this.annotator.emit(ANNOTATOR_EVENT.setVisibility, true);
             this.enableAnnotationControls();
         }
+
+        if (this.focusTrap) {
+            this.focusTrap.disable();
+        }
     }
 
     /**