如何使用 Tab 键在 Angular 的同一页面中的不同子组件之间导航？

Question

出于可访问性的原因，所有组件都可以使用 tab 键导航。 我在登录页面上有两个组件，但选项卡不会将焦点从上面的组件转移到下面的组件。

    <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

尝试将 tabindex 属性添加到您的组件： https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex

对于您的组件，可以这样使用：

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

或者像：在您的组件 ts 文件中：

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