@vaadin/field-base - npm Package Compare versions

Comparing version 22.0.0-alpha3 to 22.0.0-alpha4

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha3",
+  "version": "22.0.0-alpha4",
   "description": "Vaadin field base mixins",
@@ -35,3 +35,3 @@ "main": "index.js",
   },
-  "gitHead": "efd855b1c0a7c4998f43670a17b0c7fdfe14ff9d"
+  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
 }

src/field-aria-mixin.js

@@ -23,3 +23,3 @@ /**
     static get observers() {
-      return ['_invalidChanged(invalid)'];
+      return ['__ariaChanged(invalid, _helperId)'];
     }
@@ -31,7 +31,7 @@
 
-      this._updateAriaAttribute(this.invalid);
+      this._updateAriaAttribute(this.invalid, this._helperId);
     }
 
     /** @protected */
-    _updateAriaAttribute(invalid) {
+    _updateAriaAttribute(invalid, helperId) {
       const attr = this._ariaAttr;
@@ -42,3 +42,3 @@
         // that should guarantee that it's announced when the group is entered.
-        const ariaIds = attr === 'aria-describedby' ? [this._helperId] : [this._labelId, this._helperId];
+        const ariaIds = attr === 'aria-describedby' ? [helperId] : [this._labelId, helperId];
 
@@ -55,5 +55,5 @@ // Error message ID needs to be dynamically added / removed based on the validity
 
-    /** @protected */
-    _invalidChanged(invalid) {
-      this._updateAriaAttribute(invalid);
+    /** @private */
+    __ariaChanged(invalid, helperId) {
+      this._updateAriaAttribute(invalid, helperId);
     }
@@ -60,0 +60,0 @@ };

src/helper-text-mixin.js

@@ -20,3 +20,6 @@ /**
           observer: '_helperTextChanged'
-        }
+        },
+
+        /** @protected */
+        _helperId: String
       };
@@ -47,2 +50,5 @@ }
       this._helperId = `helper-${this.localName}-${uniqueId}`;
+
+      // Save generated ID to restore later
+      this.__savedHelperId = this._helperId;
     }
@@ -68,5 +74,34 @@
       this.__helperSlot.addEventListener('slotchange', this.__onHelperSlotChange.bind(this));
+      this.__helperIdObserver = new MutationObserver((mutationRecord) => {
+        mutationRecord.forEach((mutation) => {
+          // only handle helper nodes
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'id' &&
+            mutation.target === this._currentHelper &&
+            mutation.target.id !== this.__savedHelperId
+          ) {
+            this.__updateHelperId(mutation.target);
+          }
+        });
+      });
+
+      this.__helperIdObserver.observe(this, { attributes: true, subtree: true });
     }
 
     /** @private */
+    __updateHelperId(customHelper) {
+      let newId;
+
+      if (customHelper.id) {
+        newId = customHelper.id;
+      } else {
+        newId = this.__savedHelperId;
+        customHelper.id = newId;
+      }
+
+      this._helperId = newId;
+    }
+
+    /** @private */
     __onHelperSlotChange() {
@@ -79,3 +114,3 @@ // Check fot slotted element node that is not the one created by this mixin.
       if (customHelper) {
-        customHelper.id = this._helperId;
+        this.__updateHelperId(customHelper);
 
@@ -82,0 +117,0 @@ if (this._currentHelper.isConnected) {

src/tabindex-mixin.d.ts

@@ -13,4 +13,4 @@ /**
  *
- * The attribute is removed whenever the user disables the element
- * and restored with the last known value once the element is enabled again.
+ * The attribute is set to -1 whenever the user disables the element
+ * and restored with the last known value once the element is enabled.
  */
@@ -17,0 +17,0 @@ declare function TabindexMixin<T extends new (...args: any[]) => {}>(base: T): T & TabindexMixinConstructor;

src/tabindex-mixin.js

@@ -75,5 +75,5 @@ /**
  *
- * The attribute is removed whenever the user disables the element
+ * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
  */
 export const TabindexMixin = dedupingMixin(TabindexMixinImplementation);

No alert changes

Improved metrics

Total package byte prevSize

86293

increased by1.19%

Lines of code

2222

increased by1.32%

No dependency changes