From 94e7c0c81454de1b3d60bfe0a88862976c291423 Mon Sep 17 00:00:00 2001
From: Patrick Cate <patrickcate@users.noreply.github.com>
Date: Thu, 4 Jul 2024 21:58:30 -0400
Subject: [PATCH] feat(UsaTooltip): allow users to hover over tooltip content

This aligns with the USWDS 3.8.1 change: https://github.com/uswds/uswds/pull/5835
---
 src/components/UsaTooltip/UsaTooltip.test.js | 36 +++++++++-----------
 src/components/UsaTooltip/UsaTooltip.vue     | 14 +++++---
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/UsaTooltip/UsaTooltip.test.js b/src/components/UsaTooltip/UsaTooltip.test.js
index b34a675a..74bb9890 100644
--- a/src/components/UsaTooltip/UsaTooltip.test.js
+++ b/src/components/UsaTooltip/UsaTooltip.test.js
@@ -2,17 +2,13 @@ import '@module/@uswds/uswds/dist/css/uswds.min.css'
 import UsaTooltip from './UsaTooltip.vue'
 
 describe('UsaTooltip', () => {
-  it('renders the component', () => {
-    cy.mount(UsaTooltip, {
-      props: {
-        id: 'test-tooltip-id',
-        label: 'Test tooltip label',
-        customClasses: {},
-      },
-      slots: {
-        default: () => 'Test tooltip trigger',
-      },
-    })
+  it.only('renders the component', () => {
+    const wrapperComponent = {
+      components: { UsaTooltip },
+      template: `<div style="padding:150px;"><UsaTooltip id="test-tooltip-id" label="Test tooltip label">Test tooltip trigger</UsaTooltip></div>`,
+    }
+
+    cy.mount(wrapperComponent)
 
     cy.get('span.usa-tooltip').as('tooltip').should('exist')
 
@@ -29,7 +25,7 @@ describe('UsaTooltip', () => {
       .and('not.have.class', 'is-visible')
       .and('have.attr', 'role', 'tooltip')
       .and('have.attr', 'aria-hidden', 'true')
-      .and('have.class', 'usa-tooltip__body--bottom')
+      .and('have.class', 'usa-tooltip__body--top')
       .and('contain', 'Test tooltip label')
       .and('be.hidden')
 
@@ -39,7 +35,7 @@ describe('UsaTooltip', () => {
       .should('be.visible')
       .and('have.class', 'is-set')
       .and('have.class', 'is-visible')
-      .and('have.class', 'usa-tooltip__body--bottom')
+      .and('have.class', 'usa-tooltip__body--top')
       .and('have.attr', 'aria-hidden', 'false')
       .and('have.attr', 'style')
 
@@ -75,7 +71,7 @@ describe('UsaTooltip', () => {
       .and('have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'false')
 
-    cy.get('@tooltip').type('{esc}')
+    cy.realPress('{esc}')
 
     cy.get('@tooltipLabel')
       .should('be.hidden')
@@ -83,7 +79,7 @@ describe('UsaTooltip', () => {
       .and('not.have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'true')
 
-    cy.get('@tooltipTrigger').focus()
+    cy.get('@tooltipTrigger').realHover()
 
     cy.get('@tooltipLabel')
       .should('be.visible')
@@ -91,13 +87,13 @@ describe('UsaTooltip', () => {
       .and('have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'false')
 
-    cy.get('@tooltip').type('{enter}')
+    cy.get('@tooltipLabel').realHover()
 
     cy.get('@tooltipLabel')
-      .should('be.hidden')
-      .and('not.have.class', 'is-set')
-      .and('not.have.class', 'is-visible')
-      .and('have.attr', 'aria-hidden', 'true')
+      .should('be.visible')
+      .and('have.class', 'is-set')
+      .and('have.class', 'is-visible')
+      .and('have.attr', 'aria-hidden', 'false')
   })
 
   it('renders with custom tags, CSS classes, and label slot content', () => {
diff --git a/src/components/UsaTooltip/UsaTooltip.vue b/src/components/UsaTooltip/UsaTooltip.vue
index 9730dd89..da5c7637 100644
--- a/src/components/UsaTooltip/UsaTooltip.vue
+++ b/src/components/UsaTooltip/UsaTooltip.vue
@@ -13,6 +13,7 @@ import {
   flip,
   inline,
 } from '@floating-ui/dom'
+import { onKeyStroke } from '@vueuse/core'
 import { nextId } from '@/utils/unique-id.js'
 
 const props = defineProps({
@@ -58,6 +59,7 @@ const props = defineProps({
   },
 })
 
+const wrapperElement = ref(null)
 const referenceElement = ref(null)
 const floatingElement = ref(null)
 const isSet = ref(false)
@@ -78,6 +80,10 @@ const labelClasses = computed(() => [
   ...(props.customClasses?.label || []),
 ])
 
+onKeyStroke('Escape', () => {
+  isSet.value = false
+})
+
 let cleanupFloatingUi
 
 const updatePosition = () => {
@@ -139,8 +145,12 @@ onBeforeUnmount(() => {
 <template>
   <component
     :is="wrapperTag"
+    ref="wrapperElement"
     class="usa-tooltip"
     :class="customClasses?.component"
+    @mouseenter="isSet = true"
+    @mouseover="isSet = true"
+    @mouseout="isSet = false"
   >
     <component
       :is="tag"
@@ -149,12 +159,8 @@ onBeforeUnmount(() => {
       class="usa-tooltip__trigger"
       tabindex="0"
       :aria-describedby="computedId"
-      @mouseenter="isSet = true"
-      @mouseover="isSet = true"
-      @mouseout="isSet = false"
       @focus="isSet = true"
       @blur="isSet = false"
-      @keydown="isSet = false"
       ><slot></slot
     ></component>
     <span