Question

我在一个Angular项目上工作，我尝试为每个按钮和链接实现a11y，这些都是可能的。

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

调用Material动画以显示此div。 我想使用自动对焦和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;
}

Answer 1

页面加载时使用autofocus属性：

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

您必须使用toggleMenu（）函数内的focus()函数手动对焦按钮。例如：

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

其中mybutton是按钮元素的id。

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

Angular2 - 将按钮重点放入隐藏的div中

1 个答案: