Use LiveAnnouncer for audit actions

src/app/dars/audit/audit.component.ts

@@ -45,17 +45,20 @@ export class DarsAuditComponent implements OnInit {
     'degreeCreditsValue',
     'courseCreditsValue',
   ];
-  constructor(private announcer: LiveAnnouncer, public symbol: AuditSymbolsService) { }
+  constructor(
+    private announcer: LiveAnnouncer,
+    public symbol: AuditSymbolsService,
+  ) {}
   public announce(btn) {
     btn === 'expand'
       ? this.announcer.announce(
-        'Expanded All Requirements Sections',
-        'assertive',
-      )
+          'Expanded All Requirements Sections',
+          'assertive',
+        )
       : this.announcer.announce(
-        'Collapsed All Requirements Sections',
-        'assertive',
-      );
+          'Collapsed All Requirements Sections',
+          'assertive',
+        );
   }
 
   // Checking for window scroll events
@@ -68,7 +71,7 @@ export class DarsAuditComponent implements OnInit {
 
   public ngOnInit() {
     // Filter out LEGEND from audit data
-    this.audit.requirements = this.audit.requirements.filter(function (
+    this.audit.requirements = this.audit.requirements.filter(function(
       requirement,
     ) {
       return requirement.requirementName !== 'LEGEND';
@@ -81,6 +84,7 @@ export class DarsAuditComponent implements OnInit {
       top: 0,
       behavior: 'smooth',
     });
+    this.announcer.announce('Scrolling window to the top', 'assertive');
   }
 
   public openAllRequirements() {

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

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

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

@@ -53,6 +53,8 @@ $black: #000000;
   .mat-paginator {
     font-size: 14px;
     background-color: #f5f5f5;
+    border-right: solid 1px #e3e3e3;
+    border-left: solid 1px #e3e3e3;
     border-bottom: solid 1px #e3e3e3;
     border-top-width: 0;
     border-radius: 0 0 5px 5px;

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

@@ -11,6 +11,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Observable, combineLatest } from 'rxjs';
 import { PageEvent } from '@angular/material/paginator';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 interface MinimumAuditMetadata {
   darsAuditRunDate: AuditMetadata['darsAuditRunDate'];
@@ -48,6 +49,13 @@ export class DarsMetadataTableComponent implements OnInit {
     'status',
     'actions',
   ];
+  constructor(private announcer: LiveAnnouncer) {}
+  onPaginationChange(event) {
+    this.announcer.announce(
+      `Switched page of the ${this.title} table`,
+      'assertive',
+    );
+  }
 
   public static sortMetadata(metadata: MinimumAuditMetadata[]) {
     return metadata.sort((a, b) => {

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

@@ -27,6 +27,7 @@ import { DegreePlan } from '@app/core/models/degree-plan';
 import { MatDialogRef } from '@angular/material';
 import { RawTermCode } from '@app/degree-planner/shared/term-codes/without-era';
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
+import { MatSnackBar } from '@angular/material';
 
 const inclusiveRange = (from: number, to: number) => {
   const range: number[] = [];
@@ -112,6 +113,7 @@ export class NewDegreeAuditDialogComponent implements OnInit {
     private degreePlannerApi: DegreePlannerApiService,
     private store: Store<GlobalState>,
     private dialogRef: MatDialogRef<NewDegreeAuditDialogComponent>,
+    private snackBar: MatSnackBar,
   ) {
     this.chosenProgram = fb.control('', Validators.required);
 
@@ -334,5 +336,6 @@ export class NewDegreeAuditDialogComponent implements OnInit {
       whichEnrolledCoursesIncluded: this.includeCoursesFrom(''),
       fixedCredits: this.fixedCredits(),
     });
+    this.snackBar.open('New Degree Audit has been requested');
   }
 }

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

@@ -25,6 +25,7 @@ import { DegreePlan } from '@app/core/models/degree-plan';
 import { MatDialogRef } from '@angular/material';
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
 import { RawTermCode } from '@app/degree-planner/shared/term-codes/without-era';
+import { MatSnackBar } from '@angular/material';
 
 const inclusiveRange = (from: number, to: number) => {
   const range: number[] = [];
@@ -113,6 +114,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
       NewWhatIfAuditDialogComponent,
       NewWhatIfAuditFields
     >,
+    private snackBar: MatSnackBar,
   ) {
     this.chosenProgram = fb.group({
       institution: fb.control('', Validators.required),
@@ -310,5 +312,6 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
       whichEnrolledCoursesIncluded: this.includeCoursesFrom(''),
       fixedCredits: this.fixedCredits(),
     });
+    this.snackBar.open("New 'what-if' Audit has been requested");
   }
 }