@vaadin/virtual-list - npm Package Compare versions

Comparing version 24.7.0-alpha1 to 24.7.0-alpha2

package.json

 {
   "name": "@vaadin/virtual-list",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha2",
   "publishConfig": {
@@ -42,11 +42,11 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha1",
-    "@vaadin/lit-renderer": "24.7.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
+    "@vaadin/component-base": "24.7.0-alpha2",
+    "@vaadin/lit-renderer": "24.7.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha1",
+    "@vaadin/chai-plugins": "24.7.0-alpha2",
     "@vaadin/testing-helpers": "^1.0.0",
@@ -59,3 +59,3 @@ "sinon": "^18.0.0"
   ],
-  "gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
+  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
 }

src/vaadin-virtual-list-mixin.d.ts

@@ -57,2 +57,11 @@ /**
   /**
+   * A function that generates accessible names for virtual list items.
+   * The function gets the item as an argument and the
+   * return value should be a string representing that item. The
+   * result gets applied to the corresponding virtual list child element
+   * as an `aria-label` attribute.
+   */
+  itemAccessibleNameGenerator?: (item: TItem) => string;
+
+  /**
    * Scroll to a specific index in the virtual list.
@@ -59,0 +68,0 @@ */

src/vaadin-virtual-list-mixin.js

@@ -39,2 +39,14 @@ /**
 
+        /**
+         * A function that generates accessible names for virtual list items.
+         * The function gets the item as an argument and the
+         * return value should be a string representing that item. The
+         * result gets applied to the corresponding virtual list child element
+         * as an `aria-label` attribute.
+         */
+        itemAccessibleNameGenerator: {
+          type: Function,
+          sync: true,
+        },
+
         /** @private */
@@ -46,3 +58,3 @@ __virtualizer: Object,
     static get observers() {
-      return ['__itemsOrRendererChanged(items, renderer, __virtualizer)'];
+      return ['__itemsOrRendererChanged(items, renderer, __virtualizer, itemAccessibleNameGenerator)'];
     }
@@ -70,3 +82,3 @@
       super();
-      this.__onDragStart = this.__onDragStart.bind(this);
+      this.__onDocumentDragStart = this.__onDocumentDragStart.bind(this);
     }
@@ -90,2 +102,3 @@
       processTemplates(this);
+      this.__updateAria();
     }
@@ -96,7 +109,3 @@
       super.connectedCallback();
-      // Chromium based browsers cannot properly generate drag images for elements
-      // that have children with massive heights. This workaround prevents crashes
-      // and performance issues by excluding the items from the drag image.
-      // https://github.com/vaadin/web-components/issues/7985
-      document.addEventListener('dragstart', this.__onDragStart, { capture: true });
+      document.addEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
     }
@@ -107,3 +116,3 @@
       super.disconnectedCallback();
-      document.removeEventListener('dragstart', this.__onDragStart, { capture: true });
+      document.removeEventListener('dragstart', this.__onDocumentDragStart, { capture: true });
     }
@@ -126,3 +135,14 @@
     /** @private */
+    __updateAria() {
+      this.role = 'list';
+    }
+
+    /** @private */
     __updateElement(el, index) {
+      const item = this.items[index];
+      el.ariaSetSize = String(this.items.length);
+      el.ariaPosInSet = String(index + 1);
+      el.ariaLabel = this.itemAccessibleNameGenerator ? this.itemAccessibleNameGenerator(item) : null;
+      this.__updateElementRole(el);
+
       if (el.__renderer !== this.renderer) {
@@ -134,6 +154,11 @@ el.__renderer = this.renderer;
       if (this.renderer) {
-        this.renderer(el, this, { item: this.items[index], index });
+        this.renderer(el, this, { item, index });
       }
     }
 
+    /** @private */
+    __updateElementRole(el) {
+      el.role = 'listitem';
+    }
+
     /**
@@ -164,21 +189,20 @@ * Clears the content of a render target.
 
-    /** @private */
-    __onDragStart(e) {
-      // The dragged element can be the element itself or a parent of the element
-      if (!e.target.contains(this)) {
-        return;
-      }
-      // The threshold value 20000 provides a buffer to both
-      //   - avoid the crash and the performance issues
-      //   - unnecessarily avoid excluding items from the drag image
-      if (this.$.items.offsetHeight > 20000) {
-        const initialItemsMaxHeight = this.$.items.style.maxHeight;
-        const initialVirtualListOverflow = this.style.overflow;
-        // Momentarily hides the items until the browser starts generating the
-        // drag image.
-        this.$.items.style.maxHeight = '0';
-        this.style.overflow = 'hidden';
+    /**
+     * Webkit-based browsers have issues with generating drag images
+     * for elements that have children with massive heights. Chromium
+     * browsers crash, while Safari experiences significant performance
+     * issues. To mitigate these issues, we hide the items container
+     * when drag starts to remove it from the drag image.
+     *
+     * Related issues:
+     * - https://github.com/vaadin/web-components/issues/7985
+     * - https://issues.chromium.org/issues/383356871
+     *
+     * @private
+     */
+    __onDocumentDragStart(e) {
+      if (e.target.contains(this) && this.scrollHeight > 20000) {
+        this.$.items.style.display = 'none';
         requestAnimationFrame(() => {
-          this.$.items.style.maxHeight = initialItemsMaxHeight;
-          this.style.overflow = initialVirtualListOverflow;
+          this.$.items.style.display = '';
         });
@@ -185,0 +209,0 @@ }

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha2",
   "description-markup": "markdown",
@@ -46,2 +46,13 @@ "contributions": {
                 }
+              },
+              {
+                "name": "itemAccessibleNameGenerator",
+                "description": "A function that generates accessible names for virtual list items.\nThe function gets the item as an argument and the\nreturn value should be a string representing that item. The\nresult gets applied to the corresponding virtual list child element\nas an `aria-label` attribute.",
+                "value": {
+                  "type": [
+                    "Function",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
@@ -48,0 +59,0 @@ ],

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/virtual-list",
-  "version": "24.7.0-alpha1",
+  "version": "24.7.0-alpha2",
   "description-markup": "markdown",
@@ -35,2 +35,9 @@ "framework": "lit",
               }
+            },
+            {
+              "name": ".itemAccessibleNameGenerator",
+              "description": "A function that generates accessible names for virtual list items.\nThe function gets the item as an argument and the\nreturn value should be a string representing that item. The\nresult gets applied to the corresponding virtual list child element\nas an `aria-label` attribute.",
+              "value": {
+                "kind": "expression"
+              }
             }
@@ -37,0 +44,0 @@ ]

No alert changes

Improved metrics

Total package byte prevSize

40405

increased by4.99%

Lines of code

681

increased by7.24%

Dependency changes

• + Added@vaadin/component-base@24.7.0-alpha2(transitive)

• + Added@vaadin/icon@24.7.0-alpha2(transitive)

• + Added@vaadin/lit-renderer@24.7.0-alpha2(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.7.0-alpha2(transitive)

• + Added@vaadin/vaadin-material-styles@24.7.0-alpha2(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-alpha2(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha1(transitive)

• - Removed@vaadin/icon@24.7.0-alpha1(transitive)

• - Removed@vaadin/lit-renderer@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.7.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha1(transitive)

• Updated@vaadin/component-base@24.7.0-alpha2

• Updated@vaadin/lit-renderer@24.7.0-alpha2

• Updated@vaadin/vaadin-lumo-styles@24.7.0-alpha2

• Updated@vaadin/vaadin-material-styles@24.7.0-alpha2

• Updated@vaadin/vaadin-themable-mixin@24.7.0-alpha2