Initial accessibility testing - tabbing and aria-labels

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

@@ -132,9 +132,16 @@
 
                     <ng-container [ngSwitch]="requirement.status.status">
                       <mat-icon *ngSwitchCase="'OK'" class="requirement-icon ok-icon">check_circle</mat-icon>
+                      <span *ngSwitchCase="'OK'" class="cdk-visually-hidden">Requiremnets reached</span>
+
                       <mat-icon *ngSwitchCase="'NO'" class="requirement-icon no-icon">cancel</mat-icon>
+                      <span *ngSwitchCase="'NO'" class="cdk-visually-hidden">Requiremnets missing</span>
+
                       <mat-icon *ngSwitchCase="'NONE'" class="requirement-icon no-icon">remove_circle</mat-icon>
+                      <span *ngSwitchCase="'NONE'" class="cdk-visually-hidden">No requiremnets needed</span>
+
                       <mat-icon *ngSwitchDefault class="requirement-icon unknown-icon">lens</mat-icon>
+                      <!-- <span *ngSwitchDefault class="cdk-visually-hidden"></span> -->
                     </ng-container>
                 </div>
                 <div>

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

@@ -4,7 +4,7 @@
       <mat-icon>chevron_left</mat-icon>
       Return to audit list
     </button>
-    <button id="audit-open-window" mat-button color="primary" (click)="openNewTab()">
+    <button id="audit-open-window" mat-button aria-label="Open audit in new tab" color="primary" (click)="openNewTab()">
       Open in new tab
       <mat-icon>launch</mat-icon>
     </button>

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

@@ -2,14 +2,14 @@
   <caption>
       <div>
           <h4 class="mat-h4">{{title}}</h4>
-          <button mat-flat-button color="primary" aria-label="button" (click)="buttonClick.emit()">{{button}}</button>
+          <button mat-flat-button color="primary" attr.aria-label="{{button}}" (click)="buttonClick.emit()">{{button}}</button>
       </div>
       <p>{{tagline}}</p>
   </caption>
 
     <div *ngIf="(metadata | async).length <= 0" class="no-audits">
       <p>You don't have any {{title}}</p>
-      <button mat-stroked-button color="primary" aria-label="button" (click)="buttonClick.emit()">{{button}}</button>
+      <button mat-stroked-button color="primary" attr.aria-label="{{button}}" (click)="buttonClick.emit()">{{button}}</button>
     </div>
 
     <table mat-table *ngIf="(metadata | async).length > 0" [dataSource]="dataSource">
@@ -17,7 +17,7 @@
     <ng-container matColumnDef="view">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let audit">
-        <a class="mat-stroked-button mat-primary" [routerLink]="['/dars', audit.darsDegreeAuditReportId]">View</a>
+        <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]">View</a>
       </td>
     </ng-container>
 
@@ -65,6 +65,7 @@
       <td mat-cell *matCellDef="let audit">
         <button mat-stroked-button>
           <mat-icon>vertical_align_bottom</mat-icon>
+          <span class="cdk-visually-hidden">Download Audit PDF for {{(audit.darsDegreeProgramDescription || '').toLowerCase()}} Program of Study</span>
         </button>
       </td>
     </ng-container>