From 4e5799544a57e1705dce6f6cd25db2a6796ba4a0 Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 29 Jul 2024 01:27:26 +0800
Subject: [PATCH 1/5] Add voiceover accessibility to delete button and edit
 button

---
 .../comment-box/comment-row/comment-row.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/app/components/comment-box/comment-row/comment-row.component.html b/src/web/app/components/comment-box/comment-row/comment-row.component.html
index 63bad057870..e485d36f3a3 100755
--- a/src/web/app/components/comment-box/comment-row/comment-row.component.html
+++ b/src/web/app/components/comment-box/comment-row/comment-row.component.html
@@ -34,9 +34,9 @@
 
         <div class="float-end">
           <button type="button" class="btn-edit-comment btn btn-outline-primary btn-sm" *ngIf="!shouldHideEditButton" ngbTooltip='Edit this comment'
-                  (click)="triggerModelChange('isEditing', true)" [disabled]="isDisabled"><i class="fas fa-pencil-alt"></i></button>
+                  (click)="triggerModelChange('isEditing', true)" [disabled]="isDisabled" aria-label="Edit comment"><i class="fas fa-pencil-alt"></i></button>
           <button type="button" class="btn-delete-comment btn btn-outline-primary btn-sm btn-margin-left" *ngIf="!shouldHideDeleteButton" ngbTooltip='Delete this comment'
-                  (click)="triggerDeleteCommentEvent()" [disabled]="isDisabled"><i class="fas fa-trash"></i></button>
+                  (click)="triggerDeleteCommentEvent()" [disabled]="isDisabled" aria-label="Delete comment"><i class="fas fa-trash"></i></button>
         </div>
       </div>
       <div class="comment-text col-12" [innerHTML]="model.originalComment.commentText | safeHtml"></div>

From a95341de401096bdc23164697fc7cbb841dcb72b Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 29 Jul 2024 03:41:27 +0800
Subject: [PATCH 2/5] Edit cancel to come  before save in dom

---
 .../comment-edit-form.component.html          | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
index 2f3edc7e40e..2f0b9f37c84 100755
--- a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
+++ b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
@@ -47,10 +47,26 @@
                        placeholderText="Enter your comment here" [isDisabled]="isDisabled"></tm-rich-text-editor>
 </div>
 
-<button type="button" class="btn btn-success btn-sm float-end btn-margin-left"
-        (click)="triggerSaveCommentEvent()" *ngIf="!shouldHideSavingButton" [disabled]="isDisabled"><i class="fas fa-save"></i>
-  {{ mode === CommentRowMode.EDIT ? 'Save' : 'Add' }}</button>
+<div class="d-flex justify-content-end">
+  <button 
+    type="button" 
+    class="btn btn-light btn-sm" 
+    (click)="triggerCloseCommentBoxEvent()" 
+    *ngIf="!shouldHideClosingButton" 
+    [disabled]="isDisabled"
+    aria-label="Cancel editing">
+    <i class="fas fa-times"></i>
+    Cancel
+  </button>
 
-<button type="button" class="btn btn-light btn-sm float-end"
-        (click)="triggerCloseCommentBoxEvent()" *ngIf="!shouldHideClosingButton" [disabled]="isDisabled"><i class="fas fa-times"></i>
-  Cancel</button>
+  <button 
+    type="button" 
+    class="btn btn-success btn-sm me-2" 
+    (click)="triggerSaveCommentEvent()" 
+    *ngIf="!shouldHideSavingButton" 
+    [disabled]="isDisabled" 
+    aria-label="Save comment">
+    <i class="fas fa-save"></i>
+    {{ mode === CommentRowMode.EDIT ? 'Save' : 'Add' }}
+  </button>
+</div>

From 667787aaaa65986024f3f033cd3e911513719efc Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 29 Jul 2024 03:44:22 +0800
Subject: [PATCH 3/5] Add margin space between cancel and save button

---
 .../comment-edit-form/comment-edit-form.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
index 2f0b9f37c84..6a27247ed3f 100755
--- a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
+++ b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
@@ -50,7 +50,7 @@
 <div class="d-flex justify-content-end">
   <button 
     type="button" 
-    class="btn btn-light btn-sm" 
+    class="btn btn-light btn-sm me-2" 
     (click)="triggerCloseCommentBoxEvent()" 
     *ngIf="!shouldHideClosingButton" 
     [disabled]="isDisabled"
@@ -61,7 +61,7 @@
 
   <button 
     type="button" 
-    class="btn btn-success btn-sm me-2" 
+    class="btn btn-success btn-sm" 
     (click)="triggerSaveCommentEvent()" 
     *ngIf="!shouldHideSavingButton" 
     [disabled]="isDisabled" 

From 0522f59adda2bd9f026ceba47cae6bf20379ad33 Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 29 Jul 2024 04:02:53 +0800
Subject: [PATCH 4/5] Update snapshot tests

---
 ...ion-submission-page.component.spec.ts.snap | 52 +++++++++++++------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap b/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap
index 5110ed14b92..9e952e44f6f 100644
--- a/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap
+++ b/src/web/app/pages-session/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap
@@ -1237,6 +1237,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                     class="float-end"
                                   >
                                     <button
+                                      aria-label="Edit comment"
                                       class="btn-edit-comment btn btn-outline-primary btn-sm"
                                       ngbtooltip="Edit this comment"
                                       type="button"
@@ -1246,6 +1247,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                       />
                                     </button>
                                     <button
+                                      aria-label="Delete comment"
                                       class="btn-delete-comment btn btn-outline-primary btn-sm btn-margin-left"
                                       ngbtooltip="Delete this comment"
                                       type="button"
@@ -1511,15 +1513,20 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                 </div>
                               </tm-rich-text-editor>
                             </div>
-                            <button
-                              class="btn btn-light btn-sm float-end"
-                              type="button"
+                            <div
+                              class="d-flex justify-content-end"
                             >
-                              <i
-                                class="fas fa-times"
-                              />
-                               Cancel
-                            </button>
+                              <button
+                                aria-label="Cancel editing"
+                                class="btn btn-light btn-sm me-2"
+                                type="button"
+                              >
+                                <i
+                                  class="fas fa-times"
+                                />
+                                 Cancel 
+                              </button>
+                            </div>
                           </tm-comment-edit-form>
                         </tm-comment-row>
                       </div>
@@ -1927,6 +1934,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                     class="float-end"
                                   >
                                     <button
+                                      aria-label="Edit comment"
                                       class="btn-edit-comment btn btn-outline-primary btn-sm"
                                       ngbtooltip="Edit this comment"
                                       type="button"
@@ -1936,6 +1944,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                       />
                                     </button>
                                     <button
+                                      aria-label="Delete comment"
                                       class="btn-delete-comment btn btn-outline-primary btn-sm btn-margin-left"
                                       ngbtooltip="Delete this comment"
                                       type="button"
@@ -4252,6 +4261,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                     class="float-end"
                                   >
                                     <button
+                                      aria-label="Edit comment"
                                       class="btn-edit-comment btn btn-outline-primary btn-sm"
                                       disabled=""
                                       ngbtooltip="Edit this comment"
@@ -4262,6 +4272,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                       />
                                     </button>
                                     <button
+                                      aria-label="Delete comment"
                                       class="btn-delete-comment btn btn-outline-primary btn-sm btn-margin-left"
                                       disabled=""
                                       ngbtooltip="Delete this comment"
@@ -4525,16 +4536,21 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                 </div>
                               </tm-rich-text-editor>
                             </div>
-                            <button
-                              class="btn btn-light btn-sm float-end"
-                              disabled=""
-                              type="button"
+                            <div
+                              class="d-flex justify-content-end"
                             >
-                              <i
-                                class="fas fa-times"
-                              />
-                               Cancel
-                            </button>
+                              <button
+                                aria-label="Cancel editing"
+                                class="btn btn-light btn-sm me-2"
+                                disabled=""
+                                type="button"
+                              >
+                                <i
+                                  class="fas fa-times"
+                                />
+                                 Cancel 
+                              </button>
+                            </div>
                           </tm-comment-edit-form>
                         </tm-comment-row>
                       </div>
@@ -4946,6 +4962,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                     class="float-end"
                                   >
                                     <button
+                                      aria-label="Edit comment"
                                       class="btn-edit-comment btn btn-outline-primary btn-sm"
                                       disabled=""
                                       ngbtooltip="Edit this comment"
@@ -4956,6 +4973,7 @@ exports[`SessionSubmissionPageComponent should snap with feedback session questi
                                       />
                                     </button>
                                     <button
+                                      aria-label="Delete comment"
                                       class="btn-delete-comment btn btn-outline-primary btn-sm btn-margin-left"
                                       disabled=""
                                       ngbtooltip="Delete this comment"

From beedc9693dad3b285b55dda5ddc583671a0e45fd Mon Sep 17 00:00:00 2001
From: NeoHW <neohaowei@gmail.com>
Date: Mon, 29 Jul 2024 21:02:28 +0800
Subject: [PATCH 5/5] Fix lint issues

---
 .../comment-edit-form.component.html          | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
index 6a27247ed3f..296dd99aa55 100755
--- a/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
+++ b/src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
@@ -48,23 +48,23 @@
 </div>
 
 <div class="d-flex justify-content-end">
-  <button 
-    type="button" 
-    class="btn btn-light btn-sm me-2" 
-    (click)="triggerCloseCommentBoxEvent()" 
-    *ngIf="!shouldHideClosingButton" 
+  <button
+    type="button"
+    class="btn btn-light btn-sm me-2"
+    (click)="triggerCloseCommentBoxEvent()"
+    *ngIf="!shouldHideClosingButton"
     [disabled]="isDisabled"
     aria-label="Cancel editing">
     <i class="fas fa-times"></i>
     Cancel
   </button>
 
-  <button 
-    type="button" 
-    class="btn btn-success btn-sm" 
-    (click)="triggerSaveCommentEvent()" 
-    *ngIf="!shouldHideSavingButton" 
-    [disabled]="isDisabled" 
+  <button
+    type="button"
+    class="btn btn-success btn-sm"
+    (click)="triggerSaveCommentEvent()"
+    *ngIf="!shouldHideSavingButton"
+    [disabled]="isDisabled"
     aria-label="Save comment">
     <i class="fas fa-save"></i>
     {{ mode === CommentRowMode.EDIT ? 'Save' : 'Add' }}