[UXIT-1701] Add tooltips to Share Post icons

apps/site/package.json

@@ -24,6 +24,7 @@
     "@octokit/rest": "^21.0.1",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@sentry/nextjs": "^8.52.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",

apps/site/src/app/_components/CopyToClipboard.tsx

@@ -14,6 +14,7 @@ import { NOTIFICATION_DIALOG_DURATION_MS } from '@/constants/notificationDialogD
 
 import { Icon } from '@/components/Icon'
 import { NotificationDialog } from '@/components/NotificationDialog'
+import { Tooltip } from '@/components/Tooltip/Tooltip'
 
 type CopyToClipboardProps = {
   text: string
@@ -51,15 +52,22 @@ export function CopyToClipboard({
         setIsOpen={setIsCopied}
         title={notificationTitle}
       />
-      <Button
-        className={clsx(
-          'focus:brand-outline hover:text-brand-400',
-          TOUCH_TARGET.touchAreaPadding,
-        )}
-        onClick={() => handleCopy(text)}
-      >
-        <Icon component={Link} size={32} weight="light" />
-      </Button>
+      <Tooltip description="Copy link to clipboard" side="bottom">
+        <Button
+          className={clsx(
+            'focus:brand-outline hover:text-brand-400',
+            TOUCH_TARGET.touchAreaPadding,
+          )}
+          onClick={() => handleCopy(text)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              handleCopy(text)
+            }
+          }}
+        >
+          <Icon component={Link} size={32} weight="light" />
+        </Button>
+      </Tooltip>
     </>
   )
 }

apps/site/src/app/_components/NotificationDialog.tsx

@@ -27,10 +27,13 @@ export function NotificationDialog({
       open={isOpen}
       as="div"
       className="fixed inset-0 z-50 flex items-start justify-center p-4"
+      aria-labelledby="notification-title"
       onClose={() => setIsOpen(false)}
     >
       <DialogPanel
         transition
+        role="alertdialog"
+        aria-modal="true"
         className={clsx(
           'flex w-80 gap-3 rounded-lg border border-brand-100 border-opacity-20 bg-brand-800 p-5 sm:w-96',
           {
@@ -40,15 +43,20 @@ export function NotificationDialog({
         )}
       >
         <DialogTitle
+          aria-labelledby="dialog-title"
+          id="notification-title"
           as="h3"
           className="flex flex-1 items-center gap-3 text-brand-100"
         >
           {icon && <Icon {...icon} />}
-          {title}
+          <span>{title}</span>
         </DialogTitle>
 
-        <CloseButton className="rounded-md p-1 text-brand-200 focus:brand-outline hover:text-brand-400">
-          <Icon component={X} size={16} />
+        <CloseButton
+          className="rounded-md p-1 text-brand-200 focus:brand-outline hover:text-brand-400"
+          aria-label="Close notification"
+        >
+          <Icon component={X} size={16} aria-hidden="true" />
         </CloseButton>
       </DialogPanel>
     </Dialog>

apps/site/src/app/_components/ShareArticle.tsx

@@ -10,6 +10,7 @@ import { generateShareArticleLinks } from '@/utils/generateShareArticleLinks'
 
 import { CopyToClipboard } from '@/components/CopyToClipboard'
 import { Icon } from '@/components/Icon'
+import { Tooltip } from '@/components/Tooltip/Tooltip'
 
 type ShareArticleProps = {
   articleTitle: string
@@ -43,24 +44,27 @@ export function ShareArticle({
           TOUCH_TARGET.touchAreaOffset,
         )}
       >
-        <CopyToClipboard
-          text={articleUrl}
-          notificationTitle="Link copied to clipboard!"
-        />
+        <li>
+          <CopyToClipboard
+            text={articleUrl}
+            notificationTitle="Link copied to clipboard!"
+          />
+        </li>
         {socialLinksWithIcons.map(({ label, href, icon }) => (
           <li key={label} className="inline-flex">
-            <a
-              aria-label={`Share on ${label}`}
-              href={href}
-              rel="noopener noreferrer"
-              title={`Share on ${label}`}
-              className={clsx(
-                'focus:brand-outline hover:text-brand-400',
-                TOUCH_TARGET.touchAreaPadding,
-              )}
-            >
-              <Icon component={icon} size={32} weight="light" />
-            </a>
+            <Tooltip description={`Share on ${label}`} side="bottom">
+              <a
+                aria-label={`Share on ${label}`}
+                href={href}
+                rel="noopener noreferrer"
+                className={clsx(
+                  'focus:brand-outline hover:text-brand-400',
+                  TOUCH_TARGET.touchAreaPadding,
+                )}
+              >
+                <Icon component={icon} size={32} weight="light" />
+              </a>
+            </Tooltip>
           </li>
         ))}
       </ul>

apps/site/src/app/_components/Table/TooltipHeader.tsx → apps/site/src/app/_components/Table/PopoverHeader.tsx

@@ -5,11 +5,11 @@ import { clsx } from 'clsx'
 import type { TouchTarget } from '@/types/touchTargetType'
 
 import { Icon } from '@/components/Icon'
-import { Tooltip, type TooltipProps } from '@/components/Tooltip/Tooltip'
+import { Popover, type PopoverProps } from '@/components/Tooltip/Popover'
 
-type TableHeaderWithTooltipProps = {
+type TableHeaderWithPopoverProps = {
   title: string
-  description: TooltipProps['description']
+  description: PopoverProps['description']
 }
 
 const TOUCH_TARGET: TouchTarget = {
@@ -22,18 +22,18 @@ const TOUCH_TARGET_ICON: TouchTarget & { visibleElementSize: number } = {
   touchAreaPadding: 'p-1.5',
 }
 
-export function TooltipHeader({
+export function PopoverHeader({
   title,
   description,
-}: TableHeaderWithTooltipProps) {
+}: TableHeaderWithPopoverProps) {
   return (
     <div className="flex items-center gap-1">
       <span>{title}</span>
-      <Tooltip description={description}>
-        {({ open, tooltipId }) => (
+      <Popover description={description}>
+        {({ open, popoverId }) => (
           <Button
             aria-label={`More info on ${title}`}
-            aria-describedby={tooltipId}
+            aria-describedby={popoverId}
             className={clsx(
               'group focus-visible:brand-outline',
               TOUCH_TARGET.touchAreaPadding,
@@ -56,7 +56,7 @@ export function TooltipHeader({
             </span>
           </Button>
         )}
-      </Tooltip>
+      </Popover>
     </div>
   )
 }

apps/site/src/app/_components/Tooltip/Popover.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useId, useState, type ReactNode } from 'react'
+
+import * as RadixPopover from '@radix-ui/react-popover'
+import { clsx } from 'clsx'
+
+import styles from './tooltip.module.scss'
+
+type PopoverRenderProps = {
+  open: boolean
+  popoverId: string
+}
+
+export type PopoverProps = {
+  children: ReactNode | ((props: PopoverRenderProps) => ReactNode)
+  description: string
+  side?: RadixPopover.PopoverContentProps['side']
+}
+
+const GAP_BETWEEN_POPOVER_AND_TRIGGER = 0
+
+export function Popover({ children, description, side = 'top' }: PopoverProps) {
+  const [open, setOpen] = useState(false)
+  const id = useId()
+
+  const popoverId = `popover-${id}`
+
+  return (
+    <RadixPopover.Root open={open} onOpenChange={setOpen}>
+      <RadixPopover.Trigger asChild>
+        {typeof children === 'function'
+          ? children({ open, popoverId })
+          : children}
+      </RadixPopover.Trigger>
+
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          hideWhenDetached
+          id={popoverId}
+          sideOffset={GAP_BETWEEN_POPOVER_AND_TRIGGER}
+          side={side}
+          role="dialog"
+          className={clsx(
+            styles['tooltip-content'],
+            styles['tooltip-animation'],
+          )}
+        >
+          {description}
+          <RadixPopover.Arrow className={styles['tooltip-arrow']} />
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}

apps/site/src/app/_components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@
 
 import { useId, useState, type ReactNode } from 'react'
 
-import * as RadixPopover from '@radix-ui/react-popover'
+import * as RadixTooltip from '@radix-ui/react-tooltip'
 import { clsx } from 'clsx'
 
 import styles from './tooltip.module.scss'
@@ -15,7 +15,7 @@ type TooltipRenderProps = {
 export type TooltipProps = {
   children: ReactNode | ((props: TooltipRenderProps) => ReactNode)
   description: string
-  side?: RadixPopover.PopoverContentProps['side']
+  side?: RadixTooltip.TooltipContentProps['side']
 }
 
 const GAP_BETWEEN_TOOLTIP_AND_TRIGGER = 0
@@ -27,29 +27,31 @@ export function Tooltip({ children, description, side = 'top' }: TooltipProps) {
   const tooltipId = `tooltip-${id}`
 
   return (
-    <RadixPopover.Root open={open} onOpenChange={setOpen}>
-      <RadixPopover.Trigger asChild>
-        {typeof children === 'function'
-          ? children({ open, tooltipId })
-          : children}
-      </RadixPopover.Trigger>
-
-      <RadixPopover.Portal>
-        <RadixPopover.Content
-          hideWhenDetached
-          id={tooltipId}
-          sideOffset={GAP_BETWEEN_TOOLTIP_AND_TRIGGER}
-          side={side}
-          role="tooltip"
-          className={clsx(
-            'max-w-xs rounded-lg bg-brand-200 px-4 py-3 text-sm leading-tight text-brand-800 focus-visible:outline-none',
-            styles['tooltip-animation'],
-          )}
-        >
-          {description}
-          <RadixPopover.Arrow className="fill-brand-200" />
-        </RadixPopover.Content>
-      </RadixPopover.Portal>
-    </RadixPopover.Root>
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root delayDuration={0} open={open} onOpenChange={setOpen}>
+        <RadixTooltip.Trigger asChild>
+          {typeof children === 'function'
+            ? children({ open, tooltipId })
+            : children}
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
+            hideWhenDetached
+            id={tooltipId}
+            sideOffset={GAP_BETWEEN_TOOLTIP_AND_TRIGGER}
+            side={side}
+            role="tooltip"
+            className={clsx(
+              styles['tooltip-content'],
+              styles['tooltip-animation'],
+            )}
+            onEscapeKeyDown={() => setOpen(false)}
+          >
+            {description}
+            <RadixTooltip.Arrow className={styles['tooltip-arrow']} />
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
   )
 }

apps/site/src/app/_components/Tooltip/tooltip.module.scss

@@ -66,3 +66,11 @@
     }
   }
 }
+
+.tooltip-content {
+  @apply max-w-xs rounded-lg bg-brand-200 px-4 py-3 text-sm leading-tight text-brand-800 focus-visible:outline-none;
+}
+
+.tooltip-arrow {
+  @apply fill-brand-200;
+}

apps/site/src/app/filecoin-plus/allocators/data/allocatorsTableColumnsData.tsx

@@ -2,7 +2,7 @@ import { ArrowUpRight } from '@phosphor-icons/react'
 import { createColumnHelper } from '@tanstack/react-table'
 
 import { Icon } from '@/components/Icon'
-import { TooltipHeader } from '@/components/Table/TooltipHeader'
+import { PopoverHeader } from '@/components/Table/PopoverHeader'
 
 import type { AllocatorWithDatacap } from '../schemas/AllocatorSchema'
 import { formatDatacap } from '../utils/formatDatacap'
@@ -45,7 +45,7 @@ export const allocatorsTableColumnsData = [
   }),
   columnHelper.accessor('metapathway_type', {
     header: () => (
-      <TooltipHeader
+      <PopoverHeader
         title="Type"
         description="The allocation method used to distribute DataCap to clients."
       />
@@ -68,7 +68,7 @@ export const allocatorsTableColumnsData = [
   }),
   columnHelper.accessor('application.required_replicas', {
     header: () => (
-      <TooltipHeader
+      <PopoverHeader
         title="Required Replicas"
         description="The minimum number of data copies that must be stored."
       />
@@ -77,7 +77,7 @@ export const allocatorsTableColumnsData = [
   }),
   columnHelper.accessor('application.required_sps', {
     header: () => (
-      <TooltipHeader
+      <PopoverHeader
         title="Required Storage Providers"
         description="The minimum number of distinct storage providers needed for data storage."
       />