fix(a11y): accessibility fixes

Brings the T2 2026 a11y work from ontrack-features-t2-2026 integration/t2-2026 onto 11.0.x.

Co-authored-by: maplefoxgit <s223932052@deakin.edu.au>
Co-authored-by: Kimsreng <kimsrengin@gmail.com>
Co-authored-by: Tan Tai <s224621011@deakin.edu.au>
Co-authored-by: SanjanaBottu <bottusanjanasridhar@gmail.com>
Co-authored-by: Niethin <niethinrueshil@gmail.com>
Co-authored-by: baohuy-tran <baohuy.tranaus@gmail.com>

Author: 7 people

src/app/common/header/unit-dropdown/unit-dropdown.component.html

@@ -23,7 +23,7 @@
 </div>
 
 <mat-menu #menu="matMenu" class="unit-dropdown-menu">
-  @if (media.isActive('xs')) {
+  @if (isExtraSmall) {
     <button mat-menu-item routerLink="/home">
       <mat-icon
         aria-label="Home Icon"
@@ -35,24 +35,25 @@
       <span class="flex-grow"></span>
     </button>
   }
-  @if (media.isActive('xs')) {
+  @if (isExtraSmall) {
     <mat-divider></mat-divider>
   }
 
   <h2 class="my-2 ml-3.5" mat-subheader [hidden]="unitRoles?.length === 0">Units you teach</h2>
   @for (unitRole of unitRoles; track unitRole) {
     @if (!unitRole.unit.teachingPeriod || unitRole.unit.teachingPeriod?.active) {
-      <div
+      <button
         class="w-full"
         mat-menu-item
+        type="button"
         [routerLink]="['/units', unitRole.unit.id, 'tasks', 'inbox']"
       >
         <div class="flex w-full items-center">
           <div class="unitName max-w-[220px] flex-none truncate">{{ unitRole.unit.name }}</div>
           <div class="grow"></div>
           <f-unit-code [unit_code]="unitRole.unit.code" [width]="80"></f-unit-code>
         </div>
-      </div>
+      </button>
     }
   }
 

src/app/common/modals/scorm-extension-modal/scorm-extension-modal.component.html

@@ -30,7 +30,7 @@ <h3 mat-dialog-title>Extra attempt request</h3>
 </div>
 
 <div mat-dialog-actions style="float: right">
-  <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
+  <button mat-dialog-close mat-stroked-button>Cancel</button>
   <button
     color="primary"
     mat-button

src/app/common/modals/spec-con-modal/spec-con-modal.component.html

@@ -11,7 +11,7 @@ <h3 mat-dialog-title>Grant Extension / Special Consideration</h3>
 </div>
 
 <div mat-dialog-actions style="float: right">
-  <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
+  <button mat-dialog-close mat-stroked-button>Cancel</button>
   <button
     color="primary"
     mat-button

src/app/common/modals/task-assessment-modal/task-assessment-modal.component.html

@@ -1,7 +1,11 @@
 <div class="submission-history-modal">
   <h3 class="panel-title" mat-dialog-title>Overseer Assessment</h3>
   <mat-dialog-content style="height: calc(100% - 7em)">
-    <f-task-overseer-report [loadOverseerAssessmentId]="overseerAssessmentId" [task]="task">
+    <f-task-overseer-report
+      [inDialog]="true"
+      [loadOverseerAssessmentId]="overseerAssessmentId"
+      [task]="task"
+    >
     </f-task-overseer-report>
   </mat-dialog-content>
   <div mat-dialog-actions style="float: right">
@@ -16,6 +20,6 @@ <h3 class="panel-title" mat-dialog-title>Overseer Assessment</h3>
         <mat-icon inline>refresh</mat-icon> Refresh
       </button>
     }
-    <button color="warn" mat-dialog-close mat-stroked-button>Cancel</button>
+    <button mat-dialog-close mat-stroked-button>Cancel</button>
   </div>
 </div>

src/app/sessions/states/sign-in/sign-in.component.html

@@ -1,15 +1,15 @@
-<section class="welcome custom-md-h-screen flex flex-row">
+<section class="welcome signed-out-shell flex flex-row">
   <f-hero-sidebar class="sidebar h-full flex-col self-start"></f-hero-sidebar>
-  <section class="content custom-md-h-screen flex flex-col">
+  <section class="content signed-out-content flex min-w-0 flex-1 flex-col">
     @if (!isLoading) {
       @if (!isLoading) {
-        <div class="m-auto w-full max-w-md p-4">
+        <div class="signed-out-card m-auto w-full max-w-md p-4">
           <div class="subcontainer">
-            <div class="wordmark flex-row place-content-start">
-              <img alt="Homepage Logo" src="../../../assets/images/logo-bw.svg" width="40px" />
+            <div class="wordmark flex-row items-center justify-center text-center">
+              <img alt="OnTrack logo" src="/assets/images/logo.svg" width="40px" />
               <p>{{ externalName.value }}</p>
             </div>
-            <h1 class="welcome-heading flex flex-row place-content-start">
+            <h1 class="welcome-heading flex flex-row justify-center text-center">
               Welcome to {{ externalName.value }}
             </h1>
             <form
@@ -27,13 +27,20 @@ <h1 class="welcome-heading flex flex-row place-content-start">
               @if (showCredentials) {
                 <mat-form-field appearance="outline" class="size-full flex-1">
                   <mat-label>Username</mat-label>
-                  <input matInput name="username" required [(ngModel)]="formData.username" />
+                  <input
+                    autocomplete="username"
+                    matInput
+                    name="username"
+                    required
+                    [(ngModel)]="formData.username"
+                  />
                 </mat-form-field>
               }
               @if (showCredentials) {
                 <mat-form-field appearance="outline" class="size-full flex-1">
                   <mat-label>Password</mat-label>
                   <input
+                    autocomplete="current-password"
                     matInput
                     name="password"
                     required

src/app/tasks/task-comments-viewer/comment-bubble-action/comment-bubble-action.component.html

@@ -3,33 +3,36 @@
     aria-label="React to this comment">
     <mat-icon>tag_faces</mat-icon>
   </button> -->
-  <mat-icon
-    aria-label="Example icon-button with a heart icon"
+  <button
+    aria-label="Reply to this comment"
+    class="bubble-action"
     matTooltip="Reply to this comment"
     matTooltipPosition="above"
     type="button"
     (click)="reply()"
   >
-    reply</mat-icon
-  >
-  <mat-icon
+    <mat-icon>reply</mat-icon>
+  </button>
+  <button
     aria-label="Edit this comment"
+    class="bubble-action"
     matTooltip="Edit this comment"
     matTooltipPosition="above"
     type="button"
     [hidden]="!comment.currentUserCanEdit"
     (click)="edit()"
   >
-    edit</mat-icon
-  >
-  <mat-icon
-    aria-label="Example icon-button with a heart icon"
+    <mat-icon>edit</mat-icon>
+  </button>
+  <button
+    aria-label="Delete this comment"
+    class="bubble-action"
     matTooltip="Delete this comment"
     matTooltipPosition="above"
     type="button"
     [hidden]="!comment.currentUserCanDelete"
     (click)="delete()"
   >
-    delete</mat-icon
-  >
+    <mat-icon>delete</mat-icon>
+  </button>
 </div>