Question

在这里我可能缺少一些容易的事情。如果我了解辅助功能的工作方式，则当我的用户从选项卡列表中选择一项时，相应的组件应加载到routerlink中，并且焦点应立即移至第一项。相反，按Tab只会继续在选项卡列表中移动。

那么，首先，我是否理解无障碍要求？相反，我应该只是宣布活动标签并让设备或用户弄清楚这一点吗？

如果我应该明确设置焦点，该怎么做？

在每个组件上，我尝试标记第一个元素并使用ViewChild在OnInit（）中设置焦点，并且我尝试了其他根本没有任何作用的小事情。

<div id="tabSection" class="col-xs-12 col-lg-10">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="tab" [ngClass]="{ 'active': newsIsActive }"><a [routerLink]="['/news']" (click)="setActiveTabPane('news')">News</a></li>
        <li role="tab" [ngClass]="{ 'active': fileIsActive }"><a [routerLink]="['/file']"  (click)="setActiveTabPane('file')">File</a></li>
        <li role="tab" [ngClass]="{ 'active': submissionsIsActive }"><a [routerLink]="['/submissions']" (click)="setActiveTabPane('submissions')">My Submissions</a></li>
        <li role="tab" [ngClass]="{ 'active': scheduleIsActive }"><a [routerLink]="['/schedule']" (click)="setActiveTabPane('schedule')">Schedule</a></li>
        <li role="tab" [ngClass]="{ 'active': finesIsActive }"><a [routerLink]="['/fines']" (click)="setActiveTabPane('fines')">Fines/Fees</a></li>
        <li role="tab" [ngClass]="{ 'active': accessIsActive }"><a [routerLink]="['/access']" (click)="setActiveTabPane('access')">User Access</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" *ngIf="selectedFiler">
        <router-outlet></router-outlet>
    </div>
</div>

是否有任何方法可以使该选项卡跳到我需要的位置，并且理想情况下，向可能存在于其中的所有可访问性设备宣布该选项卡处于活动状态，并且我们现在位于内容中？ / p>

如何将焦点从Tablist选择设置为相应的routerlink？

0 个答案: