From 693c5c3b16b5bba272125d15a0a28abb57a011f5 Mon Sep 17 00:00:00 2001
From: Paulina Nogal <pnogal@wisc.edu>
Date: Thu, 15 Aug 2019 19:55:36 +0000
Subject: [PATCH] DARS form elements - accessibility fixes
---
src/app/dars/dars-view/dars-view.component.html | 4 ++--
.../metadata-table/metadata-table.component.html | 2 +-
.../metadata-table/metadata-table.component.scss | 1 +
.../dars/metadata-table/metadata-table.component.ts | 3 ++-
.../new-degree-audit-dialog.component.html | 3 ++-
.../new-what-if-audit-dialog.component.html | 3 ++-
.../course-search/course-search.component.html | 1 +
.../saved-for-later-container.component.html | 1 +
.../term-container/term-container.component.html | 1 +
src/assets/sass/general.scss | 13 +++++++++----
10 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
index 1f670a0..22fa601 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 db3ea76..2fd6050 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 1de8fdc..e9ae13f 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 c519b26..c69e009 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 647c074..a346b57 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 4d3210a..c09cefc 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 711be51..f3be3ac 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 cfcd23b..10b9c58 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 1311470..eb67077 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 22347bd..8597c65 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
--
GitLab