methods to tab in/out of the reader

- added onToolbarShiftTab, onIframeTab methods that to focus manager
that are called on shift-tab from the first group/tab from the last group
- added focusToolBar method to focus the first button of the toolbar
within the reader

src/common/focus-manager.js

@@ -4,6 +4,9 @@ export class FocusManager {
 	constructor(options) {
 		this._reader = options.reader;
 		this._onDeselectAnnotations = options.onDeselectAnnotations;
+		// Methods to move focus to elements outside of the reader
+		this._onToolbarShiftTab = options.onToolbarShiftTab;
+		this._onIframeTab = options.onIframeTab;
 		window.addEventListener('focusin', this._handleFocus.bind(this));
 		window.addEventListener('pointerdown', this._handlePointerDown.bind(this));
 		window.addEventListener('keydown', this._handleKeyDown.bind(this), true);
@@ -30,6 +33,11 @@ export class FocusManager {
 		}
 	}
 
+	// Focus the first button from the toolbar
+	focusToolbar() {
+		document.querySelector(".toolbar .start .toolbar-button").focus();
+	}
+
 	_initFirefoxActivePseudoClassFix() {
 		// Work around :active pseudo class being prevented by event.preventDefault() on Firefox.
 		window.addEventListener('pointerdown', (event) => {
@@ -135,7 +143,19 @@ export class FocusManager {
 
 		let groupIndex = groups.findIndex(x => x === group);
 
-		if (groupIndex === -1 || groupIndex === groups.length - 1) {
+		if (groupIndex === groups.length - 1) {
+			if (reverse) {
+				// Shift-tab from the first group (toolbar)
+				this._onToolbarShiftTab();
+			}
+			else {
+				// Tab from the last group (reader iframe)
+				this._onIframeTab();
+			}
+			return;
+		}
+
+		if (groupIndex === -1) {
 			groupIndex = 0;
 		}
 		else {

src/common/reader.js

@@ -55,6 +55,8 @@ class Reader {
 		this._onRotatePages = options.onRotatePages;
 		this._onDeletePages = options.onDeletePages;
 		this._onToggleContextPane = options.onToggleContextPane;
+		this._onToolbarShiftTab = options.onToolbarShiftTab;
+		this._onIframeTab = options.onIframeTab;
 		// Only used on Zotero client, sets text/plain and text/html values from Note Markdown and Note HTML translators
 		this._onSetDataTransferAnnotations = options.onSetDataTransferAnnotations;
 
@@ -190,6 +192,12 @@ class Reader {
 			reader: this,
 			onDeselectAnnotations: () => {
 				this.setSelectedAnnotations([]);
+			},
+			onToolbarShiftTab: () => {
+				this._onToolbarShiftTab();
+			},
+			onIframeTab: () => {
+				this._onIframeTab();
 			}
 		});
 
@@ -1105,6 +1113,10 @@ class Reader {
 		this._focusManager.restoreFocus();
 	}
 
+	focusToolbar() {
+		this._focusManager.focusToolbar();
+	}
+
 	freeze() {
 		this._updateState({ freeze: true });
 	}