Apply applyFocusVisiblePolyfill to shadow DOM elements

Follow instructions from: https://github.com/WICG/focus-visible#shadow-dom

Closes #2959 #2689

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

@@ -9,17 +9,19 @@ const noop = () => {};
 describe('Toolbar', () => {
   const createToolbar = props =>
     mount(
-      <Toolbar
-        closeSidebar={noop}
-        createAnnotation={noop}
-        toggleHighlights={noop}
-        toggleSidebar={noop}
-        isSidebarOpen={false}
-        showHighlights={false}
-        newAnnotationType="note"
-        useMinimalControls={false}
-        {...props}
-      />
+      <div>
+        <Toolbar
+          closeSidebar={noop}
+          createAnnotation={noop}
+          toggleHighlights={noop}
+          toggleSidebar={noop}
+          isSidebarOpen={false}
+          showHighlights={false}
+          newAnnotationType="note"
+          useMinimalControls={false}
+          {...props}
+        />
+      </div>
     );
 
   const findButton = (wrapper, label) =>

src/annotator/components/toolbar.js

@@ -98,7 +98,7 @@ export default function Toolbar({
   useMinimalControls = false,
 }) {
   return (
-    <div>
+    <>
       {useMinimalControls && isSidebarOpen && (
         <ToolbarButton
           className="annotator-toolbar__sidebar-close"
@@ -134,7 +134,7 @@ export default function Toolbar({
           />
         </div>
       )}
-    </div>
+    </>
   );
 }
 

src/annotator/util/shadow-root.js

@@ -47,6 +47,7 @@ export function createShadowRoot(container) {
   loadStyles(shadowRoot);
 
   // @ts-ignore The window doesn't know about the polyfill
+  // applyFocusVisiblePolyfill comes from the `focus-visible` package.
   const applyFocusVisible = window.applyFocusVisiblePolyfill;
   if (applyFocusVisible) {
     applyFocusVisible(shadowRoot);