Make annotation cards focusable

Author: acelaya

src/sidebar/components/ThreadCard.tsx

@@ -81,7 +81,9 @@ function ThreadCard({ frameSync, thread }: ThreadCardProps) {
       )}
       data-testid="thread-card"
       elementRef={cardRef}
-      tabIndex={-1}
+      tabIndex={0}
+      role="article"
+      aria-label="Press Enter to scroll annotation into view"
       onClick={e => {
         // Prevent click events intended for another action from
         // triggering a page scroll.
@@ -91,6 +93,20 @@ function ThreadCard({ frameSync, thread }: ThreadCardProps) {
       }}
       onMouseEnter={() => setThreadHovered(thread.annotation ?? null)}
       onMouseLeave={() => setThreadHovered(null)}
+      onKeyDown={e => {
+        // Simulate default button behavior, where `Enter` and `Space` trigger
+        // click action
+        if (
+          // Trigger event only if the target is the card itself, so that we do
+          // not scroll to the annotation while editing it, or if the key is
+          // pressed to interact with a child button or link.
+          e.target === cardRef.current &&
+          ['Enter', ' '].includes(e.key) &&
+          thread.annotation
+        ) {
+          scrollToAnnotation(thread.annotation);
+        }
+      }}
       key={thread.id}
     >
       <CardContent>{threadContent}</CardContent>

src/sidebar/components/ThreadList.tsx

@@ -1,7 +1,16 @@
-import { ListenerCollection } from '@hypothesis/frontend-shared';
+import {
+  ListenerCollection,
+  useArrowKeyNavigation,
+} from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
-import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
 
 import type { Annotation, EPUBContentSelector } from '../../types/api';
 import type { Thread } from '../helpers/build-thread';
@@ -300,11 +309,18 @@ export default function ThreadList({ threads }: ThreadListProps) {
     });
   }, [visibleThreads]);
 
+  const listRef = useRef<HTMLDivElement | null>(null);
+  useArrowKeyNavigation(listRef, {
+    selector: 'div[role="article"]',
+    horizontal: false,
+    loop: false,
+  });
+
   return (
     // We use role="list"/role="listitem" rather than unstyled ul/li because
     // some screen readers do not treat them as lists if they don't explicitly
     // have bullets
-    <div role="list">
+    <div role="list" ref={listRef}>
       <div style={{ height: offscreenUpperHeight }} />
       {visibleThreads.map((child, index) => (
         <div

src/sidebar/components/test/ThreadCard-test.js

@@ -169,6 +169,34 @@ describe('ThreadCard', () => {
     });
   });
 
+  describe('key down', () => {
+    [
+      { key: 'Enter', shouldScroll: true },
+      { key: ' ', shouldScroll: true },
+      { key: 'ArrowUp', shouldScroll: false },
+      { key: 'Escape', shouldScroll: false },
+    ].forEach(({ key, shouldScroll }) => {
+      it('scrolls to the annotation when Enter or Space are pressed on the `ThreadCard`', () => {
+        const wrapper = createComponent();
+
+        wrapper.find(threadCardSelector).simulate('keydown', { key });
+
+        assert.equal(fakeFrameSync.scrollToAnnotation.called, shouldScroll);
+      });
+    });
+
+    it('does not scroll to annotation when key is pressed in `ThreadCard` targeting other element', () => {
+      const wrapper = createComponent();
+
+      wrapper
+        .find(threadCardSelector)
+        .props()
+        .onKeyDown({ key: 'Enter', target: document.createElement('a') });
+
+      assert.notCalled(fakeFrameSync.scrollToAnnotation);
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({