Skip to content
Snippets Groups Projects
Commit 693c5c3b authored by Paulina Nogal's avatar Paulina Nogal
Browse files

DARS form elements - accessibility fixes

parent 354be669
No related branches found
No related tags found
No related merge requests found
Showing with 22 additions and 10 deletions
......@@ -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"
......
......@@ -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>
......@@ -54,6 +54,7 @@ $black: #000000;
}
.mat-paginator {
font-size: 14px;
background-color: #f5f5f5;
border-bottom: solid 1px #e3e3e3;
border-top-width: 0;
......
......@@ -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;
......
......@@ -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
......
......@@ -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
......
......@@ -95,6 +95,7 @@
</div>
<div
aria-live="polite"
cdkDropList
id="queried-courses-list"
[cdkDropListData]="queriedCourses"
......
<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"
......
......@@ -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 }}"
......
......@@ -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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment