From f2764e9258e51984ad33a3a2f0f97f7a968dace3 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 18 Aug 2022 18:54:09 -0700
Subject: [PATCH] Remove keyboard accessibility for tooltips (#779)

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}