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

package/esm2020/fileselect.component.mjs

@@ -139,6 +139,9 @@ export class FileSelectComponent {
     get dir() {
         return this.direction;
     }
+    get hostRole() {
+        return 'application';
+    }
     ngOnInit() {
         const { buttonId, inputId } = this.getIds();
         this.focusableId = buttonId;
@@ -168,6 +171,8 @@ export class FileSelectComponent {
     focus() {
         setTimeout(() => {
             this.fileSelectButton.nativeElement.focus();
+            this.navigation.focused = true;
+            this.onFocus.emit();
         });
     }
     ngOnDestroy() {
@@ -357,7 +362,7 @@ export class FileSelectComponent {
     }
 }
 FileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.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,
@@ -401,19 +406,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"
@@ -484,19 +489,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"
@@ -569,4 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }] } });

package/esm2020/navigation.service.mjs

@@ -32,17 +32,18 @@ export 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()
         };
@@ -55,7 +56,7 @@ export class NavigationService {
         this._focusedIndex = -1;
         this.onSelectButtonFocus.emit();
     }
-    handleEnter() {
+    handleEnter(event) {
         if (this.lastIndex >= 0) {
             this.zone.run(() => {
                 if (this.focusedIndex <= this.lastFileIndex) {
@@ -63,11 +64,17 @@ export 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(() => {
@@ -97,16 +104,28 @@ export 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;
+        }
+        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;
         }
-        this.zone.run(() => {
-            this.onTab.emit();
-        });
+        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;
@@ -120,8 +139,9 @@ export class NavigationService {
             });
         }
     }
-    handleUp() {
+    handleUp(event) {
         if (this.lastIndex >= 0 && this.focusedIndex > -1) {
+            event.preventDefault();
             this.zone.run(() => {
                 this.focusedIndex -= 1;
                 if (this.focusedIndex === -1) {

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export 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/'
 };

package/esm2020/rendering/file-list-item-action-button.component.mjs

@@ -134,7 +134,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()"
@@ -154,6 +154,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()"
@@ -171,6 +172,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 }"
@@ -200,7 +202,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()"
@@ -220,6 +222,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()"
@@ -237,6 +240,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 }"

package/esm2020/rendering/file-list-multiple-items.component.mjs

@@ -86,7 +86,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
                         }"
@@ -152,7 +152,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
                         }"

package/esm2020/rendering/file-list-single-item.component.mjs

@@ -92,7 +92,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
@@ -150,7 +150,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

package/esm2020/rendering/file-list.component.mjs

@@ -61,6 +61,16 @@ export 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;

package/esm2020/rendering/upload-action-buttons.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable no-debugger */
 import { Component, Input, HostBinding, ViewChild, ElementRef } from '@angular/core';
 import { UploadService } from '../upload.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -83,13 +84,11 @@ export class UploadActionButtonsComponent {
 }
 UploadActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadActionButtonsComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.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>
@@ -99,13 +98,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>

package/esm2020/upload.component.mjs

@@ -322,6 +322,9 @@ export class UploadComponent {
     get restrictions() {
         return this._restrictions;
     }
+    get hostRole() {
+        return 'application';
+    }
     get hostDisabledClass() {
         return this.disabled;
     }
@@ -330,21 +333,12 @@ export 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)));
         });
@@ -417,21 +411,6 @@ export 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
      */
@@ -487,6 +466,8 @@ export class UploadComponent {
     focus() {
         setTimeout(() => {
             this.fileSelectButton.nativeElement.focus();
+            this.navigation.focused = true;
+            this.onFocus.emit();
         });
     }
     /**
@@ -670,7 +651,7 @@ export class UploadComponent {
     }
 }
 UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, deps: [{ token: i1.UploadService }, { token: i2.LocalizationService }, { token: i3.NavigationService }, { token: i4.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,
@@ -758,19 +739,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"
@@ -892,19 +871,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"
@@ -1027,6 +1004,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']