Improve readability of focused PDF highlights

The visible part of PDF highlights are created by SVG elements which are
multiply-blended with the PDF content to enhance legibility of
highlighted text.  The blueish background for focused highlights was
still being applied to the transparent text layer on top of the PDF
which contains the `<hypothesis-highlight>` elements. This impacted the
legibility of focused highlights.

Improve the readability of PDF highlights by instead modifying the fill
color of the SVG element.

src/annotator/highlighter.js

@@ -326,9 +326,13 @@ export function removeHighlights(highlights) {
  * @param {boolean} focused
  */
 export function setHighlightsFocused(highlights, focused) {
-  highlights.forEach(h =>
-    h.classList.toggle('hypothesis-highlight-focused', focused)
-  );
+  highlights.forEach(h => {
+    if (h.svgHighlight) {
+      h.svgHighlight.classList.toggle('is-focused', focused);
+    } else {
+      h.classList.toggle('hypothesis-highlight-focused', focused);
+    }
+  });
 }
 
 /**

src/annotator/test/highlighter-test.js

@@ -450,7 +450,7 @@ describe('annotator/highlighter', () => {
   });
 
   describe('setHighlightsFocused', () => {
-    it('adds class to highlights when focused is `true`', () => {
+    it('adds class to HTML highlights when focused', () => {
       const root = document.createElement('div');
       const highlights = createHighlights(root);
 
@@ -461,7 +461,7 @@ describe('annotator/highlighter', () => {
       );
     });
 
-    it('removes class from highlights when focused is `false`', () => {
+    it('removes class from HTML highlights when not focused', () => {
       const root = document.createElement('div');
       const highlights = createHighlights(root);
 
@@ -472,6 +472,31 @@ describe('annotator/highlighter', () => {
         assert.isFalse(h.classList.contains('hypothesis-highlight-focused'))
       );
     });
+
+    it('adds class to PDF highlights when focused', () => {
+      const root = document.createElement('div');
+      render(<PdfPage />, root);
+      const highlights = highlightPdfRange(root);
+
+      setHighlightsFocused(highlights, true);
+
+      highlights.forEach(h =>
+        assert.isTrue(h.svgHighlight.classList.contains('is-focused'))
+      );
+    });
+
+    it('removes class from PDF highlights when not focused', () => {
+      const root = document.createElement('div');
+      render(<PdfPage />, root);
+      const highlights = highlightPdfRange(root);
+
+      setHighlightsFocused(highlights, true);
+      setHighlightsFocused(highlights, false);
+
+      highlights.forEach(h =>
+        assert.isFalse(h.svgHighlight.classList.contains('is-focused'))
+      );
+    });
   });
 
   describe('setHighlightsVisible', () => {

src/styles/annotator/highlights.scss

@@ -15,6 +15,10 @@
     &.is-opaque {
       fill: yellow;
     }
+
+    &.is-focused {
+      fill: var.$color-highlight-focused;
+    }
   }
 
   .hypothesis-highlight {