Audit details view - accessibility fixes

src/app/dars/audit-legend/audit-legend.component.html

@@ -6,12 +6,12 @@
     <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
 
     <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Symbol</th>
       <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Description</th>
       <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
     </ng-container>
   </table>
@@ -23,12 +23,12 @@
     <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
 
     <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Symbol</th>
       <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Description</th>
       <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
     </ng-container>
   </table>
@@ -40,12 +40,12 @@
     <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
 
     <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef>Symbol</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Symbol</th>
       <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef>Description</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Description</th>
       <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
     </ng-container>
   </table>
@@ -57,12 +57,12 @@
       <tr mat-row *matRowDef="let row; columns: auditCourseColumns;"></tr>
 
       <ng-container matColumnDef="symbol">
-        <th mat-header-cell *matHeaderCellDef>Symbol</th>
+        <th mat-header-cell *matHeaderCellDef scope="col">Symbol</th>
         <td mat-cell *matCellDef="let legend">{{ legend.symbol }}</td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef>Description</th>
+        <th mat-header-cell *matHeaderCellDef scope="col">Description</th>
         <td mat-cell *matCellDef="let legend">{{ legend.description }}</td>
       </ng-container>
     </table>

src/app/dars/audit/audit.component.html

@@ -16,26 +16,26 @@
       </div>
     </div>
 
-    <h3 class="text-align-center">
+    <h1 class="text-align-center">
       {{audit.header.clientDefinedMessage}}
       <br />
       {{audit.header.degreeProgramTitle1}}
       <br />
       {{audit.header.degreeProgramTitle2}}
-    </h3>
+    </h1>
 
   </header>
 
   <section class="audit-section" class="audit-top-section">
     <div *ngIf="audit.topSection.academicPlansSection && audit.topSection.academicPlansSection.planList.length > 0">
-      <h4>Academic Plans:</h4>
+      <h2>Academic Plans:</h2>
       <ng-contrainer *ngFor="let plan of audit.topSection.academicPlansSection.planList">
         <p class="audit-academic-plan">{{plan.planTypeLabel}}: {{plan.declareDate}} {{plan.planCodeNumber}} {{plan.planCodeDescription}}</p>
       </ng-contrainer>
     </div>
 
     <div *ngIf="audit.topSection.advisorSection && audit.topSection.advisorSection.advisorNames">
-      <h4>{{audit.topSection.advisorSection.advisorLabel}}:</h4>
+      <h2>{{audit.topSection.advisorSection.advisorLabel}}:</h2>
 
       <ng-container *ngFor="let name of audit.topSection.advisorSection.advisorNames">
         <p class="audit-advisor-name">{{name | auditFormatName}}</p>
@@ -43,7 +43,7 @@
     </div>
 
     <div *ngIf="audit.topSection.degreesSection && audit.topSection.degreesSection.degrees.length > 0">
-      <h4>{{audit.topSection.degreesSection.label}}:</h4>
+      <h2>{{audit.topSection.degreesSection.label}}:</h2>
       <div *ngFor="let degree of audit.topSection.degreesSection.degrees" class="audit-degree">
         <p class="audit-degree-awarded">Awarded: {{degree.awardedDate}}</p>
         <p class="audit-degree-major">Major: {{degree.major}} {{degree.degreeCode}}</p>
@@ -61,22 +61,22 @@
         <tr mat-row *matRowDef="let row; columns: highSchoolUnitsSection;"></tr>
 
         <ng-container matColumnDef="LANG">
-          <th mat-header-cell *matHeaderCellDef>Lang</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Language</th>
           <td mat-cell *matCellDef="let courses">{{courses.LANG}}</td>
         </ng-container>
 
         <ng-container matColumnDef="MATH">
-          <th mat-header-cell *matHeaderCellDef>Math</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Math</th>
           <td mat-cell *matCellDef="let courses">{{courses.MATH}}</td>
         </ng-container>
 
         <ng-container matColumnDef="SCIENCE">
-          <th mat-header-cell *matHeaderCellDef>Science</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Science</th>
           <td mat-cell *matCellDef="let courses">{{courses.SCIENCE}}</td>
         </ng-container>
 
         <ng-container matColumnDef="SOC STUD">
-          <th mat-header-cell *matHeaderCellDef>Soc Stud</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Social Studies</th>
           <td mat-cell *matCellDef="let courses">{{courses['SOC STUD']}}</td>
         </ng-container>
       </table>
@@ -90,25 +90,25 @@
         <tr mat-footer-row *matFooterRowDef="advancedStandingCredits"></tr>
 
         <ng-container matColumnDef="dateValue">
-          <th mat-header-cell *matHeaderCellDef>Date</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Date</th>
           <td mat-cell *matCellDef="let course">{{course.dateValue}}</td>
           <td mat-footer-cell *matFooterCellDef class="bold">Total</td>
         </ng-container>
 
         <ng-container matColumnDef="typeValue">
-          <th mat-header-cell *matHeaderCellDef>Type</th>
+          <th mat-header-cell *matHeaderCellDef scope="col">Type</th>
           <td mat-cell *matCellDef="let course">{{course.typeValue}}</td>
           <td mat-footer-cell *matFooterCellDef></td>
         </ng-container>
 
         <ng-container matColumnDef="degreeCreditsValue">
-          <th mat-header-cell *matHeaderCellDef class="text-align-right">Deg</th>
+          <th mat-header-cell *matHeaderCellDef class="text-align-right" scope="col">Degree</th>
           <td mat-cell *matCellDef="let course" class="text-align-right">{{course.degreeCreditsValue}}</td>
           <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection?.totals.degreeCreditsValue}}</td>
         </ng-container>
 
         <ng-container matColumnDef="courseCreditsValue">
-          <th mat-header-cell *matHeaderCellDef class="text-align-right">Crse</th>
+          <th mat-header-cell *matHeaderCellDef class="text-align-right" scope="col">Course</th>
           <td mat-cell *matCellDef="let course" class="text-align-right">{{course.courseCreditsValue}}</td>
           <td mat-footer-cell *matFooterCellDef class="bold text-align-right">{{audit.topSection.advancedStandingCreditsSection?.totals.courseCreditsValue}}</td>
         </ng-container>
@@ -117,9 +117,10 @@
   </section>
 
   <section class="audit-section">
+    <h3>Degree Audit Requirements</h3>
     <div class="audit-section-controles">
-      <button mat-stroked-button color="primary" (click)="openAllRequirements()">Open All Sections</button>
-      <button mat-stroked-button color="primary" (click)="closeAllRequirements()">Close All Sections</button>
+      <button mat-stroked-button color="primary" (click)="openAllRequirements()" aria-label="Open All Requirements Sections">Open All Sections</button>
+      <button mat-stroked-button color="primary" (click)="closeAllRequirements()" aria-label="Close All Requirements Sections">Close All Sections</button>
     </div>
 
     <div>
@@ -143,12 +144,16 @@
                     <ng-container [ngSwitch]="requirement.status.status">
 
                       <ng-container *ngSwitchCase="'OK'">
-                        <mat-icon class="requirement-icon no-icon">check_circle</mat-icon>
+                        <mat-icon class="requirement-icon no-icon"
+                        matTooltip="Requirement complete"
+                        matTooltipPosition="above">check_circle</mat-icon>
                         <span class="cdk-visually-hidden">Requirement complete</span>
                       </ng-container>
 
                       <ng-container *ngSwitchCase="'NO'">
-                        <mat-icon class="requirement-icon no-icon">cancel</mat-icon>
+                        <mat-icon class="requirement-icon no-icon"
+                        matTooltip="Requirement not complete"
+                        matTooltipPosition="above">cancel</mat-icon>
                         <span class="cdk-visually-hidden">Requirement not complete</span>
                       </ng-container>
 
@@ -157,7 +162,9 @@
                       </ng-container>
 
                       <ng-container *ngSwitchDefault>
-                        <mat-icon class="requirement-icon no-icon">lens</mat-icon>
+                        <mat-icon class="requirement-icon no-icon"
+                        matTooltip="Requirement uses in-progress credit/courses"
+                        matTooltipPosition="above">lens</mat-icon>
                         <span class="cdk-visually-hidden">Requirement uses in-progress credit/courses</span>
                       </ng-container>
 
@@ -186,32 +193,32 @@
 
 
                           <ng-container matColumnDef="term">
-                            <th mat-header-cell *matHeaderCellDef>Term</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Term</th>
                             <td mat-cell *matCellDef="let course">{{course.term}}</td>
                           </ng-container>
 
                           <ng-container matColumnDef="course">
-                            <th mat-header-cell *matHeaderCellDef>Course</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Course</th>
                             <td mat-cell *matCellDef="let course">{{course.course}}</td>
                           </ng-container>
 
                           <ng-container matColumnDef="credits">
-                            <th mat-header-cell *matHeaderCellDef>Credits</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Credits</th>
                             <td mat-cell *matCellDef="let course">{{course.credits}}</td>
                           </ng-container>
 
                           <ng-container matColumnDef="grade">
-                            <th mat-header-cell *matHeaderCellDef>Grade</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Grade</th>
                             <td mat-cell *matCellDef="let course">{{course.grade}}</td>
                           </ng-container>
 
                           <ng-container matColumnDef="title">
-                            <th mat-header-cell *matHeaderCellDef>Course Title</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Course Title</th>
                             <td mat-cell *matCellDef="let course">{{course.courseTitle}}</td>
                           </ng-container>
 
                           <ng-container matColumnDef="note">
-                            <th mat-header-cell *matHeaderCellDef>Course Note</th>
+                            <th mat-header-cell *matHeaderCellDef scope="col">Course Note</th>
                             <td mat-cell *matCellDef="let course">{{course.courseNote}}</td>
                           </ng-container>
                       </table>

src/app/dars/audit/audit.component.scss

@@ -7,7 +7,7 @@ $black: #000000;
   padding: 20px 100px;
 
   header {
-    h3 {
+    h1 {
       font-weight: 500;
       font-size: 1.2rem;
     }
@@ -38,6 +38,11 @@ $black: #000000;
   border-bottom: solid 1px #7d7a7a;
   padding: 20px 75px;
 
+  h3 {
+    text-align: center;
+    font-size: 1rem;
+  }
+
   &:last-child {
     border-bottom: none;
   }
@@ -285,8 +290,9 @@ $black: #000000;
   justify-content: space-between;
   padding: 20px 75px;
 
-  h4 {
+  h2 {
     margin-bottom: 10px;
+    font-size: 1rem;
   }
 
   p {

src/app/dars/metadata-table/metadata-table.component.html

@@ -15,7 +15,7 @@
     <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
     <!-- View Column -->
     <ng-container matColumnDef="view">
-      <th mat-header-cell *matHeaderCellDef></th>
+      <th mat-header-cell *matHeaderCellDef scope="col"></th>
       <td mat-cell *matCellDef="let audit">
         <!-- TODO: While an audit is in progress the route is null which causes an error '|| 0' is a working fix -->
         <a class="mat-stroked-button mat-primary" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}}  Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
@@ -24,31 +24,31 @@
 
     <!-- School Column -->
     <ng-container matColumnDef="school">
-      <th mat-header-cell *matHeaderCellDef>School/College</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">School/College</th>
       <td mat-cell *matCellDef="let audit">{{audit.darsInstitutionCodeDescription | schoolOrCollege }}</td>
     </ng-container>
 
     <!-- Program Column -->
     <ng-container matColumnDef="program">
-      <th mat-header-cell *matHeaderCellDef>Program of Study</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Program of Study</th>
       <td mat-cell *matCellDef="let audit" class="program-cell">{{(audit.darsDegreeProgramDescription || '').toLowerCase()}}</td>
     </ng-container>
 
     <!-- Honors Column -->
     <ng-container matColumnDef="honors">
-      <th mat-header-cell *matHeaderCellDef>Honors Status</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Honors Status</th>
       <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
     </ng-container>
 
     <!-- Plan Column -->
     <ng-container matColumnDef="plan">
-      <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Degree Plan</th>
       <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
     </ng-container>
 
     <!-- Status Column -->
     <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef>Status</th>
+      <th mat-header-cell *matHeaderCellDef scope="col">Status</th>
       <td mat-cell *matCellDef="let audit">
         <div *ngIf="audit.darsStatusOfDegreeAuditRequest == 'Done' || audit.darsStatusOfDegreeAuditRequest.indexOf('Failed') > -1; else loading">
           <div>{{audit.darsStatusOfDegreeAuditRequest}}</div>
@@ -62,7 +62,7 @@
 
     <!-- Status Column -->
     <ng-container matColumnDef="download">
-      <th mat-header-cell *matHeaderCellDef></th>
+      <th mat-header-cell *matHeaderCellDef scope="col"></th>
       <td mat-cell *matCellDef="let audit">
         <a mat-stroked-button color="primary" href="/api/darspdfservice?reportId={{ audit?.darsDegreeAuditReportId }}" target="_blank">
           <mat-icon>vertical_align_bottom</mat-icon>

src/assets/sass/general.scss

@@ -138,6 +138,10 @@ main {
   }
 }
 
+.mat-header-cell {
+  font-size: 14px;
+}
+
 .mat-form-field.mat-form-field-invalid {
   .mat-form-field-ripple {
     background-color: #0479a8 !important;