Skip to content

Commit

Permalink
[#12664] - Instructor's Student Records Page: Accessibility issue for…
Browse files Browse the repository at this point in the history 
… comment buttons (#13155)
  • Loading branch information
@NeoHW
NeoHW authored Aug 2, 2024
1 parent cdee5f2 commit 499bde8
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 25 deletions.
28 changes: 22 additions & 6 deletions src/web/app/components/comment-box/comment-edit-form/comment-edit-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/web/app/components/comment-box/comment-row/comment-row.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
52 changes: 35 additions & 17 deletions ...sion/session-submission-page/__snapshots__/session-submission-page.component.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down

0 comments on commit 499bde8

Please sign in to comment.