Revert "Focus on DisplayNote goes to the menu button"

This reverts commit 7e8a6d4.

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, { defaultFocusOutline } from '../../../theme';
+import theme from '../../../theme';
 import { mergeRefs } from '../../../utils';
 import { highlightStyles } from '../../constants';
 import { query } from '../../search/selectors';
@@ -92,16 +92,13 @@ const DisplayNote = React.forwardRef<HTMLElement, DisplayNoteProps>((
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, confirmationRef, confirmingDelete, textToggle, width, isTocOpen, searchQuery]);
 
-  const buttonPseudoRef = {
-    current: element.current?.querySelector('button') ?? null,
-  };
-
-  useFocusElement(buttonPseudoRef, shouldFocusCard);
+  useFocusElement(element, 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'})}
@@ -167,10 +164,6 @@ 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,11 +103,6 @@ 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;
@@ -125,6 +120,7 @@ exports[`DisplayNote matches snapshot 1`] = `
   className="c0"
   data-highlight-card={true}
   role="dialog"
+  tabIndex={-1}
 >
   <div
     className="c1 c2 c3"
@@ -279,11 +275,6 @@ 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;
@@ -318,11 +309,6 @@ 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;
@@ -340,6 +326,7 @@ exports[`DisplayNote matches snapshot when focused 1`] = `
   className="c0"
   data-highlight-card={true}
   role="dialog"
+  tabIndex={-1}
 >
   <div
     className="c1 c2 c3"
@@ -544,11 +531,6 @@ 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;
@@ -583,11 +565,6 @@ 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;
@@ -605,6 +582,7 @@ 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"