Reader context menu keyboard navigation (#139)

- added keydown listener to contextmenu to select a menuitem by typing,
similar to native menus. 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 2 seconds of not typing.
- listen to even candidates in focus-manager and dispatch copy of
keydown events from there to context-menu, in case one types when
the menu itself is not focused.

Also, fixed an encountered glitch where clicking inside of the rendered
reader content when the context menu is open would make the
annotation un-selectable via tab.

src/common/components/context-menu.js

@@ -96,6 +96,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({});
@@ -135,6 +137,33 @@ function ContextMenu({ params, onClose }) {
 		}
 	}
 
+	// Select a menuitem from typing, similar to native context menus
+	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 = '';
+		}, 2000);
+
+		// 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));
+
+		// Focus the first match
+		if (candidates.length) {
+			candidates[0].focus();
+		}
+	}
+
 	function handleClick(event, item) {
 		onClose();
 		event.preventDefault();
@@ -144,7 +173,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,7 @@ const AnnotationsView = memo(React.forwardRef((props, ref) => {
 		props.onUpdateAnnotations([annotation]);
 	}, []);
 
-	function handlePointerDown() {
+	function handlePointerDown(event) {
 		pointerDownRef.current = true;
 	}
 

src/common/focus-manager.js

@@ -135,6 +135,18 @@ export class FocusManager {
 			e.preventDefault();
 			this.tabToItem(true);
 		}
+		// If context menu is opened and a character is typed, forward the event to context menu
+		// so it can select a menuitem, similar to how native menus do it.
+		let contextMenu = document.querySelector('.context-menu');
+		if (contextMenu && e.key.length == 1 && !e.forwardedToContextMenu && !contextMenu.contains(e.target)) {
+			let eventCopy = new KeyboardEvent('keydown', {
+				key: e.key,
+				bubbles: true
+			});
+			// Mark the event to skip it when it gets captured here to avoid infinite loop
+			eventCopy.forwardedToContextMenu = true;
+			contextMenu.dispatchEvent(eventCopy);
+		}
 	}
 
 	tabToGroup(reverse) {