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