How to make an icon/span selectable by pressing Tab key?

I have two input boxes and the users enter their credentials, then clicking on the span that invokes the authentication process. It works great on a phone but for a laptop/desktop, I've been informed that they prefer to use Tab to jump between the three controls.

At the moment, only the input boxes are tabbable to (focusable, selectable?) and I wonder if I can easy make the span element reachable by pressing tab key. I don't want to create a whole logic for detecting children etc. as it would be way too complicated and unmotivated.

<span class="nav-item">
  <input [(ngModel)]="userName">
</span>
<span class="nav-item">
  <input [(ngModel)]=password>
</span>
<span class="nav-item"
      (click)="authenticate()">
  <fa-icon [icon]="faSignInAlt"></fa-icon>
</span>

I've googled it but got little relevant hits. The best was to change span into a button and format it.

Solution

you can add tabindex to it.

<span class="nav-item">
  <input [(ngModel)]="userName">
</span>
<span class="nav-item">
  <input [(ngModel)]=password>
</span>
<span class="nav-item"
      (click)="authenticate()" tabindex="0">
  <fa-icon [icon]="faSignInAlt"></fa-icon>
</span>