fix(tooltip): announce content to assistive technology

.changeset/brown-fans-poke.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tooltip>`: make tooltip content available to assistive technology

elements/rh-tooltip/rh-tooltip.css

@@ -77,7 +77,7 @@
       var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
 }
 
-.c {
+.display-c {
   display: contents;
 }
 

elements/rh-tooltip/rh-tooltip.ts

@@ -6,6 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import {
   FloatingDOMController,
   type Placement,
@@ -57,10 +58,13 @@ export class RhTooltip extends LitElement {
 
   #initialized = false;
 
+  #tooltipContentID = getRandomId('tooltip-content');
+
   override connectedCallback(): void {
     super.connectedCallback();
     ENTER_EVENTS.forEach(evt => this.addEventListener(evt, this.show));
     EXIT_EVENTS.forEach(evt => this.addEventListener(evt, this.hide));
+    document.addEventListener('keydown', this.#onKeydown);
   }
 
   override render() {
@@ -75,11 +79,11 @@ export class RhTooltip extends LitElement {
                                [on]: !!on,
                                [anchor]: !!anchor,
                                [alignment]: !!alignment })}">
-        <div class="c" role="tooltip" aria-labelledby="tooltip">
-          <slot id="invoker"></slot>
+        <div class="display-c">
+          <slot id="invoker" @slotchange=${this.#handleInvokerSlotChange}></slot>
         </div>
-        <div class="c" aria-hidden="${String(!open) as 'true' | 'false'}">
-          <slot id="tooltip" name="content">${this.content}</slot>
+        <div class="display-c" aria-hidden="${String(!open) as 'true' | 'false'}">
+          <slot id="tooltip" name="content" @slotchange=${this.#handleTooltipSlotChange}>${this.content}</slot>
         </div>
       </div>
     `;
@@ -100,6 +104,75 @@ export class RhTooltip extends LitElement {
   async hide() {
     await this.#float.hide();
   }
+
+  #onKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  };
+
+  #handleInvokerSlotChange(): void {
+    const invokerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('#invoker');
+    if (!invokerSlot) {
+      return;
+    }
+
+    const assignedNodes = invokerSlot.assignedElements({ flatten: true });
+
+    const focusableSelector = `
+      a[href]:not([inert]):not([inert] *):not([tabindex^="-"]),
+      input:not([type="hidden"]):not([type="radio"]):not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled),
+      input[type="radio"]:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled),
+      select:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled),
+      textarea:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled),
+      button:not([inert]):not([inert] *):not([tabindex^="-"]):not(:disabled)
+    `;
+
+    const findFocusableElement = (node: Element): HTMLElement | null => {
+      if (node.matches(focusableSelector)) {
+        return node as HTMLElement;
+      }
+
+      if (node.tagName.toLowerCase().startsWith('rh-')) {
+        setTimeout(() => {
+          const shadowFocusable = node.shadowRoot?.querySelector(focusableSelector);
+          shadowFocusable?.setAttribute('aria-describedby', this.#tooltipContentID);
+          return;
+        }, 50);
+      }
+
+      return null;
+    };
+
+    let invokerElement: HTMLElement | undefined;
+
+    for (const node of assignedNodes) {
+      const focusableElement = findFocusableElement(node);
+      if (focusableElement) {
+        invokerElement = focusableElement;
+        break;
+      }
+    }
+
+    if (invokerElement) {
+      invokerElement.setAttribute('aria-describedby', this.#tooltipContentID);
+    }
+  }
+
+  #handleTooltipSlotChange(): void {
+    const tooltipSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('#tooltip');
+    if (!tooltipSlot) {
+      return;
+    }
+
+    const assignedNodes = tooltipSlot.assignedElements({ flatten: true });
+    const tooltipContent = assignedNodes[0] as HTMLElement | undefined;
+
+    if (tooltipContent) {
+      tooltipContent.setAttribute('id', this.#tooltipContentID);
+      tooltipContent.setAttribute('role', 'tooltip');
+    }
+  }
 }
 
 declare global {