Have links clickable within tooltips without clicking content below them (#3204)

* Have links clickable within tooltips without clicking content below them

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/Toolbar.tsx

@@ -190,17 +190,23 @@ export function Toolbar({
                     maybeIconConfig[0].onClick(configCallbackProps)
                   }
                 >
-                  <ToolbarItemContents
+                  <span
+                    className={!maybeIconConfig[0].showTitle ? 'sr-only' : ''}
+                  >
+                    {maybeIconConfig[0].title}
+                  </span>
+                </ActionButton>
+                <ToolbarItemTooltip
                   itemConfig={maybeIconConfig[0]}
                   configCallbackProps={configCallbackProps}
                 />
-                </ActionButton>
               </ActionButtonDropdown>
             )
           }
           const itemConfig = maybeIconConfig
 
           return (
+            <div className="relative" key={itemConfig.id}>
               <ActionButton
                 Element="button"
                 key={itemConfig.id}
@@ -228,11 +234,15 @@ export function Toolbar({
                 }
                 onClick={() => itemConfig.onClick(configCallbackProps)}
               >
-              <ToolbarItemContents
+                <span className={!itemConfig.showTitle ? 'sr-only' : ''}>
+                  {itemConfig.title}
+                </span>
+              </ActionButton>
+              <ToolbarItemTooltip
                 itemConfig={itemConfig}
                 configCallbackProps={configCallbackProps}
               />
-            </ActionButton>
+            </div>
           )
         })}
       </ul>
@@ -250,7 +260,7 @@ export function Toolbar({
  * It contains a tooltip with the title, description, and links
  * and a hotkey listener
  */
-const ToolbarItemContents = memo(function ToolbarItemContents({
+const ToolbarItemTooltip = memo(function ToolbarItemContents({
   itemConfig,
   configCallbackProps,
 }: {
@@ -272,11 +282,8 @@ const ToolbarItemContents = memo(function ToolbarItemContents({
   )
 
   return (
-    <>
-      <span className={!itemConfig.showTitle ? 'sr-only' : ''}>
-        {itemConfig.title}
-      </span>
     <Tooltip
+      inert={false}
       position="bottom"
       wrapperClassName="!p-4 !pointer-events-auto"
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
@@ -339,6 +346,5 @@ const ToolbarItemContents = memo(function ToolbarItemContents({
         </>
       )}
     </Tooltip>
-    </>
   )
 })

src/components/Tooltip.module.css

@@ -57,7 +57,8 @@
   transition-delay: var(--_delay);
 }
 
-:is(:focus-visible) > .tooltipWrapper.withFocus {
+:is(:focus-visible) > .tooltipWrapper.withFocus,
+:focus-within > .tooltipWrapper.withFocus {
   visibility: visible;
   opacity: 1;
 }

src/components/Tooltip.tsx

@@ -29,7 +29,7 @@ export default function Tooltip({
   return (
     <div
       // @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
-      inert={inert}
+      {...{ inert: inert ? '' : undefined }}
       role="tooltip"
       className={`p-3 ${
         position !== 'left' && position !== 'right' ? 'px-0' : ''