From 3bc4bc13b1e29cb4997a22879d2644b24970ec8f Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Tue, 6 Aug 2019 14:31:25 -0500
Subject: [PATCH] Add aria-label of current tab depending on active view
---
.../core/navigation/navigation.component.html | 4 ++--
.../core/navigation/navigation.component.ts | 23 +++++++++++++++----
2 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/app/core/navigation/navigation.component.html b/src/app/core/navigation/navigation.component.html
index ce00e7d..c2fbaf0 100644
--- a/src/app/core/navigation/navigation.component.html
+++ b/src/app/core/navigation/navigation.component.html
@@ -3,10 +3,10 @@
<a mat-tab-link href="/search">Search</a>
<a mat-tab-link href="/my-courses">My Courses</a>
<a mat-tab-link href="/scheduler">Scheduler</a>
- <a mat-tab-link routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Degree Planner</a>
+ <a mat-tab-link attr.aria-label="{{ activeView === 'Degree Planner' ? 'Selected tab, Degree Planner' : 'Degree Planner'}}" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Degree Planner</a>
<ng-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
<ng-template #linkToNewDARSView>
- <a mat-tab-link routerLink="/dars" routerLinkActive="active">Degree Audit (DARS)</a>
+ <a mat-tab-link routerLink="/dars" routerLinkActive="active" attr.aria-label="{{ activeView === 'DARS' ? 'Selected tab, Degree Audit DARS' : 'Degree Audit DARS'}}">Degree Audit (DARS)</a>
</ng-template>
<ng-template #linkToOldDARSView>
<a mat-tab-link href="/dars">Degree Audit (DARS)</a>
diff --git a/src/app/core/navigation/navigation.component.ts b/src/app/core/navigation/navigation.component.ts
index eeb4257..f6f799f 100644
--- a/src/app/core/navigation/navigation.component.ts
+++ b/src/app/core/navigation/navigation.component.ts
@@ -1,20 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { environment } from './../../../environments/environment';
import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
@Component({
selector: 'cse-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'],
})
-export class NavigationComponent {
+export class NavigationComponent implements OnInit {
+ public activeView: 'Degree Planner' | 'DARS';
public useNewDARSView?: boolean;
- constructor(public dialog: MatDialog) {
+ constructor(
+ public dialog: MatDialog,
+ private location: Location,
+ private router: Router,
+ ) {
this.useNewDARSView = environment['useNewDARSView'] === true;
}
-
+ ngOnInit() {
+ this.router.events.subscribe(() => {
+ if (this.location.path() === '') {
+ this.activeView = 'Degree Planner';
+ } else if (this.location.path() === '/dars') {
+ this.activeView = 'DARS';
+ }
+ });
+ }
public onFeedbackClick() {
this.dialog.open(FeedbackDialogComponent, {
closeOnNavigation: true,
--
GitLab