element-internals-polyfill - npm Package Compare versions

Comparing version 1.3.12 to 1.3.13

dist/index.js

@@ -76,3 +76,3 @@ (function (exports) {
                     if (ref.isConnected) {
-                        ref.setAttribute(attributeName, value);
+                        setAttribute(ref, attributeName, value);
                     }
@@ -146,3 +146,3 @@ else {
                         .forEach(key => {
-                        node.setAttribute(aom[key], internals[key]);
+                        setAttribute(node, aom[key], internals[key]);
                     });
@@ -153,5 +153,5 @@ upgradeMap.delete(node);
                     const internals = validityUpgradeMap.get(node);
-                    node.setAttribute('internals-valid', internals.validity.valid.toString());
-                    node.setAttribute('internals-invalid', (!internals.validity.valid).toString());
-                    node.setAttribute('aria-invalid', (!internals.validity.valid).toString());
+                    setAttribute(node, 'internals-valid', internals.validity.valid.toString());
+                    setAttribute(node, 'internals-invalid', (!internals.validity.valid).toString());
+                    setAttribute(node, 'aria-invalid', (!internals.validity.valid).toString());
                     validityUpgradeMap.delete(node);
@@ -218,6 +218,12 @@ }
 
+    const setAttribute = (ref, name, value) => {
+        if (ref.getAttribute(name) === value) {
+            return;
+        }
+        ref.setAttribute(name, value);
+    };
     const setDisabled = (ref, disabled) => {
         ref.toggleAttribute('internals-disabled', disabled);
         if (disabled) {
-            ref.setAttribute('aria-disabled', 'true');
+            setAttribute(ref, 'aria-disabled', 'true');
         }
@@ -259,3 +265,3 @@ else {
             }
-            ref.setAttribute('aria-labelledby', firstLabelId);
+            setAttribute(ref, 'aria-labelledby', firstLabelId);
         }
@@ -681,3 +687,3 @@ };
                 ref.toggleAttribute('internals-valid', valid);
-                ref.setAttribute('aria-invalid', `${!valid}`);
+                setAttribute(ref, 'aria-invalid', `${!valid}`);
             }
@@ -684,0 +690,0 @@ else {

dist/utils.d.ts

 import { ICustomElement, IElementInternals, LabelsList } from './types.js';
 /**
+ * Set attribute if its value differs from existing one.
+ *
+ * In comparison to other attribute modification methods (removeAttribute and
+ * toggleAttribute), setAttribute always triggers attributeChangedCallback
+ * even if the actual value has not changed.
+ *
+ * This polyfill relies heavily on attributes to pass aria information to
+ * screen readers. This behaviour differs from native implementation which does
+ * not change attributes.
+ *
+ * To limit this difference we only set attribute value when it is different
+ * from the current state.
+ *
+ * @param {ICustomElement | Element} ref - The custom element instance
+ * @param {string} name - The attribute name
+ * @param {string} value - The attribute value
+ * @returns
+ */
+export declare const setAttribute: (ref: ICustomElement | Element, name: string, value: string) => void;
+/**
  * Toggle's the disabled state (attributes & callback) on the given element
@@ -4,0 +24,0 @@ * @param {ICustomElement} ref - The custom element instance

package.json

 {
   "name": "element-internals-polyfill",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "A polyfill for the element internals specification.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68127

increased by1.52%

Lines of code

1289

increased by2.06%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes