在没有 JavaScript 的情况下打开后将键盘焦点放在模态上

Question

单击主页上的按钮后，会打开一个模式，其中包含供用户 select 使用的项目列表。当模态打开时，我的模态中的内容没有获得焦点，而是当我按下 Tab 键时 - 我看到它在实际进入模态之前通过主页（背景）上的其余项目切换。

如何让我的模态内容在打开后获得焦点，而不是在到达模态之前必须在主页中切换？

这是我的模态代码：

<div role="dialog" aria-modal="true" class="modal">
    <div class="modal-dialog override">
        <div class="modal-content">
            <div class="section">
                <header class="section-header">
                    <button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
                </header>
                <div class="section-body">
                    <ng-content select=".modal-body"></ng-content>
                </div>
            </div>
        </div>
    </div>
</div>

这是我打开模式的方法：

 public open() {
        this.modal.open();
        this.myService.getUsers()
            .subscribe((data: ClassRoster[]) => {
                this.classData = data;
            });
    }

Answer 1

您可以使用自动对焦属性

Answer 2

没有JavaScript

为您的按钮指定 autofocus 属性：

<div role="dialog" aria-modal="true" class="modal">
    <div class="modal-dialog override">
        <div class="modal-content">
            <div class="section">
                <header class="section-header">
                    <button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
                </header>
                <div class="section-body">
                    <ng-content select=".modal-body"></ng-content>
                </div>
            </div>
        </div>
    </div>
</div>

您必须对按钮执行此操作而不能直接将其应用于 div 的原因是 autofocus only works on input, textarea, select and button。这并不理想，但它确实有效。

和JavaScript

像这样创建模态打开函数：

 public open() {
        this.modal.open();
        document.querySelector('.modal').focus();
        this.myService.getUsers()
            .subscribe((data: ClassRoster[]) => {
                this.classData = data;
            });
    }

Answer 3

autofocus 属性是布尔属性。如果存在，它指定元素应在页面加载时自动获得焦点。

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

在没有 JavaScript 的情况下打开后将键盘焦点放在模态上

Getting keyboard focus on modal once open without JavaScript

html

wai-aria

twitter-bootstrap

没有JavaScript

和JavaScript