Fixed Issue TEAMMATES#12664: Accessiblity Issue for Comment Buttons

willzoo · Feb 11, 2024 · f469c45 · f469c45
1 parent 887af1c
commit f469c45
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 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
@@ -47,10 +47,11 @@
                        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>
-
-<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>
+<div class="float-end">
+	<button type="button" class="btn btn-light btn-sm"
+			(click)="triggerCloseCommentBoxEvent()" *ngIf="!shouldHideClosingButton" [disabled]="isDisabled"><i class="fas fa-times"></i>
+	  Cancel</button>
+	<button type="button" class="btn btn-success btn-sm btn-margin-left"
+			(click)="triggerSaveCommentEvent()" *ngIf="!shouldHideSavingButton" [disabled]="isDisabled"><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
@@ -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>