@vaadin/tooltip - npm Package Compare versions

Comparing version 24.2.0-dev.f254716fe to 24.3.0-alpha1

package.json

 {
   "name": "@vaadin/tooltip",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
@@ -38,12 +38,12 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/overlay": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "24.3.0-alpha1",
+    "@vaadin/component-base": "24.3.0-alpha1",
+    "@vaadin/overlay": "24.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
@@ -55,3 +55,3 @@ },
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

src/vaadin-tooltip-overlay.js

@@ -7,2 +7,3 @@ /**
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
@@ -57,2 +58,3 @@ import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
  *
+ * @customElement
  * @extends HTMLElement
@@ -160,2 +162,2 @@ * @mixes DirMixin
 
-customElements.define(TooltipOverlay.is, TooltipOverlay);
+defineCustomElement(TooltipOverlay);

src/vaadin-tooltip.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -63,3 +64,3 @@ import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
  */
-declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
+declare class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ControllerMixin(ElementMixin(HTMLElement)))) {
   /**
@@ -84,2 +85,9 @@ * Sets the default focus delay to be used by all tooltip instances,
   /**
+   * Element used to link with the `aria-describedby`
+   * attribute. Supports array of multiple elements.
+   * When not set, defaults to `target`.
+   */
+  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+
+  /**
    * Object with properties passed to `generator` and
@@ -86,0 +94,0 @@ * `shouldShow` functions for generating tooltip text

src/vaadin-tooltip.js

@@ -10,6 +10,9 @@ /**
 import { microTask } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
@@ -74,2 +77,10 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
   /**
+   * Whether closing is currently in progress.
+   * @return {boolean}
+   */
+  get isClosing() {
+    return closing.has(this.host);
+  }
+
+  /**
    * Schedule opening the tooltip.
@@ -249,3 +260,5 @@ * @param {Object} options
  *
+ * @customElement
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ElementMixin
@@ -255,3 +268,3 @@ * @mixes OverlayClassMixin
  */
-class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))) {
+class Tooltip extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(ControllerMixin(PolymerElement)))) {
   static get is() {
@@ -269,4 +282,2 @@ return 'vaadin-tooltip';
       <vaadin-tooltip-overlay
-        id="[[_uniqueId]]"
-        role="tooltip"
         renderer="[[_renderer]]"
@@ -281,5 +292,8 @@ theme$="[[_theme]]"
         vertical-align="[[__computeVerticalAlign(__effectivePosition)]]"
+        on-mouseenter="__onOverlayMouseEnter"
         on-mouseleave="__onOverlayMouseLeave"
         modeless
       ></vaadin-tooltip-overlay>
+
+      <slot name="sr-label"></slot>
     `;
@@ -291,2 +305,11 @@ }
       /**
+       * Element used to link with the `aria-describedby`
+       * attribute. Supports array of multiple elements.
+       * When not set, defaults to `target`.
+       */
+      ariaTarget: {
+        type: Object,
+      },
+
+      /**
        * Object with properties passed to `generator` and
@@ -430,2 +453,13 @@ * `shouldShow` functions for generating tooltip text
 
+      /**
+       * Element used to link with the `aria-describedby`
+       * attribute. When not set, defaults to `target`.
+       * @protected
+       */
+      _effectiveAriaTarget: {
+        type: Object,
+        computed: '__computeAriaTarget(ariaTarget, target)',
+        observer: '__effectiveAriaTargetChanged',
+      },
+
       /** @private */
@@ -447,2 +481,12 @@ __effectivePosition: {
       },
+
+      /** @private */
+      _srLabel: {
+        type: Object,
+      },
+
+      /** @private */
+      _overlayContent: {
+        type: String,
+      },
     };
@@ -452,3 +496,6 @@ }
   static get observers() {
-    return ['__generatorChanged(_overlayElement, generator, context)'];
+    return [
+      '__generatorChanged(_overlayElement, generator, context)',
+      '__updateSrLabelText(_srLabel, _overlayContent)',
+    ];
   }
@@ -531,3 +578,24 @@
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._srLabelController = new SlotController(this, 'sr-label', 'div', {
+      initializer: (element) => {
+        element.id = this._uniqueId;
+        element.setAttribute('role', 'tooltip');
+        this._srLabel = element;
+      },
+    });
+    this.addController(this._srLabelController);
+  }
+
   /** @private */
+  __computeAriaTarget(ariaTarget, target) {
+    const isElementNode = (el) => el && el.nodeType === Node.ELEMENT_NODE;
+    const isAriaTargetSet = Array.isArray(ariaTarget) ? ariaTarget.some(isElementNode) : ariaTarget;
+    return isAriaTargetSet ? ariaTarget : target;
+  }
+
+  /** @private */
   __computeHorizontalAlign(position) {
@@ -565,5 +633,23 @@ return ['top-end', 'bottom-end', 'start-top', 'start', 'start-bottom'].includes(position) ? 'end' : 'start';
     root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+
+    // Update the sr-only label text content
+    this._overlayContent = root.textContent;
   }
 
   /** @private */
+  __effectiveAriaTargetChanged(ariaTarget, oldAriaTarget) {
+    if (oldAriaTarget) {
+      [oldAriaTarget].flat().forEach((target) => {
+        removeValueFromAttribute(target, 'aria-describedby', this._uniqueId);
+      });
+    }
+
+    if (ariaTarget) {
+      [ariaTarget].flat().forEach((target) => {
+        addValueToAttribute(target, 'aria-describedby', this._uniqueId);
+      });
+    }
+  }
+
+  /** @private */
   __autoOpenedChanged(opened, oldOpened) {
@@ -611,4 +697,2 @@ if (opened) {
       this.__targetVisibilityObserver.unobserve(oldTarget);
-
-      removeValueFromAttribute(oldTarget, 'aria-describedby', this._uniqueId);
     }
@@ -627,4 +711,2 @@
       });
-
-      addValueToAttribute(target, 'aria-describedby', this._uniqueId);
     }
@@ -721,2 +803,13 @@ }
   /** @private */
+  __onOverlayMouseEnter() {
+    // Retain opened state when moving pointer over the overlay.
+    // Closing can start due to an offset between the target and
+    // the overlay itself. If that's the case, re-open overlay.
+    // See https://github.com/vaadin/web-components/issues/6316
+    if (this._stateController.isClosing) {
+      this._stateController.open({ immediate: true });
+    }
+  }
+
+  /** @private */
   __onOverlayMouseLeave(event) {
@@ -797,6 +890,13 @@ if (event.relatedTarget !== this.target) {
   }
+
+  /** @private */
+  __updateSrLabelText(srLabel, textContent) {
+    if (srLabel) {
+      srLabel.textContent = textContent;
+    }
+  }
 }
 
-customElements.define(Tooltip.is, Tooltip);
+defineCustomElement(Tooltip);
 
 export { Tooltip };

No alert changes

Improved metrics

Total package byte prevSize

69668

47.02%

Number of package files

14

16.67%

Lines of code

1530

51.79%

Dependency changes

• + Added

  @vaadin/a11y-base@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/component-base@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/icon@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/overlay@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/vaadin-material-styles@24.3.0-alpha1
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@24.3.0-alpha1
  (transitive)

• - Removed

  @vaadin/a11y-base@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/component-base@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/icon@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/overlay@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/vaadin-material-styles@24.2.0-dev.f254716fe
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@24.2.0-dev.f254716fe
  (transitive)

• Updated

  @vaadin/a11y-base@24.3.0-alpha1

• Updated

  @vaadin/component-base@24.3.0-alpha1

• Updated

  @vaadin/overlay@24.3.0-alpha1

• Updated

  @vaadin/vaadin-lumo-styles@24.3.0-alpha1

• Updated

  @vaadin/vaadin-material-styles@24.3.0-alpha1

• Updated

  @vaadin/vaadin-themable-mixin@24.3.0-alpha1