From 499bde8115c0ec5f8d6ced81fe196c7dbd782e6c Mon Sep 17 00:00:00 2001
From: Haowei <94470439+NeoHW@users.noreply.github.com>
Date: Fri, 2 Aug 2024 22:27:47 +0800
Subject: [PATCH] [#12664] - Instructor's Student Records Page: Accessibility
 issue for comment buttons (#13155)

---
 .../comment-edit-form.component.html          | 28 +++++++---
 .../comment-row/comment-row.component.html    |  4 +-
 ...ion-submission-page.component.spec.ts.snap | 52 +++++++++++++------
 3 files changed, 59 insertions(+), 25 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..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
@@ -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 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-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"
+    (click)="triggerSaveCommentEvent()"
+    *ngIf="!shouldHideSavingButton"
+    [disabled]="isDisabled"
+    aria-label="Save comment">
+    <i class="fas fa-save"></i>
+    {{ mode === CommentRowMode.EDIT ? 'Save' : 'Add' }}
+  </button>
+</div>
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>
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 d0f974f68b8..d6760d6eaf8 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
@@ -1253,6 +1253,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"
@@ -1262,6 +1263,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"
@@ -1535,15 +1537,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>
@@ -1959,6 +1966,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"
@@ -1968,6 +1976,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"
@@ -4343,6 +4352,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"
@@ -4353,6 +4363,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"
@@ -4624,16 +4635,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>
@@ -5052,6 +5068,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"
@@ -5062,6 +5079,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"