feat: add aria-describedby to tooltip automatically (#1257)

* Add aria-describedby automatically

* Minor adjustments

* Add cleanup function

* test: update snapshots

---------

Co-authored-by: gabrieljablonski <contact@gabrieljablonski.com>

Author: chardin1

src/App.tsx

@@ -47,8 +47,15 @@ function App() {
       >
         My button
       </button>
-      <Tooltip place="bottom" anchorId={anchorId} isOpen={isDarkOpen} setIsOpen={setIsDarkOpen} />
       <Tooltip
+        id="button1"
+        place="bottom"
+        anchorId={anchorId}
+        isOpen={isDarkOpen}
+        setIsOpen={setIsDarkOpen}
+      />
+      <Tooltip
+        id="button2"
         place="top"
         variant="success"
         anchorId="button2"
@@ -101,6 +108,7 @@ function App() {
         <Tooltip id="anchor-select">Tooltip content</Tooltip>
         <Tooltip
           ref={tooltipRef}
+          id="tooltip-content"
           anchorSelect="section[id='section-anchor-select'] > p > button"
           place="bottom"
           openEvents={{ click: true }}
@@ -127,6 +135,7 @@ function App() {
           </div>
           <Tooltip
             anchorId="floatAnchor"
+            id="float-tooltip"
             content={
               toggle
                 ? 'This is a float tooltip with a very very large content string'
@@ -151,6 +160,7 @@ function App() {
           </div>
           <Tooltip
             anchorId="onClickAnchor"
+            id="onclick-tooltip"
             content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
             events={['click']}
             position={position}

src/components/Tooltip/Tooltip.tsx

@@ -63,6 +63,7 @@ const Tooltip = ({
   isOpen,
   defaultIsOpen = false,
   setIsOpen,
+  previousActiveAnchor,
   activeAnchor,
   setActiveAnchor,
   border,
@@ -205,6 +206,42 @@ const Tooltip = ({
     }, 10)
   }
 
+  /**
+   * Add aria-describedby to activeAnchor when tooltip is active
+   */
+  useEffect(() => {
+    if (!id) return
+
+    function getAriaDescribedBy(element: HTMLElement | null) {
+      return element?.getAttribute('aria-describedby')?.split(' ') || []
+    }
+
+    function removeAriaDescribedBy(element: HTMLElement | null) {
+      const newDescribedBy = getAriaDescribedBy(element).filter((s) => s !== id)
+      if (newDescribedBy.length) {
+        element?.setAttribute('aria-describedby', newDescribedBy.join(' '))
+      } else {
+        element?.removeAttribute('aria-describedby')
+      }
+    }
+
+    if (show) {
+      removeAriaDescribedBy(previousActiveAnchor)
+      const currentDescribedBy = getAriaDescribedBy(activeAnchor)
+      const describedBy = [...new Set([...currentDescribedBy, id])].filter(Boolean).join(' ')
+      activeAnchor?.setAttribute('aria-describedby', describedBy)
+    } else {
+      removeAriaDescribedBy(activeAnchor)
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      // cleanup aria-describedby when the tooltip is closed
+      removeAriaDescribedBy(activeAnchor)
+      removeAriaDescribedBy(previousActiveAnchor)
+    }
+  }, [activeAnchor, show, id, previousActiveAnchor])
+
   /**
    * this replicates the effect from `handleShow()`
    * when `isOpen` is changed from outside

src/components/Tooltip/TooltipTypes.d.ts

@@ -153,6 +153,7 @@ export interface ITooltip {
   afterShow?: () => void
   afterHide?: () => void
   disableTooltip?: (anchorRef: HTMLElement | null) => boolean
+  previousActiveAnchor: HTMLElement | null
   activeAnchor: HTMLElement | null
   setActiveAnchor: (anchor: HTMLElement | null) => void
   border?: CSSProperties['border']

src/components/TooltipController/TooltipController.tsx

@@ -81,6 +81,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
     const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
     const [tooltipClassName, setTooltipClassName] = useState<string | null>(null)
     const [activeAnchor, setActiveAnchor] = useState<HTMLElement | null>(null)
+    const previousActiveAnchorRef = useRef<HTMLElement | null>(null)
     const styleInjectionRef = useRef(disableStyleInjection)
     /**
      * @todo Remove this in a future version (provider/wrapper method is deprecated)
@@ -375,7 +376,15 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       afterHide,
       disableTooltip,
       activeAnchor,
-      setActiveAnchor: (anchor: HTMLElement | null) => setActiveAnchor(anchor),
+      previousActiveAnchor: previousActiveAnchorRef.current,
+      setActiveAnchor: (anchor: HTMLElement | null) => {
+        setActiveAnchor((prev) => {
+          if (!anchor?.isSameNode(prev)) {
+            previousActiveAnchorRef.current = prev
+          }
+          return anchor
+        })
+      },
       role,
     }
 

src/test/__snapshots__/tooltip-attributes.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`tooltip attributes basic tooltip 1`] = `
 <div>
   <span
+    aria-describedby="basic-example-attr"
     data-tooltip-content="Hello World!"
     data-tooltip-id="basic-example-attr"
   >
@@ -26,6 +27,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
 exports[`tooltip attributes tooltip with class name 1`] = `
 <div>
   <span
+    aria-describedby="example-class-name-attr"
     data-tooltip-class-name="tooltip-class-name"
     data-tooltip-content="Hello World!"
     data-tooltip-id="example-class-name-attr"
@@ -50,22 +52,23 @@ exports[`tooltip attributes tooltip with class name 1`] = `
 exports[`tooltip attributes tooltip with place 1`] = `
 <div>
   <span
+    aria-describedby="example-place-attr"
     data-tooltip-content="Hello World!"
     data-tooltip-id="example-place-attr"
     data-tooltip-place="right"
   >
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip react-tooltip__place-right react-tooltip__show"
+    class="react-tooltip react-tooltip__place-left react-tooltip__show"
     id="example-place-attr"
     role="tooltip"
-    style="left: 10px; top: 5px;"
+    style="left: -10px; top: 5px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
+      style="--rt-arrow-size: 8px; top: -1px; right: -4px;"
     />
   </div>
 </div>

src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`tooltip props basic tooltip 1`] = `
 <div>
   <span
+    aria-describedby="basic-example"
     data-tooltip-id="basic-example"
   >
     Lorem Ipsum
@@ -25,6 +26,7 @@ exports[`tooltip props basic tooltip 1`] = `
 exports[`tooltip props clickable tooltip 1`] = `
 <div>
   <span
+    aria-describedby="example-clickable"
     data-tooltip-id="example-clickable"
   >
     Lorem Ipsum
@@ -49,6 +51,7 @@ exports[`tooltip props clickable tooltip 1`] = `
 exports[`tooltip props tooltip with custom position 1`] = `
 <div>
   <span
+    aria-describedby="example-place"
     data-tooltip-id="example-place"
   >
     Lorem Ipsum
@@ -81,6 +84,7 @@ exports[`tooltip props tooltip with delay hide 1`] = `
 exports[`tooltip props tooltip with delay show 1`] = `
 <div>
   <span
+    aria-describedby="example-delay-show"
     data-tooltip-id="example-delay-show"
   >
     Lorem Ipsum
@@ -103,6 +107,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
 exports[`tooltip props tooltip with disableTooltip return false 1`] = `
 <div>
   <span
+    aria-describedby="example-disableTooltip-false"
     data-tooltip-id="example-disableTooltip-false"
   >
     Lorem Ipsum
@@ -125,6 +130,7 @@ exports[`tooltip props tooltip with disableTooltip return false 1`] = `
 exports[`tooltip props tooltip with float 1`] = `
 <div>
   <span
+    aria-describedby="example-float"
     data-tooltip-id="example-float"
   >
     Lorem Ipsum
@@ -147,6 +153,7 @@ exports[`tooltip props tooltip with float 1`] = `
 exports[`tooltip props tooltip with html 1`] = `
 <div>
   <span
+    aria-describedby="example-html"
     data-tooltip-id="example-html"
   >
     Lorem Ipsum
@@ -174,20 +181,21 @@ exports[`tooltip props tooltip with html 1`] = `
 exports[`tooltip props tooltip with place 1`] = `
 <div>
   <span
+    aria-describedby="example-place"
     data-tooltip-id="example-place"
   >
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip react-tooltip__place-right react-tooltip__show"
+    class="react-tooltip react-tooltip__place-left react-tooltip__show"
     id="example-place"
     role="tooltip"
-    style="left: 10px; top: 5px;"
+    style="left: -10px; top: 5px;"
   >
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
+      style="--rt-arrow-size: 8px; top: -1px; right: -4px;"
     />
   </div>
 </div>