diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 1f670a0e1df6eec5f57b4ea62825346472f8ecc9..22fa601a9badb4ea13cae8f34a0cc4f03b47fe63 100644
--- a/src/app/dars/dars-view/dars-view.component.html
+++ b/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"
diff --git a/src/app/dars/metadata-table/metadata-table.component.html b/src/app/dars/metadata-table/metadata-table.component.html
index db3ea7680c15e63abb9de4898f9526411cdd218d..2fd60502eb7aa240c580eff90bd870bf611466d5 100644
--- a/src/app/dars/metadata-table/metadata-table.component.html
+++ b/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>
diff --git a/src/app/dars/metadata-table/metadata-table.component.scss b/src/app/dars/metadata-table/metadata-table.component.scss
index 1de8fdcf9e6d2163d6a850c7dde79d4c38738cfb..e9ae13f9c90b1a3c1c3d9d00cccce0c156aad494 100644
--- a/src/app/dars/metadata-table/metadata-table.component.scss
+++ b/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;
diff --git a/src/app/dars/metadata-table/metadata-table.component.ts b/src/app/dars/metadata-table/metadata-table.component.ts
index c519b26973141a6e9e992405528994baf5d80e00..c69e0099ce19724b347e793ef92b99fe161e3a2b 100644
--- a/src/app/dars/metadata-table/metadata-table.component.ts
+++ b/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;
diff --git a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
index 647c074c47c6d9da9793d2759ad867d65d81e6db..a346b57991e02f073b3499de32289aef8520e8f6 100644
--- a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html
+++ b/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
diff --git a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
index 4d3210a8584a558c21ae91293f4587670e663035..c09cefc002ecac679a519645405edc034ed37e3d 100644
--- a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html
+++ b/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
diff --git a/src/app/degree-planner/course-search/course-search.component.html b/src/app/degree-planner/course-search/course-search.component.html
index 711be5132679530c2212b002af813c9de224aee1..f3be3ac942782f57c9b4d73dd3641e5ec6212b02 100644
--- a/src/app/degree-planner/course-search/course-search.component.html
+++ b/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"
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
index cfcd23b6cd50c4146a7e73a63f1996172c762aab..10b9c58ba25a5c11393a2f07d5a2f5e9ebb41e47 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
+++ b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
@@ -1,6 +1,7 @@
<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"
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 1311470da251f7f697e84a758cd43ef94ad09340..eb67077b26529da36907bf630fcad79f6ee21b15 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/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 }}"
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 22347bd61365bad39da4c108c90f6ba33bd092d8..8597c6592d5f884df435b4ca0b0efbfa57b7e69b 100644
--- a/src/assets/sass/general.scss
+++ b/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