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.
This commit is contained in:
Sinclair Chen 2022-08-18 16:40:28 -07:00
parent 0cf9a90cfb
commit c773d89074

View File

@ -6,7 +6,6 @@ import {
Placement, Placement,
shift, shift,
useFloating, useFloating,
useFocus,
useHover, useHover,
useInteractions, useInteractions,
useRole, useRole,
@ -48,7 +47,6 @@ export function Tooltip(props: {
const { getReferenceProps, getFloatingProps } = useInteractions([ const { getReferenceProps, getFloatingProps } = useInteractions([
useHover(context, { mouseOnly: noTap }), useHover(context, { mouseOnly: noTap }),
useFocus(context),
useRole(context, { role: 'tooltip' }), useRole(context, { role: 'tooltip' }),
]) ])
// which side of tooltip arrow is on. like: if tooltip is top-left, arrow is on bottom of 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 <div
className={clsx('inline-block', className)} className={clsx('inline-block', className)}
ref={reference} ref={reference}
tabIndex={noTap ? undefined : 0}
{...getReferenceProps()} {...getReferenceProps()}
> >
{children} {children}