DARS form elements - accessibility fixes

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

@@ -78,7 +78,7 @@
           <mat-tab-group mat-align-tabs="center" mat-stretch-tabs>
               <mat-tab label="Degree Audit">
                   <div class="run-audit-mobile">
-                      <p>See the progress towards your current academic plan/program.</p>
+                      <p class="mat-tagline">See the progress towards your current academic plan/program.</p>
                       <button mat-raised-button
                         aria-label="Run new degree audit"
                         [disabled]="(metadataStatus$ | async) != 'Loaded'"
@@ -106,7 +106,7 @@
 
               <mat-tab label="What-if">
                 <div class="run-audit-mobile">
-                    <p>See the progress towards a new or current academic plan/program and degree plans.</p>
+                    <p class="mat-tagline">See the progress towards a new or current academic plan/program and degree plans.</p>
                     <button
                     mat-raised-button
                     aria-label="Run new degree audit"

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

@@ -83,5 +83,5 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator [pageSize]="5"></mat-paginator>
+  <mat-paginator (page)="pageEvent = $event" [pageSize]='5' aria-live="polite" attr.aria-label="{{ pageEvent ? 'Switched to page ' + pageEvent.pageIndex + ' of ' + title + ' table.' : '' }}"></mat-paginator>
 </div>

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

@@ -54,6 +54,7 @@ $black: #000000;
   }
 
   .mat-paginator {
+    font-size: 14px;
     background-color: #f5f5f5;
     border-bottom: solid 1px #e3e3e3;
     border-top-width: 0;

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

@@ -16,6 +16,7 @@ import { AuditMetadata } from '../models/audit-metadata';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Observable, Subscription } from 'rxjs';
+import { PageEvent } from '@angular/material/paginator';
 
 export class AuditStatusMessage {
   status: string;
@@ -40,7 +41,7 @@ export class DarsMetadataTableComponent implements OnInit, OnDestroy {
   @Output() buttonClick = new EventEmitter();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
-
+  public pageEvent: PageEvent;
   public dataSource: MatTableDataSource<AuditMetadata>;
   public messageSub: Subscription;
   public newMessage: AuditStatusMessage;

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html

@@ -128,8 +128,9 @@
                     </label>
                     <mat-form-field>
                       <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
-                      <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                      <mat-select attr.aria-label="{{ credit }} credits" formControlName="credits" aria-labelledby="credits-range-{{ course.id }}" aria-labelledby="credits-range-{{ course.id }}">
                         <mat-option
+                        attr.aria-label="{{ credit }} credits"
                         *ngFor="let credit of course.range"
                         [value]="credit">
                         {{ credit }} cr

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html

@@ -147,8 +147,9 @@
               </label>
               <mat-form-field>
                 <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
-                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}">
+                <mat-select formControlName="credits" aria-labelledby="credits-range-{{ course.id }}" aria-labelledby="credits-range-{{ course.id }}">
                   <mat-option
+                    attr.aria-label="{{ credit }} credits"
                     *ngFor="let credit of course.range"
                     [value]="credit">
                     {{ credit }} cr

src/app/degree-planner/course-search/course-search.component.html

@@ -95,6 +95,7 @@
     </div>
 
     <div
+      aria-live="polite"
       cdkDropList
       id="queried-courses-list"
       [cdkDropListData]="queriedCourses"

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html

 <div class="term-container" aria-label="List of saved for later courses" id="saved-courses">
   <div
     class="course-list"
+    aria-live="polite"
     cdkDropList
     [cdkDropListData]="courses$ | async"
     [cdkDropListConnectedTo]="dropZoneIds$ | async"

src/app/degree-planner/term-container/term-container.component.html

@@ -28,6 +28,7 @@
 <ng-template #planned id="planned-courses">
   <div class="course-list-wrapper">
     <div
+      aria-live="polite"
       class="course-list"
       cdkDropList
       id="term-{{ termCode }}"

src/assets/sass/general.scss

@@ -138,10 +138,6 @@ main {
   }
 }
 
-.mat-header-cell {
-  font-size: 14px;
-}
-
 .mat-form-field.mat-form-field-invalid {
   .mat-form-field-ripple {
     background-color: #0479a8 !important;
@@ -364,6 +360,10 @@ main {
   border-color: #0479a8 !important;
 }
 
+.mat-header-cell {
+  font-size: 14px !important;
+}
+
 .mat-radio-button.mat-accent .mat-radio-inner-circle,
 .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple {
   background-color: mat-color($my-app-primary) !important;
@@ -376,6 +376,11 @@ main {
   color: mat-color($my-app-primary) !important;
 }
 
+.dars-table-wrapper caption,
+.mat-tagline {
+  font-size: 16px;
+}
+
 // Media queries
 
 // To be removed after DARS banner goes away