[MWPW-167312] tooltip dismiss escape (#3664)

* [MWPW-167312] tooltip dismiss escape * [MWPW-167312] unit test added
adobecom · Feb 18, 2025 · 90f114d · 90f114d
1 parent 5168bc8
commit 90f114d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js
@@ -171,6 +171,34 @@ async function setAriaLabelForIcons(el) {
   });
 }
 
+function setTooltipListeners(el) {
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      el.querySelectorAll('.milo-tooltip').forEach((tooltip) => {
+        tooltip.classList.add('hide-tooltip');
+      });
+    }
+  });
+
+  el.querySelectorAll('.milo-tooltip').forEach((tooltip) => {
+    tooltip.addEventListener('mouseenter', () => {
+      tooltip.classList.remove('hide-tooltip');
+    });
+
+    tooltip.addEventListener('mouseleave', () => {
+      tooltip.classList.add('hide-tooltip');
+    });
+
+    tooltip.addEventListener('focus', () => {
+      tooltip.classList.remove('hide-tooltip');
+    });
+
+    tooltip.addEventListener('blur', () => {
+      tooltip.classList.add('hide-tooltip');
+    });
+  });
+}
+
 function handleHighlight(table) {
   const isHighlightTable = table.classList.contains('highlight');
   const firstRow = table.querySelector('.row-1');
@@ -622,6 +650,7 @@ export default function init(el) {
 
     isDecorated = true;
     setAriaLabelForIcons(el);
+    setTooltipListeners(el);
   };
 
   window.addEventListener(MILO_EVENTS.DEFERRED, () => {

diff --git a/libs/features/icons/icons.css b/libs/features/icons/icons.css
@@ -107,6 +107,11 @@
   display: block;
 }
 
+.milo-tooltip.hide-tooltip::before,
+.milo-tooltip.hide-tooltip::after {
+  display: none;
+}
+
 @media (max-width: 600px) {
   .milo-tooltip::before { 
     max-width: 180px;

diff --git a/test/blocks/table/mocks/body.html b/test/blocks/table/mocks/body.html
@@ -510,7 +510,7 @@
     <div>
       <div>
         <p>Add a business stamp</p>
-        <p><span class="icon icon-info"></span></p>
+        <p><span class="icon icon-info milo-tooltip"></span></p>
       </div>
       <div></div>
       <div></div>

diff --git a/test/blocks/table/table.test.js b/test/blocks/table/table.test.js
@@ -127,5 +127,25 @@ describe('table and tablemetadata', () => {
         expect(selectElement.getAttribute('aria-label')).to.equal(ariaLabel);
       });
     });
+
+    it('should show and hide tooltip on hover, focus, and Escape key', async () => {
+      const tooltip = document.querySelector('.milo-tooltip');
+      expect(tooltip).to.exist;
+
+      tooltip.dispatchEvent(new Event('mouseenter'));
+      expect(tooltip.classList.contains('hide-tooltip')).to.be.false;
+
+      tooltip.dispatchEvent(new Event('mouseleave'));
+      expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+
+      tooltip.dispatchEvent(new Event('focus'));
+      expect(tooltip.classList.contains('hide-tooltip')).to.be.false;
+
+      tooltip.dispatchEvent(new Event('blur'));
+      expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+
+      await sendKeys({ press: 'Escape' });
+      expect(tooltip.classList.contains('hide-tooltip')).to.be.true;
+    });
   });
 });