Update tooltip to run setup on connectedCallback instead of relying o…

…n attributeChangedCallback (#1688)
primer · Dec 8, 2022 · 988077a · 988077a
1 parent 15688b1
commit 988077a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 51 deletions.
diff --git a/.changeset/new-dancers-train.md b/.changeset/new-dancers-train.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix tooltips not adding aria attributes when Turbo navigating
diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -186,6 +186,8 @@ class ToolTipElement extends HTMLElement {
   }
 
   connectedCallback() {
+    this.#updateControlReference()
+    this.#updateDirection()
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
       // eslint-disable-next-line github/no-inner-html
@@ -259,64 +261,74 @@ class ToolTipElement extends HTMLElement {
   }
 
   attributeChangedCallback(name: string) {
+    if (!this.isConnected) return
+
     if (name === 'id' || name === 'data-type') {
-      if (!this.id || !this.control) return
-      if (this.type === 'label') {
-        let labelledBy = this.control.getAttribute('aria-labelledby')
-        if (labelledBy) {
-          if (!labelledBy.split(' ').includes(this.id)) {
-            labelledBy = `${labelledBy} ${this.id}`
-          } else {
-            labelledBy = `${labelledBy}`
-          }
+      this.#updateControlReference()
+    } else if (name === 'data-direction') {
+      this.#updateDirection()
+    }
+  }
+
+  #updateControlReference() {
+    if (!this.id || !this.control) return
+    if (this.type === 'label') {
+      let labelledBy = this.control.getAttribute('aria-labelledby')
+      if (labelledBy) {
+        if (!labelledBy.split(' ').includes(this.id)) {
+          labelledBy = `${labelledBy} ${this.id}`
         } else {
-          labelledBy = this.id
+          labelledBy = `${labelledBy}`
         }
-        this.control.setAttribute('aria-labelledby', labelledBy)
-
-        // Prevent duplicate accessible name announcements.
-        this.setAttribute('aria-hidden', 'true')
       } else {
-        let describedBy = this.control.getAttribute('aria-describedby')
-        if (describedBy) {
-          if (!describedBy.split(' ').includes(this.id)) {
-            describedBy = `${describedBy} ${this.id}`
-          } else {
-            describedBy = `${describedBy}`
-          }
+        labelledBy = this.id
+      }
+      this.control.setAttribute('aria-labelledby', labelledBy)
+
+      // Prevent duplicate accessible name announcements.
+      this.setAttribute('aria-hidden', 'true')
+    } else {
+      let describedBy = this.control.getAttribute('aria-describedby')
+      if (describedBy) {
+        if (!describedBy.split(' ').includes(this.id)) {
+          describedBy = `${describedBy} ${this.id}`
         } else {
-          describedBy = this.id
+          describedBy = `${describedBy}`
         }
-        this.control.setAttribute('aria-describedby', describedBy)
-      }
-    } else if (name === 'data-direction') {
-      this.classList.remove(...DIRECTION_CLASSES)
-      const direction = this.direction
-      if (direction === 'n') {
-        this.#align = 'center'
-        this.#side = 'outside-top'
-      } else if (direction === 'ne') {
-        this.#align = 'start'
-        this.#side = 'outside-top'
-      } else if (direction === 'e') {
-        this.#align = 'center'
-        this.#side = 'outside-right'
-      } else if (direction === 'se') {
-        this.#align = 'start'
-        this.#side = 'outside-bottom'
-      } else if (direction === 's') {
-        this.#align = 'center'
-        this.#side = 'outside-bottom'
-      } else if (direction === 'sw') {
-        this.#align = 'end'
-        this.#side = 'outside-bottom'
-      } else if (direction === 'w') {
-        this.#align = 'center'
-        this.#side = 'outside-left'
-      } else if (direction === 'nw') {
-        this.#align = 'end'
-        this.#side = 'outside-top'
+      } else {
+        describedBy = this.id
       }
+      this.control.setAttribute('aria-describedby', describedBy)
+    }
+  }
+
+  #updateDirection() {
+    this.classList.remove(...DIRECTION_CLASSES)
+    const direction = this.direction
+    if (direction === 'n') {
+      this.#align = 'center'
+      this.#side = 'outside-top'
+    } else if (direction === 'ne') {
+      this.#align = 'start'
+      this.#side = 'outside-top'
+    } else if (direction === 'e') {
+      this.#align = 'center'
+      this.#side = 'outside-right'
+    } else if (direction === 'se') {
+      this.#align = 'start'
+      this.#side = 'outside-bottom'
+    } else if (direction === 's') {
+      this.#align = 'center'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'sw') {
+      this.#align = 'end'
+      this.#side = 'outside-bottom'
+    } else if (direction === 'w') {
+      this.#align = 'center'
+      this.#side = 'outside-left'
+    } else if (direction === 'nw') {
+      this.#align = 'end'
+      this.#side = 'outside-top'
     }
   }