@vaadin/upload 22.0.0-beta2 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "22.0.0-beta2",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "22.0.0-beta2",
-    "@vaadin/component-base": "22.0.0-beta2",
-    "@vaadin/progress-bar": "22.0.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta2"
+    "@vaadin/button": "^22.0.2",
+    "@vaadin/component-base": "^22.0.2",
+    "@vaadin/progress-bar": "^22.0.2",
+    "@vaadin/vaadin-lumo-styles": "^22.0.2",
+    "@vaadin/vaadin-material-styles": "^22.0.2",
+    "@vaadin/vaadin-themable-mixin": "^22.0.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/form-layout": "22.0.0-beta2",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/form-layout": "^22.0.2",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

package/src/vaadin-upload-file.js

@@ -68,10 +68,10 @@ class UploadFile extends ThemableMixin(PolymerElement) {
         }
       </style>
 
-      <li part="row" tabindex="0">
+      <div part="row">
         <div part="info">
-          <div part="done-icon" hidden$="[[!file.complete]]"></div>
-          <div part="warning-icon" hidden$="[[!file.error]]"></div>
+          <div part="done-icon" hidden$="[[!file.complete]]" aria-hidden="true"></div>
+          <div part="warning-icon" hidden$="[[!file.error]]" aria-hidden="true"></div>
 
           <div part="meta">
             <div part="name" id="name">[[file.name]]</div>
@@ -107,7 +107,7 @@ class UploadFile extends ThemableMixin(PolymerElement) {
             aria-describedby="name"
           ></button>
         </div>
-      </li>
+      </div>
 
       <vaadin-progress-bar
         part="progress"

package/src/vaadin-upload.js

@@ -9,6 +9,7 @@ import './vaadin-upload-icons.js';
 import './vaadin-upload-file.js';
 import { resetMouseCanceller } from '@polymer/polymer/lib/utils/gestures.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -82,6 +83,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         [part='file-list'] {
           padding: 0;
           margin: 0;
+          list-style-type: none;
         }
       </style>
 
@@ -93,7 +95,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
             </vaadin-button>
           </slot>
         </div>
-        <div part="drop-label" hidden$="[[nodrop]]" id="dropLabelContainer">
+        <div part="drop-label" hidden$="[[nodrop]]" id="dropLabelContainer" aria-hidden="true">
           <slot name="drop-label-icon">
             <div part="drop-label-icon"></div>
           </slot>
@@ -103,7 +105,9 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       <slot name="file-list">
         <ul id="fileList" part="file-list">
           <template is="dom-repeat" items="[[files]]" as="file">
-            <vaadin-upload-file file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
+            <li>
+              <vaadin-upload-file tabindex="0" file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
+            </li>
           </template>
         </ul>
       </slot>
@@ -139,13 +143,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       nodrop: {
         type: Boolean,
         reflectToAttribute: true,
-        value: function () {
-          try {
-            return !!document.createEvent('TouchEvent');
-          } catch (e) {
-            return false;
-          }
-        }
+        value: isTouch
       },
 
       /**
@@ -825,7 +823,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     // cancelling the following synthetic click. See also:
     // https://github.com/Polymer/polymer/issues/5289
     this.__resetMouseCanceller();
-    this._onAddFilesClick();
+    this._onAddFilesClick(e);
   }
 
   /** @private */
@@ -834,11 +832,12 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   /** @private */
-  _onAddFilesClick() {
+  _onAddFilesClick(e) {
     if (this.maxFilesReached) {
       return;
     }
 
+    e.stopPropagation();
     this.$.fileInput.value = '';
     this.$.fileInput.click();
   }

package/theme/lumo/vaadin-upload-styles.js

@@ -62,6 +62,10 @@ registerStyles(
       line-height: 1;
       vertical-align: -0.25em;
     }
+
+    [part='file-list'] > *:not(:first-child) > * {
+      border-top: 1px solid var(--lumo-contrast-10pct);
+    }
   `,
   { moduleId: 'lumo-upload' }
 );
@@ -71,8 +75,13 @@ const uploadFile = css`
     padding: var(--lumo-space-s) 0;
   }
 
-  :host(:not(:first-child)) {
-    border-top: 1px solid var(--lumo-contrast-10pct);
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus) [part='row'] {
+    border-radius: var(--lumo-border-radius-s);
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }
 
   [part='row'] {
@@ -129,7 +138,6 @@ const uploadFile = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
-  [part='row']:focus,
   [part$='button']:focus {
     outline: none;
     border-radius: var(--lumo-border-radius-s);

package/theme/material/vaadin-upload-styles.js

@@ -106,8 +106,11 @@ registerStyles(
       padding: 8px;
     }
 
-    [part='row']:focus {
+    :host(:focus) {
       outline: none;
+    }
+
+    :host(:focus) [part='row'] {
       background-color: var(--material-divider-color);
     }