Skip to content

Commit dea8c86

Browse files
dario-piotrowiczatscott
dario-piotrowicz
authored and
atscott
committed
feat(router): add ariaCurrentWhenActive input to RouterLinkActive directive (#45167)
add the ariaCurrentWhenActive input to the RouterLinkActive directive so that users can easily set the aria-current property to their active router links resolves #35051 PR Close #45167
1 parent d8226de commit dea8c86

18 files changed

Lines changed: 144 additions & 42 deletions

File tree

‎aio/content/examples/animations/src/app/app.component.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ <h1>Animations</h1>
77
<label for="animation-toggle">Toggle All Animations</label>
88

99
<nav>
10-
<a id="home" routerLink="/home" routerLinkActive="active">Home</a>
11-
<a id="about" routerLink="/about" routerLinkActive="active">About</a>
12-
<a id="open-close" routerLink="/open-close" routerLinkActive="active">Open/Close</a>
13-
<a id="status" routerLink="/status" routerLinkActive="active">Status Slider</a>
14-
<a id="toggle" routerLink="/toggle" routerLinkActive="active">Toggle Animations</a>
15-
<a id="enter-leave" routerLink="/enter-leave" routerLinkActive="active">Enter/Leave</a>
16-
<a id="auto" routerLink="/auto" routerLinkActive="active">Auto Calculation</a>
17-
<a id="heroes" routerLink="/heroes" routerLinkActive="active">Filter/Stagger</a>
18-
<a id="hero-groups" routerLink="/hero-groups" routerLinkActive="active">Hero Groups</a>
19-
<a id="insert-remove" routerLink="/insert-remove" routerLinkActive="active">Insert/Remove</a>
20-
<a id="querying" routerLink="/querying" routerLinkActive="active">Querying</a>
10+
<a id="home" routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a>
11+
<a id="about" routerLink="/about" routerLinkActive="active" ariaCurrentWhenActive="page">About</a>
12+
<a id="open-close" routerLink="/open-close" routerLinkActive="active" ariaCurrentWhenActive="page">Open/Close</a>
13+
<a id="status" routerLink="/status" routerLinkActive="active" ariaCurrentWhenActive="page">Status Slider</a>
14+
<a id="toggle" routerLink="/toggle" routerLinkActive="active" ariaCurrentWhenActive="page">Toggle Animations</a>
15+
<a id="enter-leave" routerLink="/enter-leave" routerLinkActive="active" ariaCurrentWhenActive="page">Enter/Leave</a>
16+
<a id="auto" routerLink="/auto" routerLinkActive="active" ariaCurrentWhenActive="page">Auto Calculation</a>
17+
<a id="heroes" routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Filter/Stagger</a>
18+
<a id="hero-groups" routerLink="/hero-groups" routerLinkActive="active" ariaCurrentWhenActive="page">Hero Groups</a>
19+
<a id="insert-remove" routerLink="/insert-remove" routerLinkActive="active" ariaCurrentWhenActive="page">Insert/Remove</a>
20+
<a id="querying" routerLink="/querying" routerLinkActive="active" ariaCurrentWhenActive="page">Querying</a>
2121
</nav>
2222

2323
<!-- #docregion route-animations-outlet -->

‎aio/content/examples/ngmodules/src/app/app.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Component } from '@angular/core';
55
template: `
66
<app-greeting></app-greeting>
77
<nav>
8-
<a routerLink="contact" routerLinkActive="active">Contact</a>
9-
<a routerLink="items" routerLinkActive="active">Items</a>
10-
<a routerLink="customers" routerLinkActive="active">Customers</a>
8+
<a routerLink="contact" routerLinkActive="active" ariaCurrentWhenActive="page">Contact</a>
9+
<a routerLink="items" routerLinkActive="active" ariaCurrentWhenActive="page">Items</a>
10+
<a routerLink="customers" routerLinkActive="active" ariaCurrentWhenActive="page">Customers</a>
1111
</nav>
1212
<router-outlet></router-outlet>
1313
`

‎aio/content/examples/router-tutorial/src/app/app.component.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,18 @@ <h1>Angular Router Sample</h1>
44
<!-- #enddocregion setup-->
55
<!-- #docregion routeractivelink -->
66
<nav>
7-
<a class="button" routerLink="/crisis-list" routerLinkActive="activebutton">Crisis Center</a> |
8-
<a class="button" routerLink="/heroes-list" routerLinkActive="activebutton">Heroes</a>
7+
<a class="button"
8+
routerLink="/crisis-list"
9+
routerLinkActive="activebutton"
10+
ariaCurrentWhenActive="page">
11+
Crisis Center
12+
</a> |
13+
<a class="button"
14+
routerLink="/heroes-list"
15+
routerLinkActive="activebutton"
16+
ariaCurrentWhenActive="page">
17+
Heroes
18+
</a>
919
</nav>
1020
<!-- #enddocregion routeractivelink-->
1121
<!-- #docregion router-outlet -->

‎aio/content/examples/router/src/app/admin/admin/admin.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<h2>Admin</h2>
22
<nav>
33
<a routerLink="./" routerLinkActive="active"
4-
[routerLinkActiveOptions]="{ exact: true }">Dashboard</a>
5-
<a routerLink="./crises" routerLinkActive="active">Manage Crises</a>
6-
<a routerLink="./heroes" routerLinkActive="active">Manage Heroes</a>
4+
[routerLinkActiveOptions]="{ exact: true }" ariaCurrentWhenActive="page">Dashboard</a>
5+
<a routerLink="./crises" routerLinkActive="active" ariaCurrentWhenActive="page">Manage Crises</a>
6+
<a routerLink="./heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Manage Heroes</a>
77
</nav>
88
<router-outlet></router-outlet>

‎aio/content/examples/router/src/app/app.component.1.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- #docregion -->
22
<h1>Angular Router</h1>
33
<nav>
4-
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
5-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
4+
<a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
5+
<a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
66
</nav>
77
<router-outlet></router-outlet>

‎aio/content/examples/router/src/app/app.component.2.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!-- #docregion -->
22
<h1>Angular Router</h1>
33
<nav>
4-
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
5-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
4+
<a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
5+
<a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
66
</nav>
77
<div [@routeAnimation]="getAnimationData()">
88
<router-outlet></router-outlet>

‎aio/content/examples/router/src/app/app.component.4.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!-- #docregion -->
22
<h1>Angular Router</h1>
33
<nav>
4-
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
5-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
4+
<a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
5+
<a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
66
<!-- #docregion contact-link -->
77
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
88
<!-- #enddocregion contact-link -->

‎aio/content/examples/router/src/app/app.component.5.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!-- #docregion -->
22
<h1 class="title">Angular Router</h1>
33
<nav>
4-
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
5-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
6-
<a routerLink="/admin" routerLinkActive="active">Admin</a>
4+
<a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
5+
<a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
6+
<a routerLink="/admin" routerLinkActive="active" ariaCurrentWhenActive="page">Admin</a>
77
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
88
</nav>
99
<div [@routeAnimation]="getAnimationData()">

‎aio/content/examples/router/src/app/app.component.6.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!-- #docregion -->
22
<h1 class="title">Angular Router</h1>
33
<nav>
4-
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
5-
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
6-
<a routerLink="/admin" routerLinkActive="active">Admin</a>
7-
<a routerLink="/login" routerLinkActive="active">Login</a>
4+
<a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
5+
<a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
6+
<a routerLink="/admin" routerLinkActive="active" ariaCurrentWhenActive="page">Admin</a>
7+
<a routerLink="/login" routerLinkActive="active" ariaCurrentWhenActive="page">Login</a>
88
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
99
</nav>
1010
<div [@routeAnimation]="getAnimationData()">

‎aio/content/examples/router/src/app/app.component.7.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ <h1>Angular Router App</h1>
22
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in AppRoutingModule) -->
33
<nav>
44
<ul>
5-
<li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
6-
<li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
5+
<li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
6+
<li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li>
77
</ul>
88
</nav>
99
<!-- The routed views render in the <router-outlet>-->

0 commit comments

Comments
 (0)