Add screen-reader announcements of AdderToolbar keyboard shortcuts

src/annotator/components/AdderToolbar.tsx

@@ -101,6 +101,46 @@ function ToolbarButton({
   );
 }
 
+/**
+ * Render non-visible content for screen readers to announce adder keyboard
+ * shortcuts and count of annotations associated with the current selection.
+ */
+function AdderToolbarShortcuts({
+  annotationCount,
+  isVisible,
+}: {
+  annotationCount: number;
+  isVisible: boolean;
+}) {
+  return (
+    <div className="sr-only">
+      <span
+        aria-live="polite"
+        aria-atomic="true"
+        role="status"
+        data-testid="annotation-count-announce"
+      >
+        {annotationCount > 0 && (
+          <span>
+            {annotationCount}{' '}
+            {annotationCount === 1 ? 'annotation' : 'annotations'} for this
+            selection.
+          </span>
+        )}
+      </span>
+      <ul aria-live="polite" data-testid="annotate-shortcuts-announce">
+        {isVisible && (
+          <>
+            {annotationCount > 0 && <li>Press {"'S'"} to show annotations.</li>}
+            <li>Press {"'A'"} to annotate.</li>
+            <li>Press {"'H'"} to highlight.</li>
+          </>
+        )}
+      </ul>
+    </div>
+  );
+}
+
 export type Command = 'annotate' | 'highlight' | 'show' | 'hide';
 
 type AdderToolbarProps = {
@@ -240,6 +280,10 @@ export default function AdderToolbar({
         )}
       </div>
       <AdderToolbarArrow arrowDirection={arrowDirection} />
+      <AdderToolbarShortcuts
+        annotationCount={annotationCount}
+        isVisible={isVisible}
+      />
     </div>
   );
 }

src/annotator/components/test/AdderToolbar-test.js

+import { mount } from 'enzyme';
+
+import AdderToolbar from '../AdderToolbar';
+
+// nb. Most tests for `AdderToolbar` are currently covered by `adder-test.js`.
+// This needs refactoring to test the `AdderToolbar` on its own as a unit.
 describe('AdderToolbar', () => {
-  // nb. Most tests for `AdderToolbar` are currently covered by `adder-test.js`.
-  // This needs refactoring to test the `AdderToolbar` on its own as a unit.
+  const createComponent = props =>
+    mount(
+      <AdderToolbar
+        direction="up"
+        annotationCount={0}
+        onCommand={() => {}}
+        isVisible={true}
+        {...props}
+      />
+    );
+
+  describe('keyboard shortcut content for screen readers', () => {
+    it('renders keyboard shortcuts for annotate and highlight actions', () => {
+      const wrapper = createComponent();
+      const shortcutListItems = wrapper
+        .find('[data-testid="annotate-shortcuts-announce"]')
+        .find('li');
+
+      assert.equal(shortcutListItems.length, 2);
+      assert.include(shortcutListItems.at(0).text(), 'annotate');
+      assert.include(shortcutListItems.at(1).text(), 'highlight');
+    });
+
+    it('does not render keyboard shortcut items if adder is not visible', () => {
+      const wrapper = createComponent({ isVisible: false });
+
+      const shortcutListItems = wrapper
+        .find('[data-testid="annotate-shortcuts-announce"]')
+        .find('li');
+
+      assert.equal(shortcutListItems.length, 0);
+    });
+
+    it('renders a keyboard shortcut to show annotations when there are annotations to show', () => {
+      const wrapper = createComponent({ annotationCount: 2 });
+      const shortcutListItems = wrapper
+        .find('[data-testid="annotate-shortcuts-announce"]')
+        .find('li');
+
+      assert.equal(shortcutListItems.length, 3);
+      assert.include(shortcutListItems.at(0).text(), 'show annotations');
+    });
+
+    it('renders status information about annotation count when there are annotations to show', () => {
+      const wrapper = createComponent({ annotationCount: 2 });
+      const annotationCountStatus = wrapper.find(
+        '[data-testid="annotation-count-announce"]'
+      );
+      assert.include(annotationCountStatus.text(), '2 annotations');
+    });
+
+    it('does not render status information about annotation count when there are no annotations', () => {
+      const wrapper = createComponent({ annotationCount: 0 });
+      const annotationCountStatus = wrapper.find(
+        '[data-testid="annotation-count-announce"]'
+      );
+
+      assert.isEmpty(annotationCountStatus.text());
+    });
+  });
 });