Repository: angular
Issue: routerLink directive always makes element focusable
Labels: freq2: medium,area: router,router: directives,P4,bug

# 🐞 bug report

### Affected Package
@angular/router

### Description

Issue https://github.com/angular/angular/issues/10895 requests that the `routerLink`-directive should automatically add `tabindex` on the target element if not already present (implemented via https://github.com/angular/angular/pull/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
<!--
Please create and share minimal reproduction of the issue starting with this template: https://stackblitz.com/fork/angular-issue-repro2
-->
https://stackblitz.com/edit/angular-issue-repro2-qudebd

```html
<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>
```
<!--
If StackBlitz is not suitable for reproduction of your issue, please create a minimal GitHub repository with the reproduction of the issue. Share the link to the repo below along with step-by-step instructions to reproduce the problem, as well as expected and actual behavior.

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

## 🌍  Your Environment

**Angular Version:**
<pre><code>
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
</code></pre>

**Anything else relevant?**
<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->
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).