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

Co-authored-by: Serhii Kulykov <[email protected]>

Author: HerbertsVaadin

dev/side-nav.html

@@ -10,6 +10,7 @@
       import '@vaadin/icon';
       import '@vaadin/icons';
       import '@vaadin/side-nav';
+      import '@vaadin/tooltip';
       import '@vaadin/radio-group';
 
       const icons = [
@@ -121,8 +122,12 @@
 
         <vaadin-side-nav-item slot="children" expanded>
           Layouts
+          <vaadin-tooltip text="Different types of layouts" slot="tooltip"></vaadin-tooltip>
 
-          <vaadin-side-nav-item path="/dev/app-layout.html" slot="children"> App Layout </vaadin-side-nav-item>
+          <vaadin-side-nav-item path="/dev/app-layout.html" slot="children">
+            App Layout
+            <vaadin-tooltip text="The application layout" slot="tooltip"></vaadin-tooltip>
+          </vaadin-side-nav-item>
           <vaadin-side-nav-item path="/dev/form-layout.html" slot="children"> Form Layout </vaadin-side-nav-item>
           <vaadin-side-nav-item path="/dev/master-detail-layout.html" slot="children">
             Master-Detail Layout

packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js

@@ -5,6 +5,7 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
 import { sharedStyles } from './vaadin-side-nav-shared-base-styles.js';
 
 const sideNavItem = css`
@@ -119,4 +120,4 @@ const sideNavItem = css`
   }
 `;
 
-export const sideNavItemStyles = [sharedStyles, sideNavItem];
+export const sideNavItemStyles = [sharedStyles, screenReaderOnly, sideNavItem];

packages/side-nav/src/vaadin-side-nav-item.js

@@ -9,6 +9,7 @@ import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -174,6 +175,11 @@ class SideNavItem extends SideNavChildrenMixin(
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      __tooltipText: {
+        type: String,
+      },
     };
   }
 
@@ -246,7 +252,7 @@ class SideNavItem extends SideNavChildrenMixin(
   /** @protected */
   render() {
     return html`
-      <div part="content" @click="${this._onContentClick}">
+      <div id="content" part="content" @click="${this._onContentClick}">
         <a
           id="link"
           ?disabled="${this.disabled}"
@@ -259,6 +265,7 @@ class SideNavItem extends SideNavChildrenMixin(
         >
           <slot name="prefix"></slot>
           <slot></slot>
+          <div class="sr-only">${this.__tooltipText}</div>
           <slot name="suffix"></slot>
         </a>
         <button
@@ -274,9 +281,29 @@ class SideNavItem extends SideNavChildrenMixin(
         <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) {
+        this.__tooltipText = node.textContent.trim();
+        node.setAttribute('aria-hidden', 'true');
+      } else {
+        this.__tooltipText = '';
+      }
+    });
+    this.addController(this._tooltipController);
+  }
+
   /** @private */
   _onButtonClick(event) {
     // Prevent the event from being handled

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 */
 

packages/vaadin-lumo-styles/src/components/side-nav-item.css

@@ -167,4 +167,17 @@
     color: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     border-radius: var(--lumo-border-radius-m);
   }
+
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
 }

test/integration/package.json

@@ -37,6 +37,7 @@
     "@vaadin/popover": "25.0.0-alpha16",
     "@vaadin/radio-group": "25.0.0-alpha16",
     "@vaadin/select": "25.0.0-alpha16",
+    "@vaadin/side-nav": "25.0.0-alpha16",
     "@vaadin/tabs": "25.0.0-alpha16",
     "@vaadin/test-runner-commands": "25.0.0-alpha16",
     "@vaadin/testing-helpers": "^2.0.0",

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('');
+  });
+});