Merge branch 'master' into feat/refactor-extension-confirm-modal

.github/workflows/comment-goodfirstissue.yml

@@ -0,0 +1,30 @@
+name: Comment on Good First Issue
+
+on:
+  issues:
+    types:
+      - labeled
+
+jobs:
+  comment:
+    if: github.event.label.name == 'good first issue'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Add comment
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            let body = `**Good First Issue - Notes for Contributors**
+              This issue is for **first-time contributors only**. If you are new to TEAMMATES, feel free to submit a PR for this issue.\n\n`
+            body += "*Please note that we allow only one `good first issue` per contributor.* If you have already made a prior contribution to TEAMMATES, you may wish to take a look at issues with the `help wanted` tag instead.\n\n"
+            body += "**We do not assign issues to contributors**. If you would like to pick up this issue, do post a comment below to express your interest and check if there is anyone else who is already working on the issue. We will do our best to reply and give you the go-ahead, but if we don't, feel free to submit a PR as long as there is no one else working on it.\n\n"
+            body += "**To get started**, do read through our [contributing guidelines](https://teammates.github.io/teammates/contributing-doc.html) carefully, and [set up a development environment on your local machine](https://teammates.github.io/teammates/setting-up.html) before making a PR.\n\n"
+            body += "If you need any clarifications on our [developer guide](https://teammates.github.io/teammates/index.html), or are facing issues that are not found in our [troubleshooting guide](https://teammates.github.io/teammates/troubleshooting-guide.html), please [post a message in our discussion forum](https://github.com/TEAMMATES/teammates/discussions)."
+            await github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body,
+            })

src/web/app/components/panel-chevron/panel-chevron.component.html

@@ -1,4 +1,4 @@
-<div class="chevron">
+<button type="button" class="chevron btn-course btn btn-primary btn-sm" aria-label="Expand panel" [attr.aria-expanded]=isExpanded>
   <i class="fas fa-chevron-down" *ngIf="!isExpanded"></i>
   <i class="fas fa-chevron-up" *ngIf="isExpanded"></i>
-</div>
+</button>

src/web/app/components/panel-chevron/panel-chevron.component.scss

@@ -1,4 +1,10 @@
-.chevron {
+button.chevron {
   display: inline-flex;
   vertical-align: middle;
+  background-color: inherit;
+  border-width: 0;
+}
+
+button.chevron:active {
+  background-color: inherit;
 }

src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap

@@ -39,13 +39,16 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
         class="collapse-caret"
       >
         <tm-panel-chevron>
-          <div
-            class="chevron"
+          <button
+            aria-expanded="true"
+            aria-label="Expand panel"
+            class="chevron btn-course btn btn-primary btn-sm"
+            type="button"
           >
             <i
               class="fas fa-chevron-up"
             />
-          </div>
+          </button>
         </tm-panel-chevron>
       </div>
       <div
@@ -407,6 +410,10 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                 </li>
               </ul>
             </div>
+            <div
+              class="table-responsive"
+            >
+            </div>
             <div
               class="margin-top-15px visibility-message"
             >

src/web/app/components/question-response-panel/question-response-panel.component.ts

@@ -96,6 +96,7 @@ export class QuestionResponsePanelComponent {
       next: (sessionResults: SessionResults) => {
         const responses: QuestionOutput = sessionResults.questions[0];
         if (responses) {
+          question.hasResponse = true;
           question.feedbackQuestion = responses.feedbackQuestion;
           question.allResponses = responses.allResponses;
           question.otherResponses = responses.otherResponses;
@@ -104,7 +105,7 @@ export class QuestionResponsePanelComponent {
           question.responsesToSelf = responses.responsesToSelf;
           question.hasResponseButNotVisibleForPreview = responses.hasResponseButNotVisibleForPreview;
           question.hasCommentNotVisibleForPreview = responses.hasCommentNotVisibleForPreview;
-        } else {
+      } else {
           question.hasResponse = false;
           if (question.errorMessage) {
             this.statusMessageService.showSuccessToast('Question '

src/web/app/components/question-submission-form/question-submission-form.component.html

@@ -1,12 +1,12 @@
 <div id="question-submission-form-qn-{{ model.questionNumber }}" class="card">
-  <button class="card-header bg-primary text-white question-header cursor-pointer border-0" (click)="toggleQuestionTab();"
-    [ngClass]="isSaved ? 'bg-success' : 'bg-primary'" [attr.aria-expanded]="this.model.isTabExpanded">
+  <div class="card-header bg-primary text-white question-header cursor-pointer border-0" (click)="toggleQuestionTab();"
+    [ngClass]="isSaved ? 'bg-success' : 'bg-primary'">
     <div class="collapse-caret">
-      <tm-panel-chevron [isExpanded]="model.isTabExpanded" aria-hidden="true"></tm-panel-chevron>
+      <tm-panel-chevron [isExpanded]="model.isTabExpanded"></tm-panel-chevron>
     </div>
     <i class="fas fa-check me-2" *ngIf="isSaved" aria-hidden="true"></i>
     <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ model.questionBrief }}</h2>
-  </button>
+  </div>
 
   <div *ngIf="model.isTabExpanded" @collapseAnim>
     <div class="card-body" *tmIsLoading="model.isLoading">
@@ -214,7 +214,8 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
         <div class="col-12 text-center">
           <button id="btn-submit-qn-{{ model.questionNumber }}" type="submit" class="btn btn-success"
                   ngbTooltip="You can save your responses for this question at any time and come back later to continue."
-                  (click)="saveFeedbackResponses()" [disabled]="isSavingResponses || isSubmissionDisabled">
+                  #tooltip="ngbTooltip" (mouseenter)="tooltip.open()"
+                  (click)="saveFeedbackResponses(); tooltip.close();"[disabled]="isSavingResponses || isSubmissionDisabled">
             <tm-ajax-loading *ngIf="isSavingResponses"></tm-ajax-loading>
             <span>{{ isQuestionCountOne ? "Submit Response" : "Submit Response for Question " + model.questionNumber }}</span>
           </button>

src/web/app/components/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html

@@ -1,7 +1,7 @@
 <div class="plain-text-area" *ngIf="!questionDetails.shouldAllowRichText">
   <textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
 </div>
-<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
+<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" role="textbox" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
 <div class="margin-top-7px text-secondary text-end">
   <div id="recommended-length" *ngIf="questionDetails.recommendedLength">
     Recommended length for the answer: {{ questionDetails.recommendedLength }} words

src/web/app/components/user-notifications-list/__snapshots__/user-notifications-list.component.spec.ts.snap

@@ -80,13 +80,16 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="false"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-down"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -109,13 +112,16 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="false"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-down"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -253,13 +259,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -307,13 +316,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -430,13 +442,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -484,13 +499,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -607,13 +625,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>
@@ -661,13 +682,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
               class="card-header-btn-toolbar"
             >
               <tm-panel-chevron>
-                <div
-                  class="chevron"
+                <button
+                  aria-expanded="true"
+                  aria-label="Expand panel"
+                  class="chevron btn-course btn btn-primary btn-sm"
+                  type="button"
                 >
                   <i
                     class="fas fa-chevron-up"
                   />
-                </div>
+                </button>
               </tm-panel-chevron>
             </div>
           </div>

src/web/app/components/visibility-panel/visibility-panel.component.html

@@ -24,28 +24,30 @@
       </li>
     </ul>
   </div>
-  <table class="table margin-top-15px background-color-white table-striped" *ngIf="model.isUsingOtherVisibilitySetting" aria-label="Custom Visibility Options Table">
-    <thead>
-    <tr>
-      <th scope="col" class="text-start">User/Group</th>
-      <th scope="col" class="text-center" *ngFor="let visibilityControl of VisibilityControl | enumToArray">{{ visibilityControl | visibilityControlName }}</th>
-    </tr>
-    </thead>
-    <tbody id="custom-visibility-table">
-    <ng-container *ngFor="let visibilityType of FeedbackVisibilityType | enumToArray">
-      <tr *ngIf="visibilityStateMachine.isVisibilityTypeApplicable(visibilityType)">
-        <td><span class="ngb-tooltip-class" [ngbTooltip]="visibilityType | visibilityTypeDescription" container="body">{{ visibilityType | visibilityTypeName }}</span></td>
-        <td *ngFor="let visibilityControl of VisibilityControl | enumToArray" class="text-center">
-          <input type="checkbox"
-                 (click)="modifyVisibilityControl($event.target.checked, visibilityType, visibilityControl)"
-                 [checked]="visibilityStateMachine.isVisible(visibilityType, visibilityControl)"
-                 [disabled]="!visibilityStateMachine.isCellEditable(visibilityType, visibilityControl) || !model.isEditable"
-                 [attr.aria-label]="getCheckboxAriaLabel(visibilityType, visibilityControl)">
-        </td>
+  <div class="table-responsive">
+    <table class="table margin-top-15px background-color-white table-striped" *ngIf="model.isUsingOtherVisibilitySetting" aria-label="Custom Visibility Options Table">
+      <thead>
+      <tr>
+        <th scope="col" class="text-start">User/Group</th>
+        <th scope="col" class="text-center" *ngFor="let visibilityControl of VisibilityControl | enumToArray">{{ visibilityControl | visibilityControlName }}</th>
       </tr>
-    </ng-container>
-    </tbody>
-  </table>
+      </thead>
+      <tbody id="custom-visibility-table">
+      <ng-container *ngFor="let visibilityType of FeedbackVisibilityType | enumToArray">
+        <tr *ngIf="visibilityStateMachine.isVisibilityTypeApplicable(visibilityType)">
+          <td><span class="ngb-tooltip-class" [ngbTooltip]="visibilityType | visibilityTypeDescription" container="body">{{ visibilityType | visibilityTypeName }}</span></td>
+          <td *ngFor="let visibilityControl of VisibilityControl | enumToArray" class="text-center">
+            <input type="checkbox"
+                   (click)="modifyVisibilityControl($event.target.checked, visibilityType, visibilityControl)"
+                   [checked]="visibilityStateMachine.isVisible(visibilityType, visibilityControl)"
+                   [disabled]="!visibilityStateMachine.isCellEditable(visibilityType, visibilityControl) || !model.isEditable"
+                   [attr.aria-label]="getCheckboxAriaLabel(visibilityType, visibilityControl)">
+          </td>
+        </tr>
+      </ng-container>
+      </tbody>
+    </table>
+  </div>
   <div class="margin-top-15px visibility-message">
     This is the visibility hint as seen by the feedback giver:
     <ul class="text-muted background-color-warning">