[#12535] Instructor Course Page: Make "Show" group tabbable (#12540)

* Make 'Show' group tabbable and change cursor to pointer * Make use of tmRouterLink rather than using tabindex and enter key event * Change route to use relative route * Rerun CI * Change a tag to button tag * Remove background from button * Update E2E * Fix lint * Update snapshot * 12535-show-button-cannot-tabbed --------- Co-authored-by: Dominic Lim <46486515+domlimm@users.noreply.github.com>
TEAMMATES · Aug 17, 2023 · 6a89e17 · 6a89e17
1 parent eaa415a
commit 6a89e17
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 32 deletions.
diff --git a/...ctor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap b/...ctor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
@@ -1843,32 +1843,39 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a
+                      <button
+                        class="link-button"
                         id="show-statistics-0"
                       >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td
@@ -1966,32 +1973,39 @@ exports[`InstructorCoursesPageComponent should snap with no courses in course st
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a
+                      <button
+                        class="link-button"
                         id="show-statistics-1"
                       >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td>
                     <span>
-                      <a>
+                      <button
+                        class="link-button"
+                      >
                          Show 
-                      </a>
+                      </button>
                     </span>
                   </td>
                   <td

diff --git a/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.html b/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.html
@@ -93,43 +93,39 @@ <h2 class="h3">Active courses</h2>
                 </td>
                 <td>
                   <span *ngIf="!courseStats[course.course.courseId]">
-                    <a *ngIf="!course.isLoadingCourseStats; else loadingSpinner" (click)="getCourseStats(i)"
-                      [tmRouterLink]="">
-                      Show
-                    </a>
+                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
+                      (click)="getCourseStats(i)" class="link-button" > Show
+                    </button>
                   </span>
                   <span *ngIf="courseStats[course.course.courseId]">
                     {{ courseStats[course.course.courseId]['sections'] }}
                   </span>
                 </td>
                 <td>
                   <span *ngIf="!courseStats[course.course.courseId]">
-                    <a *ngIf="!course.isLoadingCourseStats; else loadingSpinner" id="show-statistics-{{ i }}"
-                      (click)="getCourseStats(i)" [tmRouterLink]="">
-                      Show
-                    </a>
+                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner" id="show-statistics-{{ i }}"
+                      (click)="getCourseStats(i)" class="link-button" > Show
+                    </button>
                   </span>
                   <span *ngIf="courseStats[course.course.courseId]">
                     {{ courseStats[course.course.courseId]['teams'] }}
                   </span>
                 </td>
                 <td>
                   <span *ngIf="!courseStats[course.course.courseId]">
-                    <a *ngIf="!course.isLoadingCourseStats; else loadingSpinner" (click)="getCourseStats(i)"
-                      [tmRouterLink]="">
-                      Show
-                    </a>
+                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
+                      (click)="getCourseStats(i)" class="link-button" > Show
+                    </button>
                   </span>
                   <span *ngIf="courseStats[course.course.courseId]">
                     {{ courseStats[course.course.courseId]['students'] }}
                   </span>
                 </td>
                 <td>
                   <span *ngIf="!courseStats[course.course.courseId]">
-                    <a *ngIf="!course.isLoadingCourseStats; else loadingSpinner" (click)="getCourseStats(i)"
-                      [tmRouterLink]="">
-                      Show
-                    </a>
+                    <button *ngIf="!course.isLoadingCourseStats; else loadingSpinner"
+                      (click)="getCourseStats(i)" class="link-button" > Show
+                    </button>
                   </span>
                   <span *ngIf="courseStats[course.course.courseId]">
                     {{ courseStats[course.course.courseId]['unregistered'] }}

diff --git a/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.scss b/src/web/app/pages-instructor/instructor-courses-page/instructor-courses-page.component.scss
@@ -106,3 +106,15 @@
 .d-inline-block {
   position: inherit;
 }
+
+.link-button {
+  border: none;
+  text-decoration: underline;
+  color: var(--bs-link-color);
+  padding: 0;
+  background: none;
+}
+
+.link-button:hover {
+  color: var(--bs-link-hover-color);
+}