From a33955459e15d4627c5c1df50c718e179c898763 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2024 17:55:25 +0100
Subject: [PATCH] Add ability to specify aria-live & aria-atomic on tooltips

---
 src/components/Tooltip/Tooltip.tsx   |  1 +
 src/components/Tooltip/useTooltip.ts | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 35ebdac8..8646f00e 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -138,6 +138,7 @@ function TooltipContent({
       <div
         ref={rest.refs.setFloating}
         style={rest.floatingStyles}
+        {...rest.tooltipProps}
         {...rest.getFloatingProps()}
         className={classNames(styles.tooltip, {
           [styles.invisible]: purpose === "label" && !open,
diff --git a/src/components/Tooltip/useTooltip.ts b/src/components/Tooltip/useTooltip.ts
index c6f9b7f8..18367fc1 100644
--- a/src/components/Tooltip/useTooltip.ts
+++ b/src/components/Tooltip/useTooltip.ts
@@ -33,7 +33,7 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
-import { useMemo, useRef, useState, JSX } from "react";
+import { useMemo, useRef, useState, JSX, AriaAttributes } from "react";
 import { hoverDelay } from "./TooltipProvider";
 
 export interface CommonUseTooltipProps {
@@ -80,6 +80,13 @@ export interface CommonUseTooltipProps {
    *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex
    */
   isTriggerInteractive: boolean;
+
+  /**
+   * Additional aria-* attributes to pass through to the floating tooltip for
+   * edge cases which require more user awareness like errors & alerts.
+   */
+  "aria-atomic"?: AriaAttributes["aria-atomic"];
+  "aria-live"?: AriaAttributes["aria-live"];
 }
 
 export interface TooltipLabel {
@@ -106,6 +113,8 @@ export function useTooltip({
   placement = "bottom",
   isTriggerInteractive,
   caption,
+  "aria-atomic": ariaAtomic,
+  "aria-live": ariaLive,
   ...props
 }: UseTooltipProps) {
   const labelId = useId();
@@ -200,6 +209,10 @@ export function useTooltip({
       purpose: purpose as "label" | "description",
       open,
       setOpen,
+      tooltipProps: {
+        "aria-atomic": ariaAtomic,
+        "aria-live": ariaLive,
+      },
       ...interactions,
       ...data,
       arrowRef,