Focus on DisplayNote goes to the menu button

src/app/content/highlights/components/DisplayNote.tsx

@@ -7,7 +7,7 @@ import Dropdown, { DropdownItem, DropdownList } from '../../../components/Dropdo
 import Times from '../../../components/Times';
 import { textStyle } from '../../../components/Typography/base';
 import { useDebouncedWindowSize, useFocusElement } from '../../../reactUtils';
-import theme from '../../../theme';
+import theme, { defaultFocusOutline } from '../../../theme';
 import { mergeRefs } from '../../../utils';
 import { highlightStyles } from '../../constants';
 import { query } from '../../search/selectors';
@@ -92,13 +92,16 @@ const DisplayNote = React.forwardRef<HTMLElement, DisplayNoteProps>((
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, confirmationRef, confirmingDelete, textToggle, width, isTocOpen, searchQuery]);
 
-  useFocusElement(element, shouldFocusCard);
+  const buttonPseudoRef = {
+    current: element.current?.querySelector('button') ?? null
+  };
+
+  useFocusElement(buttonPseudoRef, shouldFocusCard);
 
   return (
     <div
       className={className}
       ref={mergeRefs(ref, element)}
-      tabIndex={-1}
       data-highlight-card
       role='dialog'
       aria-label={formatMessage({id: 'i18n:highlighter:display-note:label'})}
@@ -164,6 +167,10 @@ export default styled(DisplayNote)`
     :focus-within ${MenuIcon} {
       color: ${theme.color.primary.gray.base};
     }
+
+    > button:focus {
+      ${defaultFocusOutline}
+    }
   }
 
   ${theme.breakpoints.touchDeviceQuery(css`

src/app/content/highlights/components/__snapshots__/DisplayNote.spec.tsx.snap

@@ -103,6 +103,11 @@ exports[`DisplayNote matches snapshot 1`] = `
   color: #5e6062;
 }
 
+.c0 .c2 > button:focus {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+}
+
 @media screen and (max-width:75em) {
   .c0 {
     margin-left: 8rem;
@@ -120,7 +125,6 @@ exports[`DisplayNote matches snapshot 1`] = `
   className="c0"
   data-highlight-card={true}
   role="dialog"
-  tabIndex={-1}
 >
   <div
     className="c1 c2 c3"
@@ -275,6 +279,11 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
   color: #5e6062;
 }
 
+.c12 .c2 > button:focus {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+}
+
 .c0 {
   width: 20rem;
   overflow: visible;
@@ -309,6 +318,11 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
   color: #5e6062;
 }
 
+.c0 .c2 > button:focus {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+}
+
 @media screen and (max-width:75em) {
   .c0 {
     margin-left: 8rem;
@@ -326,7 +340,6 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
   className="c0"
   data-highlight-card={true}
   role="dialog"
-  tabIndex={-1}
 >
   <div
     className="c1 c2 c3"
@@ -531,6 +544,11 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
   color: #5e6062;
 }
 
+.c14 .c2 > button:focus {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+}
+
 .c0 {
   width: 20rem;
   overflow: visible;
@@ -565,6 +583,11 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
   color: #5e6062;
 }
 
+.c0 .c2 > button:focus {
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem auto -webkit-focus-ring-color;
+}
+
 @media screen and (max-width:75em) {
   .c0 {
     margin-left: 8rem;
@@ -582,7 +605,6 @@ exports[`DisplayNote matches snapshot when focused with opened dropdown 1`] = `
   className="c0"
   data-highlight-card={true}
   role="dialog"
-  tabIndex={-1}
 >
   <div
     className="c1 c2 c3"