@vaadin/vaadin-confirm-dialog - npm Package Compare versions

Comparing version 1.1.0-alpha1 to 1.1.0-beta1

demo/confirm-dialog-basic-demos.js

@@ -158,4 +158,4 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
         <vaadin-confirm-dialog cancel="" header="Unsaved changes">
-          <p>Do you want to <b>save</b> or <b>discard</b> your changes before navigating away?</p>
-          <vaadin-button id="save" slot="confirm-button" theme="primary">
+          <p id="description">Do you want to <b>save</b> or <b>discard</b> your changes before navigating away?</p>
+          <vaadin-button id="save" slot="confirm-button" theme="primary" aria-describedby="description">
             <iron-icon icon="vaadin:envelope-open" slot="prefix"></iron-icon>
@@ -162,0 +162,0 @@ Save

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-confirm-dialog",
-  "version": "1.1.0-alpha1",
+  "version": "1.1.0-beta1",
   "main": "vaadin-confirm-dialog.js",
@@ -33,3 +33,3 @@ "author": "Vaadin Ltd",
     "@vaadin/vaadin-material-styles": "^1.1.0",
-    "@vaadin/vaadin-license-checker": "^2.1.0-alpha2",
+    "@vaadin/vaadin-license-checker": "^2.1.0",
     "@vaadin/vaadin-dialog": "^2.1.0",
@@ -36,0 +36,0 @@ "@vaadin/vaadin-button": "^2.1.0"

src/vaadin-confirm-dialog.js

@@ -16,2 +16,3 @@ /**
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 
@@ -74,3 +75,3 @@ /**
 
-        <div part="message">
+        <div part="message" id="message">
           <slot></slot>
@@ -83,3 +84,3 @@ [[message]]
             <slot name="cancel-button">
-              <vaadin-button id="cancel" theme\$="[[cancelTheme]]" on-click="_cancel" hidden\$="[[!cancel]]">
+              <vaadin-button id="cancel" theme\$="[[cancelTheme]]" on-click="_cancel" hidden\$="[[!cancel]]" aria-describedby="message">
                 [[cancelText]]
@@ -91,3 +92,3 @@ </vaadin-button>
             <slot name="reject-button">
-              <vaadin-button id="reject" theme\$="[[rejectTheme]]" on-click="_reject" hidden\$="[[!reject]]">
+              <vaadin-button id="reject" theme\$="[[rejectTheme]]" on-click="_reject" hidden\$="[[!reject]]" aria-describedby="message">
                 [[rejectText]]
@@ -99,3 +100,3 @@ </vaadin-button>
             <slot name="confirm-button">
-              <vaadin-button id="confirm" theme\$="[[confirmTheme]]" on-click="_confirm">
+              <vaadin-button id="confirm" theme\$="[[confirmTheme]]" on-click="_confirm" aria-describedby="message">
                 [[confirmText]]
@@ -107,3 +108,2 @@ </vaadin-button>
       </template>
-      <slot></slot>
     </vaadin-dialog>
@@ -117,3 +117,3 @@ `;
   static get version() {
-    return '1.1.0-alpha1';
+    return '1.1.0-beta1';
   }
@@ -204,2 +204,5 @@
         value: 'tertiary'
+      },
+      _confirmButton: {
+        type: Element
       }
@@ -218,3 +221,15 @@ };
     }
-    Array.from(this.childNodes).forEach(c => this.$.dialog.$.overlay.$.content.appendChild(c));
+
+    Array.from(this.childNodes).forEach(c => {
+      var newChild = this.$.dialog.$.overlay.$.content.appendChild(c);
+      if (newChild.getAttribute && newChild.getAttribute('slot') == 'confirm-button' && newChild.focus) {
+        this._confirmButton = newChild;
+      }
+    });
+
+    beforeNextRender(this, () => {
+      var confirmButton = this._confirmButton || this.$.dialog.$.overlay.content.querySelector('#confirm');
+      confirmButton.focus();
+      confirmButton.setAttribute('focus-ring', '');
+    });
   }
@@ -221,0 +236,0 @@

theme/lumo/vaadin-confirm-dialog-styles.js

@@ -9,3 +9,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
   <template>
-    <style include="lumo-dialog">
+    <style>
       [part="header"],
@@ -38,7 +38,2 @@ .header {
 
-      vaadin-button {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
       vaadin-button[theme~="tertiary"] {
@@ -75,2 +70,4 @@ padding-left: var(--lumo-space-s);
           width: 100%;
+          margin-top: var(--lumo-space-xs);
+          margin-bottom: var(--lumo-space-xs);
         }
@@ -77,0 +74,0 @@

theme/material/vaadin-confirm-dialog.js

@@ -0,1 +1,7 @@
+import '@vaadin/vaadin-dialog/theme/material/vaadin-dialog-styles.js';
+import '@vaadin/vaadin-dialog/theme/material/vaadin-dialog.js';
+import '@vaadin/vaadin-dialog/src/vaadin-dialog.js';
+import '@vaadin/vaadin-button/theme/material/vaadin-button.js';
+import 'vaadin-overlay/theme/material/vaadin-overlay.js';
+import './vaadin-confirm-dialog-styles.js';
 import '../../src/vaadin-confirm-dialog.js';

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53726

5.08%

Number of package files

24

4.35%

Lines of code

635

12.19%

Dependency changes

• Updated

  @vaadin/vaadin-license-checker@^2.1.0