feat(router): routerLink add tabindex attribute

Fixes angular#10895
DzmitryShylovich · Dec 3, 2016 · e8c0e7e · e8c0e7e
1 parent 6cf7a1b
commit e8c0e7e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/modules/@angular/router/src/directives/router_link.ts b/modules/@angular/router/src/directives/router_link.ts
@@ -7,7 +7,7 @@
  */
 
 import {LocationStrategy} from '@angular/common';
-import {Directive, HostBinding, HostListener, Input, OnChanges, OnDestroy} from '@angular/core';
+import {Attribute, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, Renderer} from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 
 import {NavigationEnd, Router} from '../router';
@@ -99,7 +99,11 @@ export class RouterLink {
 
   constructor(
       private router: Router, private route: ActivatedRoute,
-      private locationStrategy: LocationStrategy) {}
+      @Attribute('tabindex') tabIndex: string, renderer: Renderer, el: ElementRef) {
+    if (tabIndex == null) {
+      renderer.setElementAttribute(el.nativeElement, 'tabindex', '0');
+    }
+  }
 
   @Input()
   set routerLink(data: any[]|string) {

diff --git a/modules/@angular/router/test/integration.spec.ts b/modules/@angular/router/test/integration.spec.ts
@@ -1005,8 +1005,9 @@ describe('Integration', () => {
          advance(fixture);
          expect(fixture.nativeElement).toHaveText('team 22 [ link, right:  ]');
 
-         const native = fixture.nativeElement.querySelector('button');
-         native.click();
+         const button = fixture.nativeElement.querySelector('button');
+         expect(button.getAttribute('tabindex')).toEqual('0');
+         button.click();
          advance(fixture);
 
          expect(fixture.nativeElement).toHaveText('team 33 [ simple, right:  ]');

diff --git a/tools/public_api_guard/router/index.d.ts b/tools/public_api_guard/router/index.d.ts
@@ -249,7 +249,7 @@ export declare class RouterLink {
     routerLink: any[] | string;
     skipLocationChange: boolean;
     urlTree: UrlTree;
-    constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy);
+    constructor(router: Router, route: ActivatedRoute, tabIndex: string, renderer: Renderer, el: ElementRef);
     onClick(): boolean;
 }