Skip to content
Snippets Groups Projects
Commit 3bc4bc13 authored by pnogal's avatar pnogal Committed by Paulina Nogal
Browse files

Add aria-label of current tab depending on active view

parent 010f354e
No related branches found
No related tags found
No related merge requests found
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<a mat-tab-link href="/search">Search</a> <a mat-tab-link href="/search">Search</a>
<a mat-tab-link href="/my-courses">My Courses</a> <a mat-tab-link href="/my-courses">My Courses</a>
<a mat-tab-link href="/scheduler">Scheduler</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-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
<ng-template #linkToNewDARSView> <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>
<ng-template #linkToOldDARSView> <ng-template #linkToOldDARSView>
<a mat-tab-link href="/dars">Degree Audit (DARS)</a> <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
......
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { environment } from './../../../environments/environment'; import { environment } from './../../../environments/environment';
import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component'; import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'cse-navigation', selector: 'cse-navigation',
templateUrl: './navigation.component.html', templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'], styleUrls: ['./navigation.component.scss'],
}) })
export class NavigationComponent { export class NavigationComponent implements OnInit {
public activeView: 'Degree Planner' | 'DARS';
public useNewDARSView?: boolean; public useNewDARSView?: boolean;
constructor(public dialog: MatDialog) { constructor(
public dialog: MatDialog,
private location: Location,
private router: Router,
) {
this.useNewDARSView = environment['useNewDARSView'] === true; 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() { public onFeedbackClick() {
this.dialog.open(FeedbackDialogComponent, { this.dialog.open(FeedbackDialogComponent, {
closeOnNavigation: true, closeOnNavigation: true,
......
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