如何使用 Tab 键在 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