Prevent focus from leaking and inadvertently closing the panel

In context, `AnnotationShareControl` is rendered within its associated
`ThreadCard`. `ThreadCard`s are focusable, so any click within the
panel that is not on a focusable element will "leak out" and focus the
annotation card. This will cause the panel to close because the focus
event is outside of the panel.

Prevent focus from leaking by making the panel itself focusable.

Fixes https://github.com/hypothesis/client/issues/5196

src/sidebar/components/Annotation/AnnotationShareControl.tsx

@@ -129,7 +129,13 @@ function AnnotationShareControl({
   );
 
   return (
-    <div className="relative" ref={shareRef}>
+    // Make the container div focusable by setting a non-null `tabIndex`.
+    // This prevents clicks on non-focusable contents from "leaking out" and
+    // focusing a focusable ancester. If something outside of the panel gains
+    // focus, `useElementShouldClose`'s focus listener will close the panel.
+    // "Catch focus" here to prevent this.
+    // See https://github.com/hypothesis/client/issues/5196
+    <div className="relative" ref={shareRef} tabIndex={-1}>
       <IconButton
         icon={ShareIcon}
         title="Share"