[#12647] Fix accessibility tests (#12648)

* change to class... * fix axe tests * e2e test fix * add role * test e2e fix * e2e * add assertion debug * test * cleanup * update snapshots and lint * linkt
TEAMMATES · Nov 29, 2023 · 87472fb · 87472fb
1 parent a9292bb
commit 87472fb
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 59 deletions.
diff --git a/src/e2e/java/teammates/e2e/pageobjects/FeedbackResultsPage.java b/src/e2e/java/teammates/e2e/pageobjects/FeedbackResultsPage.java
@@ -251,7 +251,7 @@ private void verifyAnonymousResponseView(FeedbackQuestionAttributes question,
                                              List<FeedbackResponseAttributes> expectedResponses,
                                              boolean isGiverVisible) {
         List<WebElement> anonymousViews = getAllResponseViews(question.getQuestionNumber()).stream()
-                .filter(v -> isAnonymous(v.findElement(By.id("response-recipient")).getText()))
+                .filter(v -> isAnonymous(v.findElement(By.className("response-recipient")).getText()))
                 .collect(Collectors.toList());
         if (anonymousViews.isEmpty()) {
             fail("No anonymous views found");
@@ -309,7 +309,7 @@ private boolean isAnonymous(String identifier) {
 
     private boolean isAnyAnonymousResponseEqual(FeedbackQuestionAttributes question, WebElement responseView,
                                                 FeedbackResponseAttributes response) {
-        List<WebElement> giverNames = responseView.findElements(By.id("response-giver"));
+        List<WebElement> giverNames = responseView.findElements(By.className("response-giver"));
         List<WebElement> responseFields = getAllResponseFields(responseView);
         for (int i = 0; i < giverNames.size(); i++) {
             if (isAnonymous(giverNames.get(i).getText()) && isResponseEqual(question, responseFields.get(i), response)) {
@@ -466,21 +466,15 @@ private String getAdditionalInfo(int questionNum) {
     }
 
     private WebElement getGivenResponseField(int questionNum, String receiver) {
-        int recipientIndex = getGivenRecipientIndex(questionNum, receiver);
-        return getQuestionResponsesSection(questionNum)
-                .findElements(By.cssSelector("#given-responses tm-single-response"))
-                .get(recipientIndex);
-    }
-
-    private int getGivenRecipientIndex(int questionNum, String recipient) {
-        List<WebElement> recipients = getQuestionResponsesSection(questionNum)
-                .findElements(By.cssSelector("#given-responses #response-recipient"));
+        WebElement questionResponsesSection = getQuestionResponsesSection(questionNum);
+        WebElement givenResponses = questionResponsesSection.findElement(By.className("given-responses"));
+        List<WebElement> recipients = givenResponses.findElements(By.className("response-recipient"));
         for (int i = 0; i < recipients.size(); i++) {
-            if (recipients.get(i).getText().split("To: ")[1].equals(recipient)) {
-                return i;
+            if (recipients.get(i).getText().split("To: ")[1].equals(receiver)) {
+                return givenResponses.findElements(By.tagName("tm-single-response")).get(i);
             }
         }
-        throw new AssertionError("Recipient not found: " + recipient);
+        throw new AssertionError("Recipient not found: " + receiver);
     }
 
     private String getAdditionalInfoString(FeedbackQuestionAttributes question) {
@@ -584,7 +578,7 @@ private boolean isCommentByResponseGiver(WebElement commentField) {
     }
 
     private String getCommentGiver(WebElement commentField) {
-        String commentGiverDescription = commentField.findElement(By.id("comment-giver-name")).getText();
+        String commentGiverDescription = commentField.findElement(By.className("comment-giver-name")).getText();
         return commentGiverDescription.split(" commented")[0];
     }
 
@@ -608,7 +602,7 @@ private WebElement getCommentField(int questionNum, String commentString) {
     }
 
     private int getGiverIndex(WebElement response, String giver) {
-        List<WebElement> givers = response.findElements(By.id("response-giver"));
+        List<WebElement> givers = response.findElements(By.className("response-giver"));
         for (int i = 0; i < givers.size(); i++) {
             if (givers.get(i).getText().contains(giver)) {
                 return i;
@@ -618,7 +612,8 @@ private int getGiverIndex(WebElement response, String giver) {
     }
 
     private int getRecipientIndex(int questionNum, String recipient) {
-        List<WebElement> recipients = getQuestionResponsesSection(questionNum).findElements(By.id("response-recipient"));
+        List<WebElement> recipients =
+                getQuestionResponsesSection(questionNum).findElements(By.className("response-recipient"));
         for (int i = 0; i < recipients.size(); i++) {
             if (recipients.get(i).getText().split("To: ")[1].equals(recipient)) {
                 return i;

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackResultsPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackResultsPage.java
@@ -1019,7 +1019,7 @@ private WebElement getTeamStats(WebElement parentPanel, int qnNum) {
     }
 
     private String getCommentGiver(WebElement commentField) {
-        String commentGiverDescription = commentField.findElement(By.id("comment-giver-name")).getText();
+        String commentGiverDescription = commentField.findElement(By.className("comment-giver-name")).getText();
         return commentGiverDescription.split(" commented")[0];
     }
 

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
@@ -20,7 +20,7 @@
           Comment by response giver.
         </span>
         <span class="text-secondary" *ngIf="!isFeedbackParticipantComment">
-          <span id="comment-giver-name">{{ model.commentGiverName ? model.commentGiverName : model.originalComment.commentGiver }} commented at </span>
+          <span class="comment-giver-name">{{ model.commentGiverName ? model.commentGiverName : model.originalComment.commentGiver }} commented at </span>
           <span class="ngb-tooltip-class" style="margin-right: .25rem;" [ngbTooltip]="model.originalComment.createdAt | formatDateDetail: model.timezone!">
             {{ model.originalComment.createdAt | formatDateBrief: model.timezone! }}</span>
           <ng-container *ngIf="model.originalComment.lastEditedAt && model.originalComment.lastEditedAt !== model.originalComment.createdAt">

diff --git a/...ents/question-response-panel/__snapshots__/question-response-panel.component.spec.ts.snap b/...ents/question-response-panel/__snapshots__/question-response-panel.component.spec.ts.snap
@@ -59,8 +59,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -74,7 +73,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -92,7 +91,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -164,8 +163,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -179,7 +177,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -197,7 +195,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -226,7 +224,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -244,7 +242,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -316,8 +314,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -331,7 +328,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -349,7 +346,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -392,7 +389,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                                                   class="text-secondary"
                                                 >
                                                   <span
-                                                    id="comment-giver-name"
+                                                    class="comment-giver-name"
                                                   >
                                                     comment-giver-1 commented at 
                                                   </span>
@@ -496,8 +493,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -511,7 +507,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -529,7 +525,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -558,7 +554,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -576,7 +572,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -605,7 +601,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -623,7 +619,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -690,8 +686,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -705,7 +700,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -723,7 +718,7 @@ exports[`QuestionResponsePanelComponent should snap with feedback session with q
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -867,8 +862,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
               Responses are not visible to you. 
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -882,7 +876,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -900,7 +894,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:
@@ -943,7 +937,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
                                                   class="text-secondary"
                                                 >
                                                   <span
-                                                    id="comment-giver-name"
+                                                    class="comment-giver-name"
                                                   >
                                                     comment-giver-1 commented at 
                                                   </span>
@@ -1032,8 +1026,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
               </div>
             </div>
             <div
-              class="mt-4"
-              id="given-responses"
+              class="given-responses mt-4"
             >
               <strong>
                 Your own responses (to others):
@@ -1047,7 +1040,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
                       class="card-header bg-info"
                     >
                       <span
-                        id="response-recipient"
+                        class="response-recipient"
                       >
                         <b>
                           To:
@@ -1065,7 +1058,7 @@ exports[`QuestionResponsePanelComponent should snap with questions and responses
                         <tbody>
                           <tr>
                             <td
-                              id="response-giver"
+                              class="response-giver"
                             >
                               <strong>
                                 From:

diff --git a/src/web/app/components/question-response-panel/question-response-panel.component.html b/src/web/app/components/question-response-panel/question-response-panel.component.html
@@ -35,7 +35,7 @@
               <strong>Other responses (to you): </strong>Responses are not visible to you.
             </div>
           </ng-template>
-          <div id="given-responses" class="mt-4" *ngIf="question.responsesFromSelf.length">
+          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length">
             <strong>Your own responses (to others):</strong>
             <div *ngFor="let responseFromSelf of question.responsesFromSelf">
               <tm-student-view-responses [responses]="[responseFromSelf]" [isSelfResponses]="true" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>

diff --git a/...omponents/question-responses/student-view-responses/student-view-responses.component.html b/...omponents/question-responses/student-view-responses/student-view-responses.component.html
@@ -1,13 +1,13 @@
 <div class="card border-{{ isSelfResponses ? 'info' : 'primary' }} mt-4">
   <div class="card-header bg-{{ isSelfResponses ? 'info' : 'primary' }}" [ngClass]="{ 'text-white': !isSelfResponses }">
-    <span id="response-recipient"><b>To:</b> {{ recipient }}</span>
+    <span class="response-recipient"><b>To:</b> {{ recipient }}</span>
   </div>
   <div class="card-body table-responsive" style="padding: 0;">
     <table class="table">
       <tbody>
         <ng-container *ngFor="let response of responses">
           <tr>
-            <td id="response-giver">
+            <td class="response-giver">
               <strong>From:</strong> {{ response.giver }}
             </td>
           </tr>

diff --git a/...b/app/components/question-types/question-response/rubric-question-response.component.html b/...b/app/components/question-types/question-response/rubric-question-response.component.html
@@ -10,7 +10,9 @@
       <tr *ngFor="let answer of answers; let i = index">
         <td>{{ questionDetails.rubricSubQuestions[i] }}</td>
         <td class="text-center" *ngFor="let choice of questionDetails.rubricChoices">
-          <i *ngIf="answer.answer === choice" aria-label="selected" class="fas fa-check"></i>
+          <span [attr.aria-label]="answer.answer === choice ? 'selected' : 'unselected'" role="img">
+            <i *ngIf="answer.answer === choice" class="fas fa-check"></i>
+          </span>
         </td>
       </tr>
     </tbody>