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 b6f2c737b175fb1c9dfdc27c14fcf6c40f157ee6..b18a46ed8bb979274f258c20b118b53a575bbf70 100644
--- a/src/app/degree-planner/course-search/course-search.component.html
+++ b/src/app/degree-planner/course-search/course-search.component.html
@@ -47,6 +47,7 @@
cdkFocusInitial
id="keyword-field"
matInput
+ aria-label="Keyword, number"
placeholder="Keyword, number"
formControlName="search"
value=""/>
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
index f3ccc81c07226b411a5ab2ff089e22052480f47d..e50a9d8ce81fcb82916ba9d122130be648be29ec 100644
--- a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
@@ -28,6 +28,7 @@
<input
cdkFocusInitial
matInput
+ aria-label="Plan name"
placeholder="Name"
formControlName="planName"
cdkFocusInitial/>
@@ -41,6 +42,7 @@
<input
cdkFocusInitial
matInput
+ aria-label="Plan name"
placeholder="Name"
formControlName="planName"
cdkFocusInitial/>
diff --git a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html
index 5bb1ad07b3496fc42b13e16c261325400ae0ad9c..5eee185c8a66e0a45f26f627fda05651b864743b 100644
--- a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html
+++ b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html
@@ -16,7 +16,6 @@
>clear</i>
</button>
</mat-toolbar>
-
<mat-dialog-content id="note-dialog" class="mat-typography dialog-with-toolbar">
<div fxLayout="column" fxLayoutAlign="none" fxLayoutGap="10px">
<div id="note-content">
@@ -28,11 +27,11 @@
matInput
mat-autosize="true"
resizeToFitContent
+ aria-label="Note input"
placeholder="i.e. Studying abroad">
</textarea>
<mat-hint align="start">
- <strong
- >Your note can be up to {{ MAX_LENGTH }} characters long</strong>
+ Note can be up to {{ MAX_LENGTH }} characters long
</mat-hint>
<mat-hint align="end" *ngIf="form.value.textarea?.length > 0">
{{ form.value.textarea.length }} / {{ MAX_LENGTH }}
@@ -44,8 +43,8 @@
<button
mat-button
class="btn-secondary"
- mat-dialog-close
- aria-label="Close note dialog">
+ aria-label="Cancel"
+ mat-dialog-close>
Cancel
</button>
<button
diff --git a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.scss b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.scss
index 991ece74fe2a86c3d6e4237921d6a7f788be7ff7..a284f781544e020efa27509d5b27a2bec52cad03 100644
--- a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.scss
+++ b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.scss
@@ -3,6 +3,9 @@
mat-form-field {
display: block;
}
+ .mat-dialog-content {
+ padding-bottom: 4px;
+ }
}
#delete-note-section {
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 9fe307d6c518a658274332391bffd001c764e4b1..274ff4953c68f0c7d364b0701b71777b6de12980 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
@@ -15,7 +15,7 @@
[cdkDragDisabled]="mobileView.matches"
[cdkDragData]="course">
<div class="course-wrapper-inner">
- <cse-course-item [course]="course" type="saved" class="course-favorite"></cse-course-item>
+ <cse-course-item [course]="course" type="saved" class="course-favorite" aria-describedby="saved-courses"></cse-course-item>
</div>
</div>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.html b/src/app/degree-planner/shared/course-item/course-item.component.html
index 8b06f5f8c5104532c77008c674b841d53a6a585f..4360f7764b0a731a236dcd87a9f2b26e3900dc06 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.html
+++ b/src/app/degree-planner/shared/course-item/course-item.component.html
@@ -94,7 +94,7 @@
Course details
</button>
<button mat-menu-item [matMenuTriggerFor]="academicYearsGroup" aria-label="Select to move this course to a different term">
- Move
+ Move to
</button>
<mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
<ng-template matMenuContent>
@@ -123,15 +123,14 @@
</mat-menu>
</div>
<div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
- <p>{{ course.grade || ' ' }}</p>
+ <p attr.aria-label="grade {{ course.grade }}">{{ course.grade || ' ' }}</p>
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<p *ngIf="type !== 'saved'"
class="course-credits"
- cdkFocusRegionEnd
- aria-label="Total number of credits in term">
+ cdkFocusRegionEnd>
<ng-container *ngIf="course.credits !== undefined || course.creditRange !== undefined">
- {{ course.credits ? course.credits : course.creditRange }} Cr
+ <span attr.aria-label="{{ course.credits ? course.credits : course.creditRange }} credits">{{ course.credits ? course.credits : course.creditRange }} Cr</span>
</ng-container>
</p>
</div>
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
index be03520a375a26db44e18580124b2a81a9ac84c6..4a80315c6a4c93daa31e9c13af23807a22ae5a4b 100644
--- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
@@ -57,8 +57,9 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div>
- <button mat-button class="sidenav-link-btn" (click)="print()">
+ <button mat-button aria-label="Print degree plan" class="sidenav-link-btn" (click)="print()">
<i
+ aria-hidden="true"
class="material-icons"
alt="Print plan"
matTooltip="Print plan"
@@ -80,8 +81,9 @@
</svg>
Download PDF
</a>
- <button mat-button class="sidenav-link-btn" (click)="onCreatePlanClick()">
+ <button mat-button aria-label="Add degree plan" class="sidenav-link-btn" (click)="onCreatePlanClick()">
<i
+ aria-hidden="true"
class="material-icons"
alt="Add degree plan"
matTooltip="Add degree plan"
@@ -89,7 +91,7 @@
>add_box</i>
Add Degree Plan
</button>
- <button mat-button class="sidenav-link-btn" (click)="onAddAcademicYear()">
+ <button mat-button aria-label="Add academic year" class="sidenav-link-btn" (click)="onAddAcademicYear()">
<svg
aria-labelledby="addAcademicYearTitle addAcademicYearDesc"
role="img"
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 45b054228fcdd221037e850743a173710b4ab0cf..72dbdf39f1b6d7841d8a20a146dd19e74ca290fd 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,4 +1,4 @@
-<ng-template #enrolled>
+<ng-template #enrolled id="enrolled-courses">
<div class="course-list-wrapper">
<div class="course-list">
<div class="course-list-inner">
@@ -12,6 +12,7 @@
</ng-container>
<cse-course-item
+ aria-describedby="enrolled-courses"
*ngFor="let course of enrolledCourses"
type="course"
[disabled]="true"
@@ -24,7 +25,7 @@
</div>
</ng-template>
-<ng-template #planned>
+<ng-template #planned id="planned-courses">
<div class="course-list-wrapper">
<div
class="course-list"
@@ -58,6 +59,7 @@
*ngFor="let course of plannedCourses"
>
<cse-course-item
+ aria-describedby="planned-courses"
type="course"
[course]="course"
[era]="(term$ | async).era"
@@ -71,6 +73,7 @@
<div class="add-new-wrapper" *ngIf="(term$ | async).era !== 'past'">
<button
mat-raised-button
+ attr.aria-label="Add course to {{ termCode | getTermDescription }}"
class="add-course-button"
(click)="openCourseSearch()"
>
@@ -92,13 +95,13 @@
class="term-header"
fxLayoutAlign="space-between center"
>
- <h2 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h2>
+ <h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
<div fxLayout="row" fxLayoutAlign="space-between center">
<p class="text-right semi-bold credits">
- <span *ngIf="visibleCredits === 'planned'">
+ <span *ngIf="visibleCredits === 'planned'" attr.aria-label="{{ plannedCredits }} credits">
{{ plannedCredits }} Cr
</span>
- <span *ngIf="visibleCredits === 'enrolled'">
+ <span *ngIf="visibleCredits === 'enrolled'" attr.aria-label="{{ enrolledCredits }} credits">
{{ enrolledCredits }} Cr
</span>
</p>
@@ -164,10 +167,10 @@
<!-- If this term is an active term -->
<ng-container *ngIf="(term$ | async).era === 'active'">
<mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
- <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'">
+ <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" aria-label="In progress courses">
<ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
</mat-tab>
- <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
+ <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
<ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
</mat-tab>
</mat-tab-group>
@@ -176,10 +179,10 @@
<!-- If this term is a past term -->
<ng-container *ngIf="(term$ | async).era === 'past'">
<mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
- <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'">
+ <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" aria-label="Completed courses">
<ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
</mat-tab>
- <mat-tab [label]="'Cart (' + plannedCourses.length + ')'">
+ <mat-tab [label]="'Cart (' + plannedCourses.length + ')'" aria-label="Cart courses">
<ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
</mat-tab>
</mat-tab-group>
diff --git a/src/app/degree-planner/year-container/year-container.component.html b/src/app/degree-planner/year-container/year-container.component.html
index f93e73151574bd48c2060b09de22b1a42ebcca2b..ab9ed4a8913de9e3d0c7efbdd597cd84f19328f7 100644
--- a/src/app/degree-planner/year-container/year-container.component.html
+++ b/src/app/degree-planner/year-container/year-container.component.html
@@ -5,7 +5,7 @@
(closed)="collapseYear()">
<mat-expansion-panel-header>
<mat-panel-title>
- {{ yearCode | academicYearState }}
+ <h2>{{ yearCode | academicYearState }}</h2>
</mat-panel-title>
</mat-expansion-panel-header>
<div
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
index 6b6452e7678df4e1520e33191261f40cbef62b47..55205c7668fe3008854c2627d9f93e4bf03f032d 100644
--- a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
+++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -33,6 +33,7 @@
matInput
mat-autosize="true"
resizeToFitContent
+ aria-label="Input text"
[placeholder]="inputName"/>
<mat-hint align="end" *ngIf="maxLength">
{{ inputForm.value.value.length }} / {{ maxLength }}
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 9b6e3e4981591dfe709030d2b7b3b59ef1040efb..2b3e5b8cc17cf6b3e371c1d76fc5b3a2b414bc0f 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -124,6 +124,24 @@ body {
outline: -webkit-focus-ring-color auto 5px;
}
+.mat-hint {
+ font-size: 14px;
+}
+
+.mat-form-field.mat-form-field-invalid {
+ .mat-form-field-ripple {
+ background-color: #0479a8 !important;
+ }
+ .mat-form-field-label {
+ color: #0479a8;
+ }
+}
+
+.mat-warn .mat-input-element,
+.mat-form-field-invalid .mat-input-element {
+ caret-color: #0479a8;
+}
+
.mat-icon,
.mat-icon-button,
.material-icons,
@@ -173,11 +191,15 @@ body {
}
.mat-expansion-panel-header {
- font-size: 18px;
&:focus {
outline: 2px solid #5e9ed6 !important;
outline: -webkit-focus-ring-color auto 5px !important;
}
+ h2 {
+ font-size: 18px;
+ font-weight: 400;
+ margin: 0px;
+ }
}
// Menus styles