@vaadin/upload 23.0.0-alpha1 → 23.0.0-alpha2

package/package.json

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

package/src/vaadin-upload-file.js

@@ -6,6 +6,7 @@
 import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
 import './vaadin-upload-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -15,36 +16,40 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ---|---
- * `row` | File container
- * `info` | Container for file status icon, file name, status and error messages
- * `done-icon` | File done status icon
- * `warning-icon` | File warning status icon
- * `meta` | Container for file name, status and error messages
- * `name` | File name
- * `error` | Error message, shown when error happens
- * `status` | Status message
- * `commands` | Container for file command icons
- * `start-button` | Start file upload button
- * `retry-button` | Retry file upload button
- * `remove-button` | Remove file button
- * `progress`| Progress bar
+ * Part name        | Description
+ * -----------------|-------------
+ * `row`            | File container
+ * `info`           | Container for file status icon, file name, status and error messages
+ * `done-icon`      | File done status icon
+ * `warning-icon`   | File warning status icon
+ * `meta`           | Container for file name, status and error messages
+ * `name`           | File name
+ * `error`          | Error message, shown when error happens
+ * `status`         | Status message
+ * `commands`       | Container for file command buttons
+ * `start-button`   | Start file upload button
+ * `retry-button`   | Retry file upload button
+ * `remove-button`  | Remove file button
+ * `progress`       | Progress bar
  *
  * The following state attributes are available for styling:
  *
- * Attribute | Description | Part name
- * ---|---|---
- * `error` | An error has happened during uploading | `:host`
- * `indeterminate` | Uploading is in progress, but the progress value is unknown | `:host`
- * `uploading` | Uploading is in progress | `:host`
- * `complete` | Uploading has finished successfully | `:host`
+ * Attribute        | Description
+ * -----------------|-------------
+ * `focus-ring`     | Set when the element is focused using the keyboard.
+ * `focused`        | Set when the element is focused.
+ * `error`          | An error has happened during uploading.
+ * `indeterminate`  | Uploading is in progress, but the progress value is unknown.
+ * `uploading`      | Uploading is in progress.
+ * `complete`       | Uploading has finished successfully.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
+ * @extends HTMLElement
+ * @mixes FocusMixin
  * @mixes ThemableMixin
  */
-class UploadFile extends ThemableMixin(PolymerElement) {
+class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -129,7 +134,17 @@ class UploadFile extends ThemableMixin(PolymerElement) {
     return {
       file: Object,
 
-      i18n: Object
+      i18n: Object,
+
+      /**
+       * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+       * @protected
+       */
+      tabindex: {
+        type: Number,
+        value: 0,
+        reflectToAttribute: true
+      }
     };
   }
 
@@ -143,6 +158,38 @@ class UploadFile extends ThemableMixin(PolymerElement) {
     ];
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // Handle moving focus to the button on Tab.
+    this.shadowRoot.addEventListener('focusin', (e) => {
+      const target = e.composedPath()[0];
+
+      if (target.getAttribute('part').endsWith('button')) {
+        this._setFocused(false);
+      }
+    });
+
+    // Handle moving focus from the button on Shift Tab.
+    this.shadowRoot.addEventListener('focusout', (e) => {
+      if (e.relatedTarget === this) {
+        this._setFocused(true);
+      }
+    });
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to mark the file as focused
+   * only when the host is focused.
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetFocus(event) {
+    return event.composedPath()[0] === this;
+  }
+
   /** @private */
   _fileAborted(abort) {
     if (abort) {

package/src/vaadin-upload.js

@@ -7,7 +7,6 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 import '@vaadin/button/src/vaadin-button.js';
 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';
@@ -95,7 +94,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>
@@ -106,7 +105,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         <ul id="fileList" part="file-list">
           <template is="dom-repeat" items="[[files]]" as="file">
             <li>
-              <vaadin-upload-file tabindex="0" file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
+              <vaadin-upload-file file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
             </li>
           </template>
         </ul>
@@ -456,7 +455,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const base = this.i18n.units.sizeBase || 1000;
     const unit = ~~(Math.log(bytes) / Math.log(base));
     const dec = Math.max(0, Math.min(3, unit - 1));
-    const size = parseFloat((bytes / Math.pow(base, unit)).toFixed(dec));
+    const size = parseFloat((bytes / base ** unit).toFixed(dec));
     return size + ' ' + this.i18n.units.size[unit];
   }
 
@@ -748,7 +747,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
   /** @private */
   _notifyFileChanges(file) {
     var p = 'files.' + this.files.indexOf(file) + '.';
-    for (let i in file) {
+    for (const i in file) {
       // eslint-disable-next-line no-prototype-builtins
       if (file.hasOwnProperty(i)) {
         this.notifyPath(p + i, file[i]);
@@ -819,24 +818,16 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
   _onAddFilesTouchEnd(e) {
     // Cancel the event to avoid the following click event
     e.preventDefault();
-    // FIXME(platosha): workaround for Polymer Gestures mouseCanceller
-    // cancelling the following synthetic click. See also:
-    // https://github.com/Polymer/polymer/issues/5289
-    this.__resetMouseCanceller();
-    this._onAddFilesClick();
+    this._onAddFilesClick(e);
   }
 
   /** @private */
-  __resetMouseCanceller() {
-    resetMouseCanceller();
-  }
-
-  /** @private */
-  _onAddFilesClick() {
+  _onAddFilesClick(e) {
     if (this.maxFilesReached) {
       return;
     }
 
+    e.stopPropagation();
     this.$.fileInput.value = '';
     this.$.fileInput.click();
   }

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

@@ -73,13 +73,10 @@ registerStyles(
 const uploadFile = css`
   :host {
     padding: var(--lumo-space-s) 0;
-  }
-
-  :host(:focus) {
     outline: none;
   }
 
-  :host(:focus) [part='row'] {
+  :host([focus-ring]) [part='row'] {
     border-radius: var(--lumo-border-radius-s);
     box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
   }

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

@@ -99,6 +99,10 @@ registerStyles(
 registerStyles(
   'vaadin-upload-file',
   css`
+    :host {
+      outline: none;
+    }
+
     [part='row'] {
       display: flex;
       align-items: flex-start;
@@ -106,11 +110,7 @@ registerStyles(
       padding: 8px;
     }
 
-    :host(:focus) {
-      outline: none;
-    }
-
-    :host(:focus) [part='row'] {
+    :host([focus-ring]) [part='row'] {
       background-color: var(--material-divider-color);
     }