Rename annotation mouse enter/leave functions and use them on focus/blur too.

__tests__/src/components/CanvasAnnotations.test.js

@@ -132,6 +132,24 @@ describe('CanvasAnnotations', () => {
         expect(highlightAnnotation).toHaveBeenCalledWith('abc', 'annoId');
       });
 
+      it('highlights annotations on focus', () => {
+        const highlightAnnotation = jest.fn();
+
+        wrapper = createWrapper({
+          annotations: [
+            {
+              content: 'Annotation',
+              id: 'annoId',
+              targetId: 'example.com/iiif/12345',
+            },
+          ],
+          highlightAnnotation,
+        });
+
+        wrapper.find('WithStyles(ListItem)').first().simulate('focus');
+        expect(highlightAnnotation).toHaveBeenCalledWith('abc', 'annoId');
+      });
+
       it('sets the highlighted annotation to null on mouse leave', () => {
         const highlightAnnotation = jest.fn();
 

src/components/CanvasAnnotations.js

@@ -17,8 +17,8 @@ export class CanvasAnnotations extends Component {
     super(props);
 
     this.handleClick = this.handleClick.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleAnnotationHighlight = this.handleAnnotationHighlight.bind(this);
+    this.handleAnnotationUnHighlight = this.handleAnnotationUnHighlight.bind(this);
   }
 
   /**
@@ -37,7 +37,7 @@ export class CanvasAnnotations extends Component {
   }
 
   /** */
-  handleMouseEnter(annotation) {
+  handleAnnotationHighlight(annotation) {
     const { allAnnotationsAreHighlighted, highlightAnnotation, windowId } = this.props;
     if (allAnnotationsAreHighlighted) return;
 
@@ -45,7 +45,7 @@ export class CanvasAnnotations extends Component {
   }
 
   /** */
-  handleMouseLeave() {
+  handleAnnotationUnHighlight() {
     const { allAnnotationsAreHighlighted, highlightAnnotation, windowId } = this.props;
     if (allAnnotationsAreHighlighted) return;
 
@@ -76,8 +76,10 @@ export class CanvasAnnotations extends Component {
                 key={annotation.id}
                 selected={selectedAnnotationIds.includes(annotation.id)}
                 onClick={e => this.handleClick(e, annotation)}
-                onMouseEnter={() => this.handleMouseEnter(annotation)}
-                onMouseLeave={() => this.handleMouseLeave(annotation)}
+                onFocus={() => this.handleAnnotationHighlight(annotation)}
+                onBlur={this.handleAnnotationUnHighlight}
+                onMouseEnter={() => this.handleAnnotationHighlight(annotation)}
+                onMouseLeave={this.handleAnnotationUnHighlight}
               >
                 <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
                   <SanitizedHtml ruleSet="iiif" htmlString={annotation.content} />