Main DARS view- accessibility fixes

src/app/dars/dars-view/dars-view.component.html

@@ -24,7 +24,7 @@
 
     <!-- METADATA LOADED -->
     <div *ngIf="(metadataStatus$ | async) === 'Loaded'">
-        <h2 id="dars-view-title" class="mat-h1">Completed Audit Requests</h2>
+        <h1 id="dars-view-title" class="mat-h1">Completed Audit Requests</h1>
 
         <div class="dars-audit-group" >
           <cse-dars-metadata-table

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

 <div id="audits" class="dars-table-wrapper mat-body">
   <caption>
       <div>
-          <h4 class="mat-h4">{{title}}</h4>
+          <h2 class="mat-h2">{{title}}</h2>
           <button mat-flat-button color="primary" attr.aria-label="{{button}}" (click)="buttonClick.emit()">{{button}}</button>
       </div>
       <p>{{tagline}}</p>
@@ -23,14 +23,6 @@
     </div>
 
     <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
-    <!-- View Column -->
-    <ng-container matColumnDef="view">
-      <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>
-      </td>
-    </ng-container>
 
     <!-- School Column -->
     <ng-container matColumnDef="school">
@@ -71,12 +63,16 @@
       </td>
     </ng-container>
 
-    <!-- Status Column -->
-    <ng-container matColumnDef="download">
-      <th mat-header-cell *matHeaderCellDef scope="col"></th>
+    <!-- Actions Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef scope="col">Actions</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>
+        <!-- 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 view-audit-btn" attr.aria-label="View full audit report for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}}  Program of Study" [routerLink]="['/dars', audit.darsDegreeAuditReportId || 0]">View</a>
+        <a mat-stroked-button color="primary" class="download-audit-pdf-btn" href="/api/darspdfservice?reportId={{ audit?.darsDegreeAuditReportId }}" target="_blank">
+          <mat-icon
+          matTooltip="Download PDF"
+          matTooltipPosition="right">vertical_align_bottom</mat-icon>
           <span class="cdk-visually-hidden">Download Audit PDF for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study</span>
         </a>
       </td>

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

 @import 'assets/material-theme.scss';
+$black: #000000;
 
 .dars-table-wrapper {
   position: relative;
@@ -7,20 +8,22 @@
 
   table {
     width: 100%;
+    margin-top: 1.2em;
     background-color: transparent;
-    border-left: solid 1px #e3e3e3;
-    border-right: solid 1px #e3e3e3;
+    tr {
+      height: 60px;
+    }
+  }
+
+  tr.mat-header-row {
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+    background-color: #fafafa;
   }
 
   caption {
     display: block;
     box-sizing: border-box;
     width: 100%;
-    padding: 20px;
-    background-color: #f5f5f5;
-    border: solid 1px #e3e3e3;
-    border-radius: 5px 5px 0 0;
-
     color: #7d7a7a;
     text-align-last: left;
 
@@ -31,11 +34,11 @@
       align-items: flex-start;
     }
 
-    h4 {
-      font-weight: bold;
+    h2 {
+      color: $black;
     }
 
-    h4,
+    h2,
     p {
       margin: 0;
       padding: 0;
@@ -52,12 +55,20 @@
 
   .mat-paginator {
     background-color: #f5f5f5;
-    border: solid 1px #e3e3e3;
+    border-bottom: solid 1px #e3e3e3;
     border-top-width: 0;
     border-radius: 0 0 5px 5px;
   }
 }
 
+.view-audit-btn {
+  margin-right: 6px;
+}
+
+.download-audit-pdf-btn {
+  border: none;
+}
+
 .no-audits {
   position: relative;
   display: block;

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

@@ -45,13 +45,12 @@ export class DarsMetadataTableComponent implements OnInit, OnDestroy {
   public messageSub: Subscription;
   public newMessage: AuditStatusMessage;
   public displayedColumns = [
-    'view',
     'school',
     'program',
     'honors',
     'plan',
     'status',
-    'download',
+    'actions',
   ];
 
   constructor(

src/assets/sass/general.scss

@@ -151,6 +151,11 @@ main {
   }
 }
 
+.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
+  .mat-form-field-label {
+  font-size: 16px;
+}
+
 .mat-warn .mat-input-element,
 .mat-form-field-invalid .mat-input-element {
   caret-color: #0479a8;