@progress/kendo-angular-inputs 10.1.1-dev.202210121020 → 10.1.1-dev.202210241319

package/esm2015/signature/signature.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __awaiter } from "tslib";
-import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { anyChanged, closest, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -206,6 +206,12 @@ export class SignatureComponent {
     get isEmpty() {
         return !this.value;
     }
+    /**
+     * @hidden
+     */
+    get canvasLabel() {
+        return this.getMessage('canvasLabel');
+    }
     /**
      * @hidden
      */
@@ -367,27 +373,33 @@ export class SignatureComponent {
      * @hidden
      */
     onDialogClick(e) {
+        var _a;
         if (e.target.classList.contains('k-overlay')) {
             this.isOpen = false;
+            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
         }
     }
     /**
      * @hidden
      */
     onDialogKeydown(e) {
+        var _a;
         if (e.keyCode === Keys.Escape) {
             this.isOpen = false;
             this.cd.detectChanges();
+            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
         }
     }
     /**
      * @hidden
      */
     onDialogClose() {
+        var _a;
         const args = new SignatureCloseEvent();
         this.close.next(args);
         if (!args.isDefaultPrevented()) {
             this.isOpen = false;
+            (_a = this.maximizeButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
         }
     }
     /**
@@ -566,19 +578,22 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.signature' },
         { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SignatureComponent) }
-    ], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "maximizeButton", first: true, predicate: ["maximizeButton"], descendants: true, read: ElementRef }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], exportAs: ["kendoSignature"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSignatureLocalizedMessages
             i18n-clear="kendo.signature.clear|The message for the Clear button."
             clear="Clear"
             i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
             maximize="Maximize"
             i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
-            minimize="Minimize">
+            minimize="Minimize"
+            i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
+            canvasLabel="Signature canvas">
         </ng-container>
 
         <div class="k-signature-actions k-signature-actions-top">
             <button
                 *ngIf="showMaximize"
+                #maximizeButton
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
@@ -604,6 +619,8 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             #canvas
             class="k-signature-canvas"
             [attr.tabindex]="tabindex"
+            role="img"
+            [attr.aria-label]="canvasLabel"
         ></div>
         <div
             *ngIf="!hideLine"
@@ -623,7 +640,11 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
+        <kendo-dialog
+            *ngIf="isOpen"
+            autoFocusedElement=".k-signature-action.k-signature-minimize"
+            (click)="onDialogClick($event)"
+            (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"
@@ -665,12 +686,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-maximize="kendo.signature.maximize|The message for the Maximize button."
             maximize="Maximize"
             i18n-minimize="kendo.signature.minimize|The message for the Minimize button."
-            minimize="Minimize">
+            minimize="Minimize"
+            i18n-canvasLabel="kendo.signature.canvasLabel|The message for the Canvas element aria-label."
+            canvasLabel="Signature canvas">
         </ng-container>
 
         <div class="k-signature-actions k-signature-actions-top">
             <button
                 *ngIf="showMaximize"
+                #maximizeButton
                 kendoButton
                 class="k-signature-action k-signature-maximize"
                 icon="hyperlink-open"
@@ -696,6 +720,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             #canvas
             class="k-signature-canvas"
             [attr.tabindex]="tabindex"
+            role="img"
+            [attr.aria-label]="canvasLabel"
         ></div>
         <div
             *ngIf="!hideLine"
@@ -715,7 +741,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </button>
         </div>
 
-        <kendo-dialog *ngIf="isOpen" (click)="onDialogClick($event)" (keydown)="onDialogKeydown($event)">
+        <kendo-dialog
+            *ngIf="isOpen"
+            autoFocusedElement=".k-signature-action.k-signature-minimize"
+            (click)="onDialogClick($event)"
+            (keydown)="onDialogKeydown($event)">
             <kendo-signature
                 [readonly]="readonly"
                 [disabled]="disabled"
@@ -749,6 +779,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], maximizeButton: [{
+                type: ViewChild,
+                args: ['maximizeButton', { read: ElementRef }]
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.k-readonly']