From 0769887678a8cd8627d18b62ae124270ffbd7d44 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Mon, 17 Jun 2019 08:32:06 -0500
Subject: [PATCH] Accessibility fixes
---
src/app/app.component.html | 2 +-
.../degree-planner-view.component.html | 10 ++--
.../saved-for-later-container.component.html | 10 ++--
.../sidenav-menu-item.component.html | 17 +++++--
.../term-container.component.html | 48 ++++++++++++-------
.../term-container.component.scss | 3 +-
.../course-details.component.html | 6 +--
7 files changed, 63 insertions(+), 33 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 68c64db..d2cfbfe 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="alert-banner">
+<div class="alert-banner" tabindex="0">
<p><md-icon class="material-icons error" role="img" aria-hidden="true">warning</md-icon> Course Search & Enroll will not be available from June 28 at 4:00pm to July 8 at 8:00am due to the <a href="https://upgrade.sis.wisc.edu/" target="_blank">SIS Upgrade.</a></p>
</div>
<header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
index 202cba5..3bc8f5d 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
@@ -24,9 +24,9 @@
<mat-form-field class="degree-plans-form-field" floatLabel="always">
<mat-label>Degree Plans</mat-label>
<mat-select
- aria-label="Degree plans list"
+ attr.aria-label="Degree plans list - {{ degreePlan.name }} selected"
[disabled]="isLoadingPlan$ | async"
- placeholder="Degree Plans"
+ placeholder="Degree Plans list"
class="degree-plan-selector"
[value]="degreePlan.roadmapId"
[disableOptionCentering]="true"
@@ -37,6 +37,7 @@
class="primary-star"
*ngIf="degreePlan.primary"
alt="Primary degree plan star"
+ aria-label="Primary plan selected"
matTooltip="Primary plan"
matTooltipPosition="above"
>star_rate</mat-icon>
@@ -47,13 +48,16 @@
<mat-option
*ngFor="let degreePlan of (allDegreePlans$ | async)"
[value]="degreePlan.roadmapId">
- <mat-icon
+ <mat-icon
+ id="primary-plan-star"
class="primary-star"
*ngIf="degreePlan.primary"
+ aria-label="Primary plan"
alt="Primary degree plan star"
matTooltip="Primary plan"
matTooltipPosition="above"
>star_rate</mat-icon>
+ <span *ngIf="degreePlan.primary" aria-labelledby="primary-plan-star"></span>
<span class="plan-name">{{ degreePlan.name }}</span>
</mat-option>
</mat-select>
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 072b31a..f8afdb5 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,10 @@
-<div class="term-container">
- <div
+<div class="term-container"
+ aria-label="List of saved for later courses"
id="saved-courses"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
+ <div
class="course-list"
cdkDropList
[cdkDropListData]="courses$ | async"
@@ -15,7 +19,7 @@
[cdkDragDisabled]="mobileView.matches"
[cdkDragData]="course">
<div class="course-wrapper-inner">
- <cse-course-item role="button" aria-labelledby="saved-courses" [course]="course" type="saved" class="course-favorite"></cse-course-item>
+ <cse-course-item role="button" aria-describedby="saved-courses" [course]="course" type="saved" class="course-favorite"></cse-course-item>
</div>
</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 a32565d..200d70e 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
@@ -1,13 +1,18 @@
<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
- <mat-expansion-panel id="course-keys-container" expanded="true">
+ <mat-expansion-panel id="course-keys-container" expanded="true" role="group" aria-labelledby="course-key-list">
<mat-expansion-panel-header>
<mat-panel-title>
<h3>Course key</h3>
</mat-panel-title>
</mat-expansion-panel-header>
- <mat-list id="course-key-list" role="list">
+ <mat-list id="course-key-list" role="list"
+ aria-label="Course key List"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
<mat-list-item role="listitem">
<i
+ aria-hidden="true"
class="material-icons in-progress-icon"
alt="Course is in progress">
check_circle
@@ -16,6 +21,7 @@
</mat-list-item>
<mat-list-item role="listitem">
<i
+ aria-hidden="true"
class="material-icons problem-icon"
alt="Course is waitlisted">
report_problem
@@ -24,6 +30,7 @@
</mat-list-item>
<mat-list-item role="listitem">
<i
+ aria-hidden="true"
class="material-icons error-icon"
alt="Course is not offered in term">
error
@@ -32,6 +39,7 @@
</mat-list-item>
<mat-list-item>
<i
+ aria-hidden="true"
class="material-icons not-offered-icon"
alt="Course is no longer offered">
not_interested
@@ -47,7 +55,10 @@
<h3>Menu</h3>
</mat-panel-title>
</mat-expansion-panel-header>
- <div>
+ <div aria-label="Utility menu items"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
<a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}&hideGrades={{ !(showGrades$ | async) }}">
<i aria-hidden="true" class="material-icons" alt="create pdf">picture_as_pdf</i>
Create PDF
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 af73480..c513f97 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,12 +1,16 @@
<ng-template #enrolled id="enrolled-courses">
<div class="course-list-wrapper">
<div class="course-list">
- <div class="course-list-inner">
+ <div class="course-list-inner"
+ attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
<ng-container *ngIf="enrolledCourses.length === 0">
- <p *ngIf="(term$ | async).termCode.isPast()" class="no-courses">
+ <p *ngIf="(term$ | async).termCode.isPast()" aria-label="No courses taken" class="no-courses">
No courses taken
</p>
- <p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
+ <p *ngIf="(term$ | async).termCode.isActive()" aria-label="Not enrolled in any courses" class="no-courses">
Not enrolled in any courses
</p>
</ng-container>
@@ -36,7 +40,11 @@
(cdkDropListDropped)="drop($event)"
(cdkDropListEntered)="dragEnter($event)"
(cdkDropListExited)="dragExit($event)">
- <div class="course-list-inner term-body">
+ <div class="course-list-inner term-body"
+ attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
<ng-container
*ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
<p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
@@ -86,22 +94,26 @@
class="term-container"
[ngClass]="{ 'no-scrolling': mobileView.matches }"
role="region"
- cdkFocusInitial
->
+ cdkFocusInitial>
<div class="term-inner">
<div
fxLayout="row"
class="term-header"
- fxLayoutAlign="space-between center">
+ fxLayoutAlign="space-between center"
+ attr.aria-label="{{ termCode | getTermDescription }} term"
+ isFocusable="true"
+ isTabbable="true"
+ tabindex="0">
<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'" attr.aria-label="{{ plannedCredits }} credits">
- {{ plannedCredits }} Cr
- </span>
- <span *ngIf="visibleCredits === 'enrolled'" attr.aria-label="{{ enrolledCredits }} credits">
- {{ enrolledCredits }} Cr
- </span>
+ <ng-container *ngIf="visibleCredits === 'planned'">
+ <span attr.aria-label="{{ plannedCredits }} credits">{{ plannedCredits }} Cr</span>
+ </ng-container>
+ <ng-container *ngIf="visibleCredits === 'enrolled'">
+ <span attr.aria-label="{{ enrolledCredits }} credits">{{ enrolledCredits }} Cr</span>
+ </ng-container>
</p>
<ng-container *ngIf="(note$ | async) as note; else newNote">
<button
@@ -163,22 +175,22 @@
<!-- If this term is an active term -->
<ng-container *ngIf="(term$ | async).termCode.isActive()">
<mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="(enrolledCourses.length > 0) ? 0 : 1">
- <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" aria-label="In progress courses">
+ <mat-tab [label]="'In Progress (' + enrolledCourses.length + ')'" [aria-label]="'In Progress courses (' + enrolledCourses.length + ')'">
<ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
</mat-tab>
- <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'cart courses' : 'planned courses'">
+ <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
<ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
</mat-tab>
</mat-tab-group>
</ng-container>
-
+
<!-- If this term is a past term -->
<ng-container *ngIf="(term$ | async).termCode.isPast()">
<mat-tab-group (selectedTabChange)="changeVisibleCredits($event)" [selectedIndex]="0">
- <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" aria-label="Completed courses">
+ <mat-tab [label]="'Completed (' + enrolledCourses.length + ')'" [aria-label]="'Completed courses (' + enrolledCourses.length + ')'">
<ng-container cdkFocusinitial *ngTemplateOutlet="enrolled"></ng-container>
</mat-tab>
- <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'cart courses' : 'planned courses'">
+ <mat-tab [label]="(isPrimaryPlan) ? 'Cart (' + plannedCourses.length + ')' : 'Planned (' + plannedCourses.length + ')'" [aria-label]="(isPrimaryPlan) ? 'Cart courses (' + plannedCourses.length + ')' : 'Planned courses (' + plannedCourses.length + ')'">
<ng-container cdkFocusinitial *ngTemplateOutlet="planned"></ng-container>
</mat-tab>
</mat-tab-group>
diff --git a/src/app/degree-planner/term-container/term-container.component.scss b/src/app/degree-planner/term-container/term-container.component.scss
index 17085ba..590184e 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -15,8 +15,7 @@
.term-description {
&:focus {
- outline: 2px solid #5e9ed6;
- outline: -webkit-focus-ring-color auto 5px;
+ outline: none;
}
}
/deep/.mat-tab-label,
diff --git a/src/app/shared/components/course-details/course-details.component.html b/src/app/shared/components/course-details/course-details.component.html
index c3ce498..b9b0eea 100644
--- a/src/app/shared/components/course-details/course-details.component.html
+++ b/src/app/shared/components/course-details/course-details.component.html
@@ -3,8 +3,8 @@
<div class="term-selection" *ngIf="type === 'search' || type === 'saved'" fxLayout="row" fxFlex="100">
<form [formGroup]="termSelector" (ngSubmit)="addCourseToPlan($event)" style="width:100%;display:flex">
<mat-form-field style="margin-right:20px;">
- <mat-select [compareWith]="sameTermCodes" placeholder="Term" aria-label="Term" matInput role="listbox" formControlName="term" cdkFocusInitial>
- <mat-option role="option" *ngFor="let term of (droppableTermCodes$ | async)" [value]="term" >
+ <mat-select [compareWith]="sameTermCodes" placeholder="Select term from the list to move the course" aria-label="Select term to move the course" matInput role="listbox" formControlName="term" cdkFocusInitial>
+ <mat-option role="option" *ngFor="let term of (droppableTermCodes$ | async)" [value]="term">
{{ term | getTermDescription }}
</mat-option>
</mat-select>
@@ -36,7 +36,7 @@
<mat-select
[compareWith]="sameTermCodes"
placeholder="Term"
- aria-label="Term"
+ aria-label="Select term from the list to move the course"
matInput
role="listbox"
formControlName="term"
--
GitLab