键盘输入时专注于下一个链接显示更多

如何解决键盘输入时专注于下一个链接显示更多

我正在研究可访问性，并有一组显示更多的链接。如果用户在 show more 时按下 Enter 键，那么我希望聚焦下一个链接。以下是我正在处理的代码：

<ng-container *ngFor="let categoryItem of category.links; let j = index;">
            <li *ngIf="j <= 2">
                <a href="{{ categoryItem.url }}" target="_blank">{{ categoryItem.name }}</a>
            </li>

            <a *ngIf="j === 3 && category.links.length > 3" class="links-toggle" href="javascript:void(0);"
                (click)="toggle[i] = !toggle[i]" [attr.aria-expanded]="toggle[i]"
                [attr.aria-controls]="'show-more-links-panel-' + i" 
                attr.aria-label="Press space or enter to access more {{ category.title }} links">
                <i class="wdsk-icon wdsk-icon-toggle"></i>
                <a *ngIf="!toggle[i]" aria-label="Show More"
                    class="link-toggle-label">{{ 'USEFUL_LINKS.SHOW_MORE' | translate }}</a>
                <a *ngIf="toggle[i]" aria-label="Show Less"
                    class="link-toggle-label">{{ 'USEFUL_LINKS.SHOW_LESS' | translate }}</a>
            </a>

            <div *ngIf="category.links.length > 3" class="useful-links-show-more" [ngbCollapse]="!toggle[i]">
                <li *ngIf="j > 2">
                    <a tabindex="0" [attr.id]="'show-more-links-panel-' + i" href="{{ categoryItem.url }}"
                        target="_blank">{{ categoryItem.name }}</a>
                </li>
            </div>
        </ng-container>

TIA。

解决方法

很难说你的用例是什么，但转移用户的注意力并不是一件容易的事，因为这可能会给用户带来更多的困惑。

相反，我建议将重点放在“显示更多/显示更少”链接上，并使用 aria-expanded 属性向用户表明内容已展开/折叠。