EPUB/Snapshot: Keyboard accessibility improvements for annotations

src/common/lib/utilities.js

@@ -55,7 +55,11 @@ export function normalizeKey(key, code) {
 	return key;
 }
 
-// Key combination taking into account layout and modifier keys
+/**
+ * Key combination taking into account layout and modifier keys
+ * @param {KeyboardEvent} event
+ * @returns {string}
+ */
 export function getKeyCombination(event) {
 	let modifiers = [];
 	if (event.metaKey && isMac()) {
@@ -86,7 +90,11 @@ export function getKeyCombination(event) {
 	return modifiers.join('-');
 }
 
-// Physical key combination
+/**
+ * Physical key combination
+ * @param {KeyboardEvent} event
+ * @returns {string}
+ */
 export function getCodeCombination(event) {
 	let modifiers = [];
 	if (event.metaKey && isMac()) {

src/common/types.ts

@@ -160,7 +160,8 @@ export type FindState = {
 		total: number,
 		index: number,
 		// Mobile app lists all results in a popup
-		snippets: string[]
+		snippets: string[],
+		annotation?: NewAnnotation
 	} | null;
 };
 

src/dom/common/components/overlay/annotation-overlay.tsx

@@ -373,7 +373,13 @@ let HighlightOrUnderline: React.FC<HighlightOrUnderlineProps> = (props) => {
 	// the whole outer <g> containing the underline/highlight (potentially small) and the interactive <foreignObject>s
 	// (big) so that we get all the highlighted text to render in the drag image.
 	return <>
-		<g fill={annotation.color} ref={outerGroupRef}>
+		<g
+			tabIndex={-1}
+			onPointerDown={e => e.preventDefault()}
+			data-annotation-id={annotation.id}
+			fill={annotation.color}
+			ref={outerGroupRef}
+		>
 			{rectGroup}
 			{foreignObjects}
 			{resizer}
@@ -445,6 +451,7 @@ const Note: React.FC<NoteProps> = (props) => {
 			opacity={annotation.id ? '100%' : '50%'}
 			selected={selected}
 			large={true}
+			tabIndex={-1}
 			onPointerDown={onPointerDown && (event => onPointerDown!(annotation, event))}
 			onPointerUp={onPointerUp && (event => onPointerUp!(annotation, event))}
 			onContextMenu={onContextMenu && (event => onContextMenu!(annotation, event))}
@@ -767,6 +774,7 @@ let CommentIcon = React.forwardRef<SVGSVGElement, CommentIconProps>((props, ref)
 			width={size}
 			height={size}
 			viewBox="0 0 24 24"
+			data-annotation-id={props.annotation?.id}
 			ref={ref}
 		>
 			<IconNoteLarge/>
@@ -780,6 +788,8 @@ let CommentIcon = React.forwardRef<SVGSVGElement, CommentIconProps>((props, ref)
 			width={size}
 			height={size}
 			className="needs-pointer-events"
+			tabIndex={props.tabIndex}
+			data-annotation-id={props.annotation?.id}
 		>
 			<div
 				// @ts-ignore
@@ -806,6 +816,7 @@ type CommentIconProps = {
 	opacity?: string | number;
 	selected?: boolean;
 	large?: boolean;
+	tabIndex?: number;
 	onPointerDown?: (event: React.PointerEvent) => void;
 	onPointerUp?: (event: React.PointerEvent) => void;
 	onContextMenu?: (event: React.MouseEvent) => void;