Angular2 - 将焦点放在隐藏的 div 中答案

【问题标题】：Angular2 - give focus to button into a div hiddenAngular2 - 将焦点放在隐藏的 div 中
【发布时间】：2017-10-10 20:00:16
【问题描述】：

我在一个 Angular 项目中工作，我尝试为每个可选项卡的按钮和链接实现 a11y。

当我在菜单按钮上按 Enter 时，会出现一个带有菜单链接的 div 以及一个关闭按钮。这个 div 存在于 DOM 中，但它的可见性是隐藏的。

调用一个 Material 动画来使这个 div 出现。 我想使用 autofocus 和 tabindex 将焦点放在此 div 内的关闭按钮上，但按钮没有获得焦点。

应用程序

<div class="panel">
    <button (click)="toggleMenu()">Open</button>
</div>

菜单

<div class="menu">
    <button
        class="close animation-close-in"
        (click)="toggleMenu()"
        [attr.autofocus]="isMenuOpen() ? 'autofocus': null"
        [attr.tabindex]="isMenuOpen() ? '0': null"
      >
      Close
    </button>
    <!-- Links list -->
</div>

服务

open = false;

public toggleMenu(): void {
    this.open = !this.open;
    if (this.open) {
      this.scrollService.disableScroll();
    } else {
      this.scrollService.enableScroll();
    }
}

public isMenuOpen(): boolean {
    return this.isOpen();
}

public isOpen(): boolean {
    return this.open;
}

【问题讨论】：

标签： angular accessibility

【解决方案1】：

页面加载时使用autofocus属性：

autofocus 内容属性允许作者在页面加载后指示控件将被聚焦，从而允许用户只需开始输入而无需手动聚焦主控件。

您必须使用 toggleMenu() 函数中的 focus() 函数手动聚焦按钮。例如：

document.getElementById("mybutton").focus();

其中 mybutton 是按钮元素的 ID。

请注意，您不必在元素上设置tabindex 属性。

【讨论】：