@progress/kendo-angular-upload 11.2.0-develop.5 → 11.2.0-develop.7

package/fesm2015/progress-kendo-angular-upload.mjs

@@ -1352,17 +1352,18 @@ class NavigationService {
     process(event) {
         const handler = this.action(event);
         if (handler) {
-            handler(event.shiftKey);
+            handler(event);
         }
     }
     computeKeys(direction) {
         this.keyBindings = {
-            [Keys.Enter]: () => this.handleEnter(),
+            [Keys.Space]: () => this.handleSpace(),
+            [Keys.Enter]: (event) => this.handleEnter(event),
             [Keys.Escape]: () => this.handleEscape(),
             [Keys.Delete]: () => this.handleDelete(),
-            [Keys.Tab]: (shifted) => this.handleTab(shifted),
-            [Keys.ArrowUp]: () => this.handleUp(),
-            [Keys.ArrowDown]: () => this.handleDown(),
+            [Keys.Tab]: (event) => this.handleTab(event.shiftKey),
+            [Keys.ArrowUp]: (event) => this.handleUp(event),
+            [Keys.ArrowDown]: (event) => this.handleDown(event),
             [this.invertKeys(direction, Keys.ArrowLeft, Keys.ArrowRight)]: () => this.handleLeft(),
             [this.invertKeys(direction, Keys.ArrowRight, Keys.ArrowLeft)]: () => this.handleRight()
         };
@@ -1375,7 +1376,7 @@ class NavigationService {
         this._focusedIndex = -1;
         this.onSelectButtonFocus.emit();
     }
-    handleEnter() {
+    handleEnter(event) {
         if (this.lastIndex >= 0) {
             this.zone.run(() => {
                 if (this.focusedIndex <= this.lastFileIndex) {
@@ -1383,11 +1384,17 @@ class NavigationService {
                     return;
                 }
                 if (this.actionButtonsVisible && this.focusedIndex <= this.lastIndex) {
+                    event.preventDefault();
                     this.onActionButtonAction.emit(this.focusedIndex < this.lastIndex ? "clear" : "upload");
                 }
             });
         }
     }
+    handleSpace() {
+        if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
+            this.zone.run(() => this.onFileAction.emit(Keys.Space));
+        }
+    }
     handleDelete() {
         if (this.focusedIndex >= 0 && this.focusedIndex <= this.lastFileIndex) {
             this.zone.run(() => {
@@ -1417,16 +1424,28 @@ class NavigationService {
         }
     }
     handleTab(shifted) {
-        if (this.focusedIndex >= 0 && shifted) {
-            this.focusedIndex = -1;
+        if (this.focusedIndex === -1) {
+            this.focusedIndex = this.lastFileIndex + 1;
+            this.zone.run(() => this.onActionButtonFocus.emit("clear"));
             return;
         }
-        this.zone.run(() => {
-            this.onTab.emit();
-        });
+        if (this.focusedIndex === this.lastFileIndex + 1) {
+            this.focusedIndex += 1;
+            this.zone.run(() => this.onActionButtonFocus.emit("upload"));
+            return;
+        }
+        if (this.focusedIndex === this.lastIndex && shifted) {
+            this.focusedIndex -= 1;
+            return;
+        }
+        if (this.focusedIndex === this.lastFileIndex + 1 && shifted) {
+            this.focusedIndex = -1;
+            this.zone.run(() => this.onSelectButtonFocus.emit());
+        }
     }
-    handleDown() {
+    handleDown(event) {
         if (this.lastIndex >= 0 && this.focusedIndex < this.lastIndex) {
+            event.preventDefault();
             this.zone.run(() => {
                 if (this.focusedIndex < this.lastFileIndex) {
                     this.focusedIndex += 1;
@@ -1440,8 +1459,9 @@ class NavigationService {
             });
         }
     }
-    handleUp() {
+    handleUp(event) {
         if (this.lastIndex >= 0 && this.focusedIndex > -1) {
+            event.preventDefault();
             this.zone.run(() => {
                 this.focusedIndex -= 1;
                 if (this.focusedIndex === -1) {
@@ -1493,8 +1513,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1675674529,
-    version: '11.2.0-develop.5',
+    publishDate: 1675695082,
+    version: '11.2.0-develop.7',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1817,7 +1837,7 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             [ngClass]="{ 'k-focus': this.retryFocused }"
             [attr.tabIndex]="-1"
-
+            [attr.aria-hidden]="true"
             (focus)="onFocus('retry')"
             (blur)="onBlur('retry')"
             (click)="onRetryClick()"
@@ -1837,6 +1857,7 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
             [attr.tabIndex]="-1"
+            [attr.aria-hidden]="true"
             (focus)="onFocus('pauseResume')"
             (blur)="onBlur('pauseResume')"
             (click)="onPauseResumeClick()"
@@ -1854,6 +1875,7 @@ FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             type="button"
             [attr.tabIndex]="-1"
+            [attr.aria-hidden]="true"
             (focus)="onFocus('action')"
             (blur)="onBlur('action')"
             [ngClass]="{ 'k-focus': this.actionFocused }"
@@ -1883,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             [ngClass]="{ 'k-focus': this.retryFocused }"
             [attr.tabIndex]="-1"
-
+            [attr.aria-hidden]="true"
             (focus)="onFocus('retry')"
             (blur)="onBlur('retry')"
             (click)="onRetryClick()"
@@ -1903,6 +1925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
             [attr.tabIndex]="-1"
+            [attr.aria-hidden]="true"
             (focus)="onFocus('pauseResume')"
             (blur)="onBlur('pauseResume')"
             (click)="onPauseResumeClick()"
@@ -1920,6 +1943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
             type="button"
             [attr.tabIndex]="-1"
+            [attr.aria-hidden]="true"
             (focus)="onFocus('action')"
             (blur)="onBlur('action')"
             [ngClass]="{ 'k-focus': this.actionFocused }"
@@ -2017,7 +2041,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
                 <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-                <span [ngClass]="{
+                <span [attr.aria-live]="'polite'" [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors && isNotYetUploaded,
                     'k-file-summary': isUploadSuccessful || isUploadFailed
@@ -2075,7 +2099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
                 <span class="k-file-name" [title]="file.name">{{ file.name }}</span>
-                <span [ngClass]="{
+                <span [attr.aria-live]="'polite'" [ngClass]="{
                     'k-file-validation-message': file.validationErrors,
                     'k-file-size': !file.validationErrors && isNotYetUploaded,
                     'k-file-summary': isUploadSuccessful || isUploadFailed
@@ -2171,7 +2195,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     <span [title]="file.name" class="k-file-name">
                         {{file.name}}
                     </span>
-                    <span [ngClass]="{
+                    <span [attr.aria-live]="'polite'" [ngClass]="{
                         'k-file-validation-message': file.validationErrors,
                         'k-file-size': !file.validationErrors
                         }"
@@ -2237,7 +2261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     <span [title]="file.name" class="k-file-name">
                         {{file.name}}
                     </span>
-                    <span [ngClass]="{
+                    <span [attr.aria-live]="'polite'" [ngClass]="{
                         'k-file-validation-message': file.validationErrors,
                         'k-file-size': !file.validationErrors
                         }"
@@ -2314,6 +2338,16 @@ class FileListComponent {
             }
             this.navigation.focusSelectButton();
         }
+        const isUploadChunk = this.uploadService.async.chunk;
+        const canTogglePauseResume = key === Keys.Space && files[0].state !== FileState.Uploaded;
+        if (canTogglePauseResume && isUploadChunk) {
+            if (files[0].state === FileState.Paused) {
+                this.uploadService.resumeFile(uid);
+            }
+            else {
+                this.uploadService.pauseFile(uid);
+            }
+        }
     }
     hasDelete(item) {
         return item.element.nativeElement.getElementsByClassName('k-delete').length > 0;
@@ -2893,6 +2927,9 @@ class FileSelectComponent {
     get dir() {
         return this.direction;
     }
+    get hostRole() {
+        return 'application';
+    }
     ngOnInit() {
         const { buttonId, inputId } = this.getIds();
         this.focusableId = buttonId;
@@ -2922,6 +2959,8 @@ class FileSelectComponent {
     focus() {
         setTimeout(() => {
             this.fileSelectButton.nativeElement.focus();
+            this.navigation.focused = true;
+            this.onFocus.emit();
         });
     }
     ngOnDestroy() {
@@ -3111,7 +3150,7 @@ class FileSelectComponent {
     }
 }
 FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileSelectComponent, selector: "kendo-fileselect", inputs: { accept: "accept", disabled: "disabled", multiple: "multiple", name: "name", showFileList: "showFileList", tabindex: "tabindex", restrictions: "restrictions", zoneId: "zoneId", focusableId: "focusableId" }, outputs: { onBlur: "blur", onFocus: "focus", select: "select", remove: "remove", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -3155,19 +3194,19 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 kendoButton
                 #fileSelectButton
                 class="k-upload-button"
-                role="button"
+                type="button"
+                (click)="fileSelectInput.click()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
                 [attr.aria-controls]="inputElementId"
-                (focus)="onFileSelectButtonFocus($event)"
-                (blur)="onFileSelectButtonBlur($event)"
             >
                 {{textFor('select')}}
             </button>
             <input
                 #fileSelectInput
                 kendoFileSelect
+                class="k-hidden"
                 [id]="inputElementId"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
@@ -3238,19 +3277,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 kendoButton
                 #fileSelectButton
                 class="k-upload-button"
-                role="button"
+                type="button"
+                (click)="fileSelectInput.click()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
                 [attr.aria-controls]="inputElementId"
-                (focus)="onFileSelectButtonFocus($event)"
-                (blur)="onFileSelectButtonBlur($event)"
             >
                 {{textFor('select')}}
             </button>
             <input
                 #fileSelectInput
                 kendoFileSelect
+                class="k-hidden"
                 [id]="inputElementId"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
@@ -3323,6 +3362,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });
 
 /**
@@ -3446,6 +3488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable no-debugger */
 /**
  * @hidden
  */
@@ -3519,13 +3562,11 @@ class UploadActionButtonsComponent {
 }
 UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 UploadActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: { disabled: "disabled", actionsLayout: "actionsLayout" }, host: { properties: { "class.k-actions": "this.hostDefaultClass", "class.k-actions-end": "this.actionButtonsEndClassName", "class.k-actions-stretched": "this.actionButtonsStretchedClassName", "class.k-actions-start": "this.actionButtonsStartClassName", "class.k-actions-center": "this.actionButtonsCenterClassName" } }, viewQueries: [{ propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, static: true }, { propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true, static: true }], ngImport: i0, template: `
-        <button #clearButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
-            [attr.tabIndex]="-1"
+        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
             (click)="onClearButtonClick($event)">
                 {{textFor('clearSelectedFiles')}}
         </button>
-        <button #uploadButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
-            [attr.tabIndex]="-1"
+        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
             (click)="onUploadButtonClick($event)">
                 {{textFor('uploadSelectedFiles')}}
         </button>
@@ -3535,13 +3576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'kendo-upload-action-buttons',
                     template: `
-        <button #clearButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
-            [attr.tabIndex]="-1"
+        <button #clearButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-clear-selected"
             (click)="onClearButtonClick($event)">
                 {{textFor('clearSelectedFiles')}}
         </button>
-        <button #uploadButton type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
-            [attr.tabIndex]="-1"
+        <button #uploadButton role="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-upload-selected"
             (click)="onUploadButtonClick($event)">
                 {{textFor('uploadSelectedFiles')}}
         </button>
@@ -3863,6 +3902,9 @@ class UploadComponent {
     get restrictions() {
         return this._restrictions;
     }
+    get hostRole() {
+        return 'application';
+    }
     get hostDisabledClass() {
         return this.disabled;
     }
@@ -3871,21 +3913,12 @@ class UploadComponent {
     }
     ngOnInit() {
         this.verifySettings();
-        const { buttonId, inputId } = this.getIds();
+        const { buttonId } = this.getIds();
         this.focusableId = buttonId;
-        this.inputElementId = inputId;
         this.uploadService.setChunkSettings(this.chunkable);
         if (this.zoneId) {
             this.dropZoneService.addComponent(this, this.zoneId);
         }
-        const button = this.fileSelectButton.nativeElement;
-        const input = this.fileSelectInput.nativeElement;
-        this.subs.add(this.renderer.listen(input, 'mouseenter', () => {
-            this.renderer.addClass(button, 'k-hover');
-        }));
-        this.subs.add(this.renderer.listen(input, 'mouseleave', () => {
-            this.renderer.removeClass(button, 'k-hover');
-        }));
         this.zone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(this.wrapper, 'keydown', event => this.handleKeydown(event)));
         });
@@ -3958,21 +3991,6 @@ class UploadComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonFocus(_event) {
-        this.renderer.addClass(this.fileSelectButton.nativeElement, 'k-focus');
-        if (!this.navigation.focused) {
-            this.navigation.focusedIndex = -1;
-        }
-    }
-    /**
-     * @hidden
-     */
-    onFileSelectButtonBlur(_event) {
-        this.renderer.removeClass(this.fileSelectButton.nativeElement, 'k-focus');
-    }
     /**
      * @hidden
      */
@@ -4028,6 +4046,8 @@ class UploadComponent {
     focus() {
         setTimeout(() => {
             this.fileSelectButton.nativeElement.focus();
+            this.navigation.focused = true;
+            this.onFocus.emit();
         });
     }
     /**
@@ -4211,7 +4231,7 @@ class UploadComponent {
     }
 }
 UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }, { token: DropZoneService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
+UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadComponent, selector: "kendo-upload", inputs: { autoUpload: "autoUpload", batch: "batch", withCredentials: "withCredentials", saveField: "saveField", saveHeaders: "saveHeaders", saveMethod: "saveMethod", saveUrl: "saveUrl", responseType: "responseType", removeField: "removeField", removeHeaders: "removeHeaders", removeMethod: "removeMethod", removeUrl: "removeUrl", chunkable: "chunkable", concurrent: "concurrent", multiple: "multiple", disabled: "disabled", showFileList: "showFileList", tabindex: "tabindex", zoneId: "zoneId", tabIndex: "tabIndex", accept: "accept", restrictions: "restrictions", focusableId: "focusableId", actionsLayout: "actionsLayout" }, outputs: { onBlur: "blur", cancel: "cancel", clear: "clear", complete: "complete", error: "error", onFocus: "focus", pause: "pause", remove: "remove", resume: "resume", select: "select", success: "success", upload: "upload", uploadProgress: "uploadProgress", valueChange: "valueChange" }, host: { properties: { "class.k-upload": "this.hostDefaultClasses", "attr.role": "this.hostRole", "class.k-disabled": "this.hostDisabledClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         NavigationService,
         UploadService,
@@ -4299,19 +4319,17 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 #fileSelectButton
                 class="k-upload-button"
                 role="button"
+                (click)="fileSelectInput.click()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
-                (focus)="onFileSelectButtonFocus($event)"
-                (blur)="onFileSelectButtonBlur($event)"
             >
                 {{textFor('select')}}
             </button>
             <input
                 #fileSelectInput
                 kendoFileSelect
-                [id]="inputElementId"
+                class="k-hidden"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
                 [dir]="direction"
@@ -4433,19 +4451,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 #fileSelectButton
                 class="k-upload-button"
                 role="button"
+                (click)="fileSelectInput.click()"
                 [id]="focusableId"
                 [attr.aria-label]="textFor('select')"
                 [attr.tabindex]="tabindex"
-                [attr.aria-controls]="inputElementId"
-                (focus)="onFileSelectButtonFocus($event)"
-                (blur)="onFileSelectButtonBlur($event)"
             >
                 {{textFor('select')}}
             </button>
             <input
                 #fileSelectInput
                 kendoFileSelect
-                [id]="inputElementId"
+                class="k-hidden"
                 [attr.accept]="accept ? accept : null"
                 [attr.aria-hidden]="true"
                 [dir]="direction"
@@ -4568,6 +4584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], hostDefaultClasses: [{
                 type: HostBinding,
                 args: ['class.k-upload']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], hostDisabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']