reader context menu keyboard navigation

- add tabstop to contextMenu, so navigation between
buttons within it is handled by focusManager
- when context menu is opened, focus the first button
from contextMenu so that the next keypress interacts
with menu items
- when Escape keypress is being handled and contextmenu
is open, just call reader.closeContextMenu to close it
and let focus go back to previously focused element.
- add keydown listener to context-menu to navigate it
by typing characters on the keyboard. After something
is typed, find buttons with text that begins with
the input. If there is only one match, it is clicked.
If there are multiple, the first one is focused.
The input counter is reset after 3 seconds of not typing.

Fixes: zotero/zotero#4681

src/common/components/context-menu.js

@@ -109,6 +109,8 @@ function ContextMenu({ params, onClose }) {
 	const [position, setPosition] = useState({ style: {} });
 	const [update, setUpdate] = useState();
 	const containerRef = useRef();
+	const searchStringRef = useRef('');
+	const searchTimeoutRef = useRef(null);
 
 	useEffect(() => {
 		setUpdate({});
@@ -147,6 +149,36 @@ function ContextMenu({ params, onClose }) {
 		}
 	}
 
+	function handleKeyDown(event) {
+		let { key } = event;
+		// Ignore non-characters
+		if (key.length !== 1 || !key.match(/\S/)) return;
+
+		// Clear search string after 3 seconds of no typing
+		if (searchTimeoutRef.current) {
+			clearTimeout(searchTimeoutRef.current);
+		}
+		searchTimeoutRef.current = setTimeout(() => {
+			searchStringRef.current = '';
+		}, 3000);
+
+		// Keep track of what has been typed so far
+		searchStringRef.current += key.toLowerCase();
+
+		// Find all buttons with text that start with what has been typed
+		let menuOptions = [...document.querySelectorAll(".context-menu button:not([disabled])")];
+		let candidates = menuOptions.filter(option => option.textContent.toLowerCase().startsWith(searchStringRef.current));
+
+		// If there is only one candidate, click it right away
+		if (candidates.length == 1) {
+			candidates[0].click();
+		}
+		// If there are multiple - focus the first one
+		else if (candidates.length > 1) {
+			candidates[0].focus();
+		}
+	}
+
 	function handleClick(event, item) {
 		onClose();
 		event.preventDefault();
@@ -156,7 +188,7 @@ function ContextMenu({ params, onClose }) {
 
 	return (
 		<div className="context-menu-overlay" onPointerDown={handlePointerDown}>
-			<div ref={containerRef} className="context-menu" style={position.style}>
+			<div ref={containerRef} className="context-menu" style={position.style} data-tabstop={1} onKeyDown={handleKeyDown}>
 				{params.itemGroups.map((items, i) => (
 					<div key={i} className="group">
 						{items.map((item, i) => {

src/common/components/sidebar/annotations-view.js

@@ -175,7 +175,11 @@ const AnnotationsView = memo(React.forwardRef((props, ref) => {
 		props.onUpdateAnnotations([annotation]);
 	}, []);
 
-	function handlePointerDown() {
+	function handlePointerDown(event) {
+		// Clicking on the rendered content when a contextmenu is open will
+		// lead to pointerup event not firing and the annotation becoming not-selectable
+		// via keyboard until it is clicked.
+		if (event.target.classList.contains("context-menu-overlay")) return;
 		pointerDownRef.current = true;
 	}
 

src/common/keyboard-manager.js

@@ -80,6 +80,11 @@ export class KeyboardManager {
 		}
 
 		if (key === 'Escape') {
+			// If context menu is opened, close it and let focus return to last active element
+			if (document.querySelector(".context-menu")) {
+				this._reader.closeContextMenu();
+				return;
+			}
 			// Blur annotation comment and focus either the last view or the annotation in the sidebar
 			if (document.activeElement.closest('.annotation .content')) {
 				// Restore focus to the last view if the comment was focused by clicking on

src/common/reader.js

@@ -633,8 +633,7 @@ class Reader {
 		this._onBringReaderToFront?.(true);
 		this._updateState({ contextMenu: params });
 		setTimeout(() => {
-			window.focus();
-			document.activeElement.blur();
+			document.querySelector(".context-menu button:not([disabled])").focus();
 		});
 	}