@vaadin-component-factory/vcf-popup - npm Package Compare versions

Comparing version 24.0.2 to 24.0.3

package.json

 {
   "name": "@vaadin-component-factory/vcf-popup",
-  "version": "24.0.2",
+  "version": "24.0.3",
   "description": "Vaadin Component Factory Popup for Polymer 3",
@@ -5,0 +5,0 @@ "main": "theme/lumo/vcf-popup.js",

src/vcf-popup-overlay.js

@@ -226,2 +226,4 @@ /*
 
+    this.setAttribute('role', 'dialog');
+
     // Update overflow attribute on resize
@@ -228,0 +230,0 @@ this.__resizeObserver = new ResizeObserver(() => {

src/vcf-popup.js

@@ -58,3 +58,3 @@ /*
   static get version() {
-    return '24.0.2';
+    return '24.0.3';
   }
@@ -124,2 +124,12 @@
       /**
+       * Set the `aria-label` attribute for assistive technologies like
+       * screen readers. An empty string value for this property (the
+       * default) means that the `aria-label` attribute is not present.
+       */
+      ariaLabel: {
+        type: String,
+        value: ''
+      },
+
+      /**
        * String used for rendering a popup title.
@@ -227,3 +237,7 @@ *
   static get observers() {
-    return ['_rendererChanged(headerRenderer, footerRenderer)', '_backdropDisplayChanged(_phone, highlightTarget)'];
+    return [
+      '_rendererChanged(headerRenderer, footerRenderer)',
+      '_ariaLabelChanged(ariaLabel, headerTitle)',
+      '_backdropDisplayChanged(_phone, highlightTarget)'
+    ];
   }
@@ -323,2 +337,11 @@
 
+  /** @private */
+  _ariaLabelChanged(ariaLabel, headerTitle) {
+    if (ariaLabel || headerTitle) {
+      this.$.popupOverlay.setAttribute('aria-label', ariaLabel || headerTitle);
+    } else {
+      this.$.popupOverlay.removeAttribute('aria-label');
+    }
+  }
+
   __setPopupOpenedAttributeOnTarget() {
@@ -325,0 +348,0 @@ if (this.target) {

No alert changes

Improved metrics

Total package byte prevSize

55009

increased by1.24%

Lines of code

1078

increased by2.08%

No dependency changes