feat: add tooltip support to vaadin-side-nav-item (#10008) (#10050)

web-padawan · HerbertsVaadin · web-flow · commit b4031cf7fa09 · 2025-08-21T15:22:51.000+03:00
Co-authored-by: Herberts &lt;80950643+HerbertsVaadin@users.noreply.github.com&gt;
diff --git a/packages/side-nav/src/vaadin-side-nav-item.js b/packages/side-nav/src/vaadin-side-nav-item.js
@@ -6,9 +6,11 @@
 import { html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { location } from './location.js';
@@ -171,11 +173,16 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      __tooltipText: {
+        type: String,
+      },
     };
   }
 
   static get styles() {
-    return [sideNavItemBaseStyles];
+    return [sideNavItemBaseStyles, screenReaderOnly];
   }
 
   constructor() {
@@ -243,7 +250,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   /** @protected */
   render() {
     return html`
-      <div part="content" @click="${this._onContentClick}">
+      <div id="content" part="content" @click="${this._onContentClick}">
         <a
           id="link"
           ?disabled="${this.disabled}"
@@ -256,6 +263,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         >
           <slot name="prefix"></slot>
           <slot></slot>
+          <div class="sr-only">${this.__tooltipText}</div>
           <slot name="suffix"></slot>
         </a>
         <button
@@ -271,9 +279,30 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         <slot name="children"></slot>
       </ul>
       <div hidden id="i18n">${this.__effectiveI18n.toggle}</div>
+      <slot name="tooltip"></slot>
     `;
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._tooltipController = new TooltipController(this);
+    this._tooltipController.setTarget(this.$.content);
+    this._tooltipController.setAriaTarget(null);
+    this._tooltipController.addEventListener('tooltip-changed', (event) => {
+      const { node } = event.detail;
+      if (node) {
+        const overlay = node._overlayElement;
+        this.__tooltipText = overlay ? overlay.textContent.trim() : '';
+        node.setAttribute('aria-hidden', 'true');
+      } else {
+        this.__tooltipText = '';
+      }
+    });
+    this.addController(this._tooltipController);
+  }
+
   /** @private */
   _onButtonClick(event) {
     // Prevent the event from being handled
diff --git a/packages/side-nav/test/dom/__snapshots__/side-nav-item.test.snap.js b/packages/side-nav/test/dom/__snapshots__/side-nav-item.test.snap.js
@@ -176,7 +176,10 @@ snapshots["vaadin-side-nav-item item path"] =
 /* end snapshot vaadin-side-nav-item item path */
 
 snapshots["vaadin-side-nav-item shadow default"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="false"
     id="link"
@@ -187,6 +190,8 @@ snapshots["vaadin-side-nav-item shadow default"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -213,11 +218,16 @@ snapshots["vaadin-side-nav-item shadow default"] =
 >
   Toggle child items
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow default */
 
 snapshots["vaadin-side-nav-item shadow expanded"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="false"
     id="link"
@@ -228,6 +238,8 @@ snapshots["vaadin-side-nav-item shadow expanded"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -253,11 +265,16 @@ snapshots["vaadin-side-nav-item shadow expanded"] =
 >
   Toggle child items
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow expanded */
 
 snapshots["vaadin-side-nav-item shadow current"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="page"
     href=""
@@ -269,6 +286,8 @@ snapshots["vaadin-side-nav-item shadow current"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -294,11 +313,16 @@ snapshots["vaadin-side-nav-item shadow current"] =
 >
   Toggle child items
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow current */
 
 snapshots["vaadin-side-nav-item shadow path"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="false"
     href="path"
@@ -310,6 +334,8 @@ snapshots["vaadin-side-nav-item shadow path"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -336,11 +362,16 @@ snapshots["vaadin-side-nav-item shadow path"] =
 >
   Toggle child items
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow path */
 
 snapshots["vaadin-side-nav-item shadow null path"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="false"
     id="link"
@@ -351,6 +382,8 @@ snapshots["vaadin-side-nav-item shadow null path"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -377,11 +410,16 @@ snapshots["vaadin-side-nav-item shadow null path"] =
 >
   Toggle child items
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow null path */
 
 snapshots["vaadin-side-nav-item shadow i18n"] = 
-`<div part="content">
+`<div
+  id="content"
+  part="content"
+>
   <a
     aria-current="false"
     id="link"
@@ -392,6 +430,8 @@ snapshots["vaadin-side-nav-item shadow i18n"] =
     </slot>
     <slot>
     </slot>
+    <div class="sr-only">
+    </div>
     <slot name="suffix">
     </slot>
   </a>
@@ -418,6 +458,8 @@ snapshots["vaadin-side-nav-item shadow i18n"] =
 >
   Toggle children
 </div>
+<slot name="tooltip">
+</slot>
 `;
 /* end snapshot vaadin-side-nav-item shadow i18n */
 
diff --git a/test/integration/package.json b/test/integration/package.json
@@ -38,6 +38,7 @@
     "@vaadin/popover": "24.9.0-alpha1",
     "@vaadin/radio-group": "24.9.0-alpha1",
     "@vaadin/select": "24.9.0-alpha1",
+    "@vaadin/side-nav": "24.9.0-alpha1",
     "@vaadin/tabs": "24.9.0-alpha1",
     "@vaadin/test-runner-commands": "24.9.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
diff --git a/test/integration/side-nav-item-tooltip.test.js b/test/integration/side-nav-item-tooltip.test.js
@@ -0,0 +1,83 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import './not-animated-styles.js';
+import '@vaadin/side-nav/src/vaadin-side-nav-item.js';
+import { Tooltip } from '@vaadin/tooltip/src/vaadin-tooltip.js';
+import { mouseenter, mouseleave } from '@vaadin/tooltip/test/helpers.js';
+
+describe('side-nav-item with tooltip', () => {
+  let item, tooltip, tooltipOverlay, srOnly;
+
+  before(() => {
+    Tooltip.setDefaultFocusDelay(0);
+    Tooltip.setDefaultHoverDelay(0);
+    Tooltip.setDefaultHideDelay(0);
+  });
+
+  beforeEach(async () => {
+    item = fixtureSync(`
+      <vaadin-side-nav-item path="/parent">
+        Parent
+        <vaadin-tooltip slot="tooltip" text="Tooltip text"></vaadin-tooltip>
+        <vaadin-side-nav-item path="/parent/child" slot="children">Child</vaadin-side-nav-item>
+      </vaadin-side-nav-item>
+    `);
+    await nextRender();
+    tooltip = item.querySelector('vaadin-tooltip');
+    tooltipOverlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
+    srOnly = item.shadowRoot.querySelector('.sr-only');
+  });
+
+  it('should set tooltip target to the item content part', () => {
+    expect(tooltip.target).to.equal(item.$.content);
+  });
+
+  it('should set tooltip ariaTarget to null', () => {
+    expect(tooltip.ariaTarget).to.be.null;
+  });
+
+  it('should set aria-hidden: none on the tooltip', () => {
+    expect(tooltip.getAttribute('aria-hidden')).to.equal('true');
+  });
+
+  it('should toggle tooltip on item content mouseenter', () => {
+    mouseenter(item.$.content);
+    expect(tooltipOverlay.opened).to.be.true;
+
+    mouseleave(item.$.content);
+    expect(tooltipOverlay.opened).to.be.false;
+  });
+
+  it('should not show tooltip on child item mouseenter', async () => {
+    item.click();
+    const child = item.querySelector('vaadin-side-nav-item');
+    mouseenter(child.$.content);
+    await nextRender();
+    expect(tooltipOverlay.opened).to.be.not.ok;
+  });
+
+  it('should use tooltip text for the sr-only element text content', async () => {
+    expect(srOnly.textContent).to.equal(tooltip.text);
+
+    tooltip.text = 'Other text';
+    await nextRender();
+
+    expect(srOnly.textContent).to.equal('Other text');
+  });
+
+  it('should use tooltip generator for the sr-only element text content', async () => {
+    expect(srOnly.textContent).to.equal(tooltip.text);
+
+    tooltip.generator = () => 'Other text';
+    await nextRender();
+
+    expect(srOnly.textContent).to.equal('Other text');
+  });
+
+  it('should clear the sr-only element content when tooltip is removed', async () => {
+    tooltip.remove();
+    await nextRender();
+
+    expect(srOnly.textContent).to.equal('');
+  });
+});
