From c773d890744b960b2e75b1f48cb906d51aa93d0f Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 18 Aug 2022 16:40:28 -0700
Subject: [PATCH] Remove keyboard accessibility for tooltips

Headless UI's Modal component autofocuses the first focusable item
inside it when opened. This is by design for accessibility reasons.
See https://headlessui.com/react/dialog#managing-initial-focus

Ironically this means we'll have to remove keyboard focus for tooltips
because this causes the tooltips to pop up unnecessarily for all users
whenever the dialog is opened. The alternative is managing focus
manually for several dialogs, which may not be possible as some of our
modals lack a sensible element to focus by default.
---
 web/components/tooltip.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/web/components/tooltip.tsx b/web/components/tooltip.tsx
index db6a934f..b053c6e7 100644
--- a/web/components/tooltip.tsx
+++ b/web/components/tooltip.tsx
@@ -6,7 +6,6 @@ import {
   Placement,
   shift,
   useFloating,
-  useFocus,
   useHover,
   useInteractions,
   useRole,
@@ -48,7 +47,6 @@ export function Tooltip(props: {
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, { mouseOnly: noTap }),
-    useFocus(context),
     useRole(context, { role: 'tooltip' }),
   ])
   // which side of tooltip arrow is on. like: if tooltip is top-left, arrow is on bottom of tooltip
@@ -64,7 +62,6 @@ export function Tooltip(props: {
       <div
         className={clsx('inline-block', className)}
         ref={reference}
-        tabIndex={noTap ? undefined : 0}
         {...getReferenceProps()}
       >
         {children}