🐞 bug report

Affected Package

@angular/router

Description

Issue #10895 requests that the routerLink-directive should automatically add tabindex on the target element if not already present (implemented via #13094).

I understand that this behavior might be convinient in some cases, but it should still be configurable.

For example, in order to implement a custom menu widget it's a good practice that the focus always stays on the surrounding element (e.g. <nav>) while the user selects the target menu item with the arrow keys.

Right now, implementing this in a clean and straight-forward way is not possible due to the feature implemented in the issue above. If <a> is used for the menu entries, the href injected by routeLink makes it focusable and even if <span> is used instead, routeLink still injects a tabindex=0 to always make it focusable.
When the user then clicks on a link the surrounding <nav> element looses its focus as focus moves to the link that has been clicked instead. Even setting tabindex="-1" only prevents tabbing to the link but still allows focus via mouse click.

There should either be a configuration parameter to prevent setting of tabindex or the feature should be reverted as tabindex can always be configured manually if necessary.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-qudebd

<nav tabindex="0">
  <ol>
    <li>
      <!-- becomes focusable because of href attribute -->
      <a routerLink="bikes" routerLinkActive="active">Bikes</a>
    </li>
    <li>
      <!-- becomes focusable because of tabindex attribute -->
      <span routerLink="cars" routerLinkActive="active">Cars</span>
    </li>
  </ol>
</nav>

🌍 Your Environment

Angular Version:

Angular CLI: 6.2.9
Node: 8.11.3
OS: darwin x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.9
@angular-devkit/build-angular     0.8.9
@angular-devkit/build-optimizer   0.8.9
@angular-devkit/build-webpack     0.8.9
@angular-devkit/core              0.8.9
@angular-devkit/schematics        0.8.9
@angular/cli                      6.2.9
@ngtools/webpack                  6.2.9
@schematics/angular               0.8.9
@schematics/update                0.8.9
rxjs                              6.3.3
typescript                        2.9.2
webpack                           4.16.4

Anything else relevant?

This can be reproduced as described in Chrome v71.0.3578.98.
In Safari the focus is only lost on the second link (i.e. where <span> is used).