From 6ccdef77050a1f61913db032b67d006d74d13ff0 Mon Sep 17 00:00:00 2001 From: Wei Qing <48304907+weiquu@users.noreply.github.com> Date: Thu, 16 Mar 2023 10:49:24 +0800 Subject: [PATCH] [#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 --- .../InstructorFeedbackEditPage.java | 2 +- .../feedback-path-panel.component.html | 29 +- .../feedback-path-panel.component.scss | 7 + .../feedback-path-panel.component.ts | 18 + .../question-edit-form.component.spec.ts.snap | 9 +- ...r-session-edit-page.component.spec.ts.snap | 416 +++++------------- 6 files changed, 152 insertions(+), 329 deletions(-) diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java index 2888d3d500d2..71e81e869c6b 100644 --- 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 options = dropdown.findElements(By.className("dropdown-item")); + List 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 index 3d839cb71d4c..f229bb479f39 100644 --- 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 @@ (Who is giving feedback about whom?)
-
  • Common feedback path combinations
    • -
  • -
    - - {{ path.key | giverTypeDescription }} will give feedback on ... -
      -
    • {{ recipient | recipientTypeDescription }}
      • -
    +
  • +
    +
    +
      +
    • + +
      • +
  • -
  • Custom feedback path...
    • +
  • + +
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 index 6f729827c615..79aabc7d057e 100644 --- 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 index 6db44e3a7264..b2ca26c51834 100644 --- 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> = new EventEmitter>(); + subMenuStatuses: Map = 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/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap index 460317187190..ad29ba49d16d 100644 --- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap +++ b/src/web/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="" > Students in this course will give feedback on @@ -268,9 +269,13 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = ` class="dropdown-divider" />
  • - Custom feedback path... +
    • diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap index aaa0b8ff8948..8408babcc2a1 100644 --- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap +++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap @@ -1500,6 +1500,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu ngbdropdowntoggle="" > Students in this course will give feedback on @@ -1520,139 +1521,67 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu Common feedback path combinations
  • -
  • -
  • -
  • - Custom feedback path... +
    • @@ -2239,6 +2168,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu ngbdropdowntoggle="" > Students in this course will give feedback on @@ -2259,139 +2189,67 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu Common feedback path combinations
  • -
  • -
  • -
  • - Custom feedback path... +
    • @@ -4126,139 +3984,67 @@ exports[`InstructorSessionEditPageComponent should snap with new question added Common feedback path combinations
  • -
  • -
  • -
  • - Custom feedback path... +