[#12081] User-friendliness: Fix feedback path dropdown (#12207)

* Shift submenu to bottom * Clean up code * Change to buttons for accessibility and update chevron * Fix screenreader focus * Lint and test * Fix mobile overflow * Fix lint issues * Remove aria-label and update tests * Fix attempt for E2E tests * Update tests * Refine E2E change
TEAMMATES · Mar 25, 2023 · 04b44a1 · 04b44a1
1 parent d8ad6c6
commit 04b44a1
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 329 deletions.
diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -1079,7 +1079,7 @@ private void selectFeedbackPathDropdownOption(int questionNum, String text) {
         WebElement feedbackPathPanel = questionForm.findElement(By.tagName("tm-feedback-path-panel"));
         click(feedbackPathPanel.findElement(By.id("btn-feedback-path")));
         WebElement dropdown = feedbackPathPanel.findElement(By.id("feedback-path-dropdown"));
-        List<WebElement> options = dropdown.findElements(By.className("dropdown-item"));
+        List<WebElement> options = dropdown.findElements(By.className("dropdown-button"));
         for (WebElement option : options) {
             if (option.getText().equals(text)) {
                 click(option);

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -3,26 +3,33 @@
     <b class="feedback-path-title">Feedback Path</b> (Who is giving feedback about whom?)
   </div>
   <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px w-100" autoClose="outside">
-    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle [disabled]="!model.isEditable || commonFeedbackPaths.size === 1">
-      <span *ngIf="!model.isUsingOtherFeedbackPath">
+    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle
+            [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()">
+      <span *ngIf="!model.isUsingOtherFeedbackPath" class="text-wrap">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}
       </span>
       <span *ngIf="model.isUsingOtherFeedbackPath">Custom feedback path</span>
     </button>
     <ul id="feedback-path-dropdown" ngbDropdownMenu>
       <li class="dropdown-header">Common feedback path combinations</li>
-      <li class="dropdown-item" *ngFor="let path of commonFeedbackPaths | keyvalue">
-        <div ngbDropdown #subMenu="ngbDropdown" placement="right" (mouseenter)="subMenu.open()" (mouseleave)="subMenu.close()">
-          <span ngbDropdownAnchor class="float-end invisible"></span>
-          {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-right"></i>
-          <ul ngbDropdownMenu>
-            <li class="dropdown-item" *ngFor="let recipient of path.value"
-                (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">{{ recipient | recipientTypeDescription }}</li>
-          </ul>
+      <li *ngFor="let path of commonFeedbackPaths | keyvalue" ngbDropdown #subMenu="ngbDropdown">
+        <div class="text-wrap dropdown-item">
+          <button class="dropdown-button" (click)="toggleSubMenu(path.key)">
+            {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-{{ isSubMenuOpen(path.key) ? 'down' : 'right' }}"></i>
+          </button>
         </div>
+        <ul *ngIf="isSubMenuOpen(path.key)">
+          <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value">
+            <button class="dropdown-button" (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">
+              {{ recipient | recipientTypeDescription }}
+            </button>
+          </li>
+        </ul>
       </li>
       <li class="dropdown-divider"></li>
-      <li class="dropdown-item" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</li>
+      <li class="text-wrap dropdown-item">
+        <button class="dropdown-button" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</button>
+      </li>
     </ul>
   </div>
   <div class="row margin-top-15px" *ngIf="model.isUsingOtherFeedbackPath">

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
@@ -17,3 +17,10 @@
 .dropdown-item {
   cursor: pointer;
 }
+
+.dropdown-button {
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
@@ -83,6 +83,8 @@ export class FeedbackPathPanelComponent {
   triggerModelChangeBatch: EventEmitter<Partial<QuestionEditFormModel>> =
     new EventEmitter<Partial<QuestionEditFormModel>>();
 
+  subMenuStatuses: Map<FeedbackParticipantType, boolean> = new Map();
+
   triggerCustomNumberOfEntities(data: number): void {
     this.customNumberOfEntitiesToGiveFeedbackTo.emit(data);
   }
@@ -95,6 +97,22 @@ export class FeedbackPathPanelComponent {
     this.customFeedbackPath.emit(true);
   }
 
+  toggleSubMenu(menu: FeedbackParticipantType): void {
+    this.subMenuStatuses.set(menu, !this.subMenuStatuses.get(menu));
+  }
+
+  resetMenu(): void {
+    this.subMenuStatuses.forEach((_, key) => this.subMenuStatuses.set(key, false));
+  }
+
+  isSubMenuOpen(menu: FeedbackParticipantType): boolean {
+    let subMenuState: boolean | undefined = this.subMenuStatuses.get(menu);
+    if (subMenuState === undefined) {
+      subMenuState = false;
+    }
+    return subMenuState;
+  }
+
   /**
    * Change the {@code giverType} and {@code recipientType} and reset the visibility settings.
    */

diff --git a/...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -245,6 +245,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                 ngbdropdowntoggle=""
               >
                 <span
+                  class="text-wrap"
                   style=""
                 >
                    Students in this course will give feedback on 
@@ -268,9 +269,13 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                   class="dropdown-divider"
                 />
                 <li
-                  class="dropdown-item"
+                  class="text-wrap dropdown-item"
                 >
-                  Custom feedback path...
+                  <button
+                    class="dropdown-button"
+                  >
+                    Custom feedback path...
+                  </button>
                 </li>
               </ul>
             </div>