@vaadin/tooltip 25.2.0-beta1 → 25.2.0-rc1

package/custom-elements.json

@@ -26,6 +26,16 @@
           "description": "A mixin providing common tooltip functionality.",
           "name": "TooltipMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaLinkMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "attribute": "aria-link-mode"
+            },
             {
               "kind": "field",
               "name": "ariaTarget",
@@ -33,7 +43,7 @@
               "type": {
                 "text": "object"
               },
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "attribute": "aria-target"
             },
             {
@@ -230,6 +240,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "fieldName": "ariaLinkMode"
+            },
             {
               "name": "focus-delay",
               "type": {
@@ -348,6 +366,20 @@
           "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-tooltip-background`    |\n| `--vaadin-tooltip-border-color`  |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width`  |\n| `--vaadin-tooltip-font-size`     |\n| `--vaadin-tooltip-font-weight`   |\n| `--vaadin-tooltip-line-height`   |\n| `--vaadin-tooltip-max-width`     |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end`    |\n| `--vaadin-tooltip-offset-start`  |\n| `--vaadin-tooltip-offset-top`    |\n| `--vaadin-tooltip-padding`       |\n| `--vaadin-tooltip-shadow`        |\n| `--vaadin-tooltip-text-color`    |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Tooltip",
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaLinkMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "attribute": "aria-link-mode",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/vaadin-tooltip-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "ariaTarget",
@@ -355,7 +387,7 @@
               "type": {
                 "text": "object"
               },
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "attribute": "aria-target",
               "inheritedFrom": {
                 "name": "TooltipMixin",
@@ -637,6 +669,18 @@
           "tagName": "vaadin-tooltip",
           "customElement": true,
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "fieldName": "ariaLinkMode",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/vaadin-tooltip-mixin.js"
+              }
+            },
             {
               "name": "focus-delay",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,26 +35,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-beta1",
-    "@vaadin/component-base": "25.2.0-beta1",
-    "@vaadin/markdown": "25.2.0-beta1",
-    "@vaadin/overlay": "25.2.0-beta1",
-    "@vaadin/popover": "25.2.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
+    "@vaadin/a11y-base": "25.2.0-rc1",
+    "@vaadin/component-base": "25.2.0-rc1",
+    "@vaadin/markdown": "25.2.0-rc1",
+    "@vaadin/overlay": "25.2.0-rc1",
+    "@vaadin/popover": "25.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-beta1",
-    "@vaadin/chai-plugins": "25.2.0-beta1",
-    "@vaadin/test-runner-commands": "25.2.0-beta1",
+    "@vaadin/aura": "25.2.0-rc1",
+    "@vaadin/chai-plugins": "25.2.0-rc1",
+    "@vaadin/test-runner-commands": "25.2.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
-    "sinon": "^21.0.2"
+    "@vaadin/vaadin-lumo-styles": "25.2.0-rc1",
+    "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
+  "gitHead": "7c581b396dbb889f75c8073d6b4d25537a65b873"
 }

package/src/vaadin-tooltip-mixin.d.ts

@@ -18,12 +18,26 @@ export declare function TooltipMixin<T extends Constructor<HTMLElement>>(
 
 export declare class TooltipMixinClass {
   /**
-   * Element used to link with the `aria-describedby`
-   * attribute. Supports array of multiple elements.
+   * Element used to link with the ARIA attribute controlled by the
+   * `ariaLinkMode` property. Supports array of multiple elements.
    * When not set, defaults to `target`.
    */
   ariaTarget: HTMLElement | HTMLElement[] | null | undefined;
 
+  /**
+   * Controls which ARIA attribute is used to link the target element(s)
+   * with the tooltip content. Supported values:
+   *
+   * - `aria-describedby` - links the tooltip as a description.
+   * - `aria-labelledby` - links the tooltip as an accessible name.
+   * - `none` - does not add any ARIA linking attribute.
+   *
+   * Defaults to `aria-describedby`.
+   *
+   * @attr {string} aria-link-mode
+   */
+  ariaLinkMode: 'aria-describedby' | 'aria-labelledby' | 'none';
+
   /**
    * Object with properties passed to `generator` and
    * `shouldShow` functions for generating tooltip text

package/src/vaadin-tooltip-mixin.js

@@ -222,14 +222,31 @@ export const TooltipMixin = (superClass) =>
     static get properties() {
       return {
         /**
-         * Element used to link with the `aria-describedby`
-         * attribute. Supports array of multiple elements.
+         * Element used to link with the ARIA attribute controlled by the
+         * `ariaLinkMode` property. Supports array of multiple elements.
          * When not set, defaults to `target`.
          */
         ariaTarget: {
           type: Object,
         },
 
+        /**
+         * Controls which ARIA attribute is used to link the target element(s)
+         * with the tooltip content. Supported values:
+         *
+         * - `aria-describedby` - links the tooltip as a description.
+         * - `aria-labelledby` - links the tooltip as an accessible name.
+         * - `none` - does not add any ARIA linking attribute.
+         *
+         * Defaults to `aria-describedby`.
+         *
+         * @attr {string} aria-link-mode
+         */
+        ariaLinkMode: {
+          type: String,
+          value: 'aria-describedby',
+        },
+
         /**
          * Object with properties passed to `generator` and
          * `shouldShow` functions for generating tooltip text
@@ -346,7 +363,6 @@ export const TooltipMixin = (superClass) =>
         _effectiveAriaTarget: {
           type: Object,
           computed: '__computeAriaTarget(ariaTarget, target)',
-          observer: '__effectiveAriaTargetChanged',
         },
 
         /** @private */
@@ -460,6 +476,16 @@ export const TooltipMixin = (superClass) =>
       if (props.has('text') || props.has('generator') || props.has('context') || props.has('markdown')) {
         this.__updateContent();
       }
+
+      const ariaTargetChanged = props.has('_effectiveAriaTarget');
+      const ariaLinkChanged = props.has('ariaLinkMode');
+
+      if (ariaTargetChanged || ariaLinkChanged) {
+        const oldTarget = ariaTargetChanged ? props.get('_effectiveAriaTarget') : this._effectiveAriaTarget;
+        const oldMode = ariaLinkChanged ? props.get('ariaLinkMode') : this.ariaLinkMode;
+
+        this.__updateAriaAttributes(oldTarget, oldMode);
+      }
     }
 
     /** @private */
@@ -728,16 +754,20 @@ export const TooltipMixin = (superClass) =>
     }
 
     /** @private */
-    __effectiveAriaTargetChanged(ariaTarget, oldAriaTarget) {
-      if (oldAriaTarget) {
-        [oldAriaTarget].flat().forEach((target) => {
-          removeValueFromAttribute(target, 'aria-describedby', this._uniqueId);
+    __updateAriaAttributes(oldTarget, oldMode) {
+      // Remove the previously applied attribute from the previous target(s).
+      if (oldTarget && oldMode && oldMode !== 'none') {
+        [oldTarget].flat().forEach((target) => {
+          removeValueFromAttribute(target, oldMode, this._uniqueId);
         });
       }
 
-      if (ariaTarget) {
-        [ariaTarget].flat().forEach((target) => {
-          addValueToAttribute(target, 'aria-describedby', this._uniqueId);
+      // Apply the current attribute to the current target(s).
+      const target = this._effectiveAriaTarget;
+      const mode = this.ariaLinkMode;
+      if (target && mode && mode !== 'none') {
+        [target].flat().forEach((el) => {
+          addValueToAttribute(el, mode, this._uniqueId);
         });
       }
     }

package/src/vaadin-tooltip-overlay.js

@@ -31,6 +31,10 @@ class TooltipOverlay extends PopoverOverlayMixin(
     return [overlayStyles, tooltipOverlayStyles];
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,6 +10,15 @@
           "name": "vaadin-tooltip",
           "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-tooltip-background`    |\n| `--vaadin-tooltip-border-color`  |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width`  |\n| `--vaadin-tooltip-font-size`     |\n| `--vaadin-tooltip-font-weight`   |\n| `--vaadin-tooltip-line-height`   |\n| `--vaadin-tooltip-max-width`     |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end`    |\n| `--vaadin-tooltip-offset-start`  |\n| `--vaadin-tooltip-offset-top`    |\n| `--vaadin-tooltip-padding`       |\n| `--vaadin-tooltip-shadow`        |\n| `--vaadin-tooltip-text-color`    |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "focus-delay",
               "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
@@ -105,9 +114,18 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "ariaLinkMode",
+                "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "ariaTarget",
-                "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+                "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
                 "value": {
                   "type": [
                     "object"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,9 +19,16 @@
           "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-tooltip-background`    |\n| `--vaadin-tooltip-border-color`  |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width`  |\n| `--vaadin-tooltip-font-size`     |\n| `--vaadin-tooltip-font-weight`   |\n| `--vaadin-tooltip-line-height`   |\n| `--vaadin-tooltip-max-width`     |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end`    |\n| `--vaadin-tooltip-offset-start`  |\n| `--vaadin-tooltip-offset-top`    |\n| `--vaadin-tooltip-padding`       |\n| `--vaadin-tooltip-shadow`        |\n| `--vaadin-tooltip-text-color`    |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".ariaLinkMode",
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".ariaTarget",
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "value": {
                 "kind": "expression"
               }