Fixed focus styles for OwnersStack dropdown toggle button

src/devtools/views/Components/OwnersStack.css

@@ -42,13 +42,19 @@
   border-radius: 0.25rem;
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem;
+  padding: 0;
   flex: 0 0 auto;
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
   margin-right: 0.5rem;
 }
+.MenuButtonContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
 .MenuButton:hover {
   color: var(--color-button-hover);
 }
@@ -57,10 +63,14 @@
   color: var(--color-button-active);
   outline: none;
 }
-.MenuButton:focus-within {
-  background: var(--color-button-background-focus);
+
+.MenuButton:focus,
+.MenuButtonContent:focus {
   outline: none;
 }
+.MenuButton:focus > .MenuButtonContent {
+  background: var(--color-button-background-focus);
+}
 
 .Modal[data-reach-menu-list] {
   display: inline-flex;

src/devtools/views/Components/OwnersStack.js

@@ -97,7 +97,9 @@ function ElementsDropdown({
     <Menu>
       {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
       <MenuButton className={styles.MenuButton}>
-        <ButtonIcon type="more" />
+        <span className={styles.MenuButtonContent} tabIndex={-1}>
+          <ButtonIcon type="more" />
+        </span>
       </MenuButton>
       {/* TODO (tooltips) </Tooltip> */}
       <MenuList className={styles.Modal}>