@playpilot/tpi 8.10.0 → 8.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.10.0",
+	"version": "8.10.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/routes/components/TrackAnyClick.svelte

@@ -18,8 +18,17 @@
     const targetSelector = `${target?.nodeName.toLowerCase()}${getClasslistAsString(target)}`
     const selector = `${parentSelector} > ${targetSelector}`
 
-    const hasDirectTextContent = Array.from(target.childNodes).some(node => node.nodeName === '#text' && !!node.nodeValue?.trim())
-    const text = hasDirectTextContent ? target.textContent.slice(0, 30) : ''
+    const closestButtonOrLink = target.closest('a, button')
+    const directTextNode =
+      elementHasDirectTextContent(target) ||
+      elementHasDirectTextContent(parent) ||
+      (closestButtonOrLink && elementHasDirectTextContent(closestButtonOrLink))
+
+    const textContent = directTextNode ? directTextNode.textContent?.slice(0, 30) : ''
+    const label = target.getAttribute('aria-label') || closestButtonOrLink?.getAttribute('aria-label') || parent?.getAttribute('aria-label')
+    const placeholder = (target as HTMLInputElement).placeholder
+    const alt = (target as HTMLImageElement).alt
+    const text = (textContent || label || placeholder || alt || '').trim()
 
     track(trackingEvent, null, { selector, text })
   }
@@ -33,6 +42,10 @@
 
     return '.' + classnames.join('.')
   }
+
+  function elementHasDirectTextContent(element: Element): Node | undefined {
+    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim())
+  }
 </script>
 
 <svelte:window {onclick} />

package/src/routes/components/YouTubeEmbed.svelte

@@ -38,7 +38,7 @@
   </iframe>
 
   {#if showMuteControls}
-    <button class="mute" onclick={() => toggleMute()}>
+    <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
       <IconMute muted={isMuted} />
     </button>
   {/if}

package/src/tests/routes/components/TrackAnyClick.test.js

@@ -42,7 +42,7 @@ describe('TrackAnyClick.svelte', () => {
       TrackingEvent.ExploreAnyClick,
       null,
       expect.objectContaining({
-        text: 'This is a very long text that ',
+        text: 'This is a very long text that',
       }),
     )
   })
@@ -104,4 +104,140 @@ describe('TrackAnyClick.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ExploreAnyClick, null, expect.objectContaining({ selector: 'section > p' }))
   })
+
+  it('Should select text of closest button', async () => {
+    document.body.innerHTML = '<button>Some text <span><em></em></span></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should select text of closest link', async () => {
+    document.body.innerHTML = '<a href="/">Some text <span><em></em></span></a>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('em'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
+
+  it('Should use placeholder text', async () => {
+    document.body.innerHTML = '<input placeholder="Some placeholder" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('input'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some placeholder',
+      }),
+    )
+  })
+
+  it('Should use alt text', async () => {
+    document.body.innerHTML = '<img alt="Some alt text" />'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some alt text',
+      }),
+    )
+  })
+
+  it('Should use aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('button'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should use parent aria label', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer aria label over placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label"><img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some aria label',
+      }),
+    )
+  })
+
+  it('Should prefer text content over aria label, placeholder and alt text', async () => {
+    document.body.innerHTML = '<button aria-label="Some aria label">Some text <img placeholder="Some placeholder" alt="Some alt text" /></button>'
+
+    render(ClickTracking)
+
+    // @ts-ignore
+    await fireEvent.click(document.querySelector('img'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ExploreAnyClick,
+      null,
+      expect.objectContaining({
+        text: 'Some text',
+      }),
+    )
+  })
 })