Let a tooltip linger, and tell the screen reader what it says

A plain tooltip vanished the instant the pointer left, where M3 keeps one for
1.5s and shows only one at a time — these are popover="manual", so nothing was
closing the last one. A rich tooltip's bubble was never associated with its
trigger at all, so the explanation it exists to give was never announced; the
script now writes aria-describedby (and aria-haspopup/aria-expanded when it is
persistent) onto the focusable control in the trigger slot, and again after a
morph. Plan step 18, actions.md ACT-22, ACT-25.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/js/rich-tooltip.js

@@ -4,6 +4,13 @@
  * Transient (the default): like a plain tooltip — after a short hover on a pointer that can hover,
  * at once on keyboard focus, and it stays while the pointer moves onto the bubble to reach its
  * actions. Persistent: a press on the trigger opens it as a light-dismiss popover.
+ *
+ * The trigger is pointed at the bubble with `aria-describedby`, so the explanation — the whole
+ * point of a rich tooltip — is read out with the control rather than never at all; a persistent
+ * one also says `aria-haspopup="dialog"` and whether it is open. The server cannot write any of
+ * it: the trigger comes from a slot, and only script knows which element in it takes the focus.
+ * A Livewire morph strips attributes the server did not render and gives the bubble a new id, so
+ * they are written again whenever the trigger is reached.
  */
 const HOVER_DELAY_MS = 500
 const LEAVE_GRACE_MS = 200
@@ -17,6 +24,28 @@ document.addEventListener('alpine:init', () => {
             const wrapper = this.$el
             const open = () => bubble.matches(':popover-open')
 
+            const control = () => [...wrapper.querySelectorAll('button, a[href], [tabindex]')].find((element) => !bubble.contains(element))
+
+            const describe = () => {
+                const trigger = control()
+
+                if (!trigger) {
+                    return
+                }
+
+                trigger.setAttribute('aria-describedby', bubble.id)
+
+                if (persistent) {
+                    trigger.setAttribute('aria-haspopup', 'dialog')
+                    trigger.setAttribute('aria-expanded', String(open()))
+                }
+            }
+
+            describe()
+            bubble.addEventListener('toggle', describe)
+            wrapper.addEventListener('focusin', describe)
+            wrapper.addEventListener('pointerenter', describe)
+
             if (persistent) {
                 wrapper.addEventListener('click', (event) => {
                     if (bubble.contains(event.target)) {