From 84aee8f7e42b74d18c8d2ed4d94fa3039603edc0 Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Wed, 17 Jan 2024 10:31:58 +0300
Subject: [PATCH] #7594 Signature pad focus. (#7688)

Fixes #7594
---
 .../src/questions/signature.component.html    |  2 +-
 packages/survey-vue3-ui/src/Signaturepad.vue  |  2 +-
 .../templates/question-signaturepad.html      |  2 +-
 src/react/signaturepad.tsx                    |  2 +-
 src/vue/signaturepad.vue                      |  2 +-
 testCafe/questions/signature.ts               | 28 +++++++++++++++++++
 .../snapshots/signaturepad-loading.snap.html  |  2 +-
 .../snapshots/signaturepad-scaled.snap.html   |  2 +-
 .../snapshots/signaturepad-value.snap.html    |  2 +-
 ...ignaturepad-with-backgroundImage.snap.html |  2 +-
 tests/markup/snapshots/signaturepad.snap.html |  2 +-
 11 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/survey-angular-ui/src/questions/signature.component.html b/packages/survey-angular-ui/src/questions/signature.component.html
index 6683d592cb..1522921e52 100644
--- a/packages/survey-angular-ui/src/questions/signature.component.html
+++ b/packages/survey-angular-ui/src/questions/signature.component.html
@@ -4,7 +4,7 @@
 <div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()" [model]="$any(model).locPlaceholder" sv-ng-string></div>
 <div>
   <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [style.width]="model.renderedCanvasWidth" [class]="model.cssClasses.backgroundImage">
-  <canvas tabindex="0" [class]="model.cssClasses.canvas" (blur)="model.onBlur($event)"></canvas>
+  <canvas tabindex="-1" [class]="model.cssClasses.canvas" (blur)="model.onBlur($event)"></canvas>
 </div>
 <div [class]="model.cssClasses.controls" *ngIf="model.canShowClearButton">
   <button
diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
index 89c0eaf2a1..4b49833b53 100644
--- a/packages/survey-vue3-ui/src/Signaturepad.vue
+++ b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -21,7 +21,7 @@
           width: question.renderedCanvasWidth,
         }"
       />
-        <canvas tabindex="0" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
+      <canvas tabindex="-1" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
     </div>
     <div
       :class="question.cssClasses.controls"
diff --git a/src/knockout/templates/question-signaturepad.html b/src/knockout/templates/question-signaturepad.html
index 7d02c6603e..0b35c80c6d 100644
--- a/src/knockout/templates/question-signaturepad.html
+++ b/src/knockout/templates/question-signaturepad.html
@@ -8,7 +8,7 @@
             <!-- ko if: question.backgroundImage -->
             <img data-bind="attr: { src: question.backgroundImage}, style: { width: question.renderedCanvasWidth }, css: question.cssClasses.backgroundImage">
             <!-- /ko -->
-            <canvas tabindex='0' data-bind="css: question.cssClasses.canvas, event: { blur: question.koOnBlur }" ></canvas>
+            <canvas tabindex='-1' data-bind="css: question.cssClasses.canvas, event: { blur: question.koOnBlur }" ></canvas>
         </div>
         <!-- ko if: question.canShowClearButton -->
         <div data-bind="css: question.cssClasses.controls">
diff --git a/src/react/signaturepad.tsx b/src/react/signaturepad.tsx
index 92b4297f36..740bae2c7c 100644
--- a/src/react/signaturepad.tsx
+++ b/src/react/signaturepad.tsx
@@ -27,7 +27,7 @@ export class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
         </div>
         <div>
           {this.renderBackgroundImage()}
-          <canvas tabIndex={0} className={this.question.cssClasses.canvas} onBlur={this.question.onBlur}></canvas>
+          <canvas tabIndex={-1} className={this.question.cssClasses.canvas} onBlur={this.question.onBlur}></canvas>
         </div>
         {clearButton}
         {loadingIndicator}
diff --git a/src/vue/signaturepad.vue b/src/vue/signaturepad.vue
index affd8564cf..308fc5c305 100644
--- a/src/vue/signaturepad.vue
+++ b/src/vue/signaturepad.vue
@@ -13,7 +13,7 @@
         v-bind:style="{
           width: question.renderedCanvasWidth,
         }">
-          <canvas tabindex="0" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
+      <canvas tabindex="-1" :class="question.cssClasses.canvas" @blur="question.onBlur"></canvas>
     </div>
     <div :class="question.cssClasses.controls" v-if="question.canShowClearButton">
       <button
diff --git a/testCafe/questions/signature.ts b/testCafe/questions/signature.ts
index 09a606af74..1d6d71dbba 100644
--- a/testCafe/questions/signature.ts
+++ b/testCafe/questions/signature.ts
@@ -95,4 +95,32 @@ frameworks.forEach(framework => {
       return window["uploadFilesCallCount"];
     })()).eql(1);
   });
+  test("Signature: no focus with tab", async (t) => {
+    await t.resizeWindow(1920, 1080);
+    await initSurvey(framework, {
+      "elements": [
+        {
+          "type": "text",
+          "name": "q1",
+          "placeholder": "q1"
+        },
+        {
+          "type": "signaturepad",
+          "name": "signature"
+        },
+        {
+          "type": "text",
+          "name": "q2",
+          "placeholder": "q2"
+        }
+      ],
+      "showQuestionNumbers": false
+    });
+
+    await t.click(Selector("input[placeholder=q1]"));
+    await t.expect(Selector("input[placeholder=q1]").focused).ok();
+    await t.pressKey("tab");
+    await t.expect(Selector("input[placeholder=q2]").focused).ok();
+  });
+
 });
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-loading.snap.html b/tests/markup/snapshots/signaturepad-loading.snap.html
index fa1aff1f81..2c4ec1394d 100644
--- a/tests/markup/snapshots/signaturepad-loading.snap.html
+++ b/tests/markup/snapshots/signaturepad-loading.snap.html
@@ -3,7 +3,7 @@
 		<span class="sv-string-viewer">Sign here</span>
 	</div>
 	<div>
-		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
+		<canvas class="sd-signaturepad__canvas sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
 		</canvas>
 	</div>
 	<div class="sd-signaturepad__loading-indicator">
diff --git a/tests/markup/snapshots/signaturepad-scaled.snap.html b/tests/markup/snapshots/signaturepad-scaled.snap.html
index ae11b7984c..bc2513b0b0 100644
--- a/tests/markup/snapshots/signaturepad-scaled.snap.html
+++ b/tests/markup/snapshots/signaturepad-scaled.snap.html
@@ -4,7 +4,7 @@
 	</div>
 	<div>
 		<img class="sjs_sp__background-image" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
-			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="0" width="300">
+			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="-1" width="300">
 			</canvas>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-value.snap.html b/tests/markup/snapshots/signaturepad-value.snap.html
index bf4923f770..bb00010d59 100644
--- a/tests/markup/snapshots/signaturepad-value.snap.html
+++ b/tests/markup/snapshots/signaturepad-value.snap.html
@@ -3,7 +3,7 @@
 		<span class="sv-string-viewer">Sign here</span>
 	</div>
 	<div>
-		<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
+		<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
 		</canvas>
 	</div>
 	<div class="sjs_sp_controls">
diff --git a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
index e57a1991d9..e84eddab24 100644
--- a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
+++ b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
@@ -4,7 +4,7 @@
 	</div>
 	<div>
 		<img class="sjs_sp__background-image" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
-			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
+			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
 			</canvas>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad.snap.html b/tests/markup/snapshots/signaturepad.snap.html
index 5815aea815..9a44ef9370 100644
--- a/tests/markup/snapshots/signaturepad.snap.html
+++ b/tests/markup/snapshots/signaturepad.snap.html
@@ -3,7 +3,7 @@
 		<span class="sv-string-viewer">Sign here</span>
 	</div>
 	<div>
-		<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
+		<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="-1" width="300">
 		</canvas>
 	</div>
 </div>
\ No newline at end of file