How is it possible to use the tab key to navigate between different child components in the same page with Angular?

Question

For accessibility reasons, all components but be navigable with the tab key. I have two components on a login page but the tab won't take the focus from the component above to the one below.

    <div class="content">
        <login-form
            [formBuilder]="fb"
            [submitting]="loginPageState.submitting"
        ></login-form>

        <div
            *ngIf="pageData.appSettings"
            class="login-page__link"
            [innerHtml]="pageData.appSettings.login_page_link | safe: 'html'"
        ></div>

        <login-identity
            (identity)="onIdentity($event)">
        </login-identity>
    </div>

Answer 1

Try to add tabindex attribute to your component: https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex

For your component can use like this:

<login-identity
  tabindex=3
  (identity)="onIdentity($event)">
</login-identity>  

Or like: in your component ts file:

@Component({
  selector: 'login-identity',
  ...
  host: {
    'tabindex': 3
  },
})
export class LoginIdentityComponent