如何仅在模式弹出窗口中将Tab键按下限制为打开状态？

Question

我打开了一个模式弹出窗口。我有无障碍要求。因此添加了ARIA相关标签。但是，当我单击Tab键时，持续聚焦到实际页面后面的页面。

在html文件中添加了role =“ dialog”

但是当模式打开时，我只希望焦点在模式弹出窗口中导航。

在Angular4, HTML5项目上工作。如果我们在HTML文件本身中找到解决方案，那就更好了。我的意思是不添加任何与javascript / jQuery相关的内容以防止这种情况

Answer 1

一种非 jquery 解决方案，仅循环模态的输入元素

// place this line in the dialog show function - to only add the listener when the dialog is shown
window.addEventListener('keydown', handleKey);

// uncomment and place this in the dialog close/hide function to remove the listener when dialog is closed/hidden
// window.removeEventListener('keydown', handleKey);

function handleKey(e) {
    if (e.keyCode === 9) {
        let focusable = document.querySelector('#modal').querySelectorAll('input,button,select,textarea');
        if (focusable.length) {
            let first = focusable[0];
            let last = focusable[focusable.length - 1];
            let shift = e.shiftKey;
            if (shift) {
                if (e.target === first) { // shift-tab pressed on first input in dialog
                    last.focus();
                    e.preventDefault();
                }
            } else {
                if (e.target === last) { // tab pressed on last input in dialog
                    first.focus();
                    e.preventDefault();
                }
            }
        }
    }
}

Answer 2

请小心任何仅依赖于 javascript 事件的方法，因为它无法正确处理屏幕阅读器

然而，如果没有 javascript，这是无法实现的，就像多个问题中已经指出的那样，例如 如何在模式对话框中保持焦点？

您需要执行三个步骤：

1. 通过设置禁用屏幕阅读器与任何其他节点的aria-hidden=true交互

例如：

<main aria-hidden="true"><!-- main content here--></main>
<dialog>Your dialog here</dialog>

2.禁用与它们的任何键盘交互

这必须在 Javascript/或 jQuery 中完成。

这是 jQuery 中的单行指令，使用 jquery-ui

$("main :focusable").addClass("disabled").attr("tabindex", -1);

可以使用以下方法实现相反的效果：

$(".disabled").removeClass("disabled").attr("tabindex", 0);

3. 删除这些元素的任何指针事件以禁用鼠标交互

CSS 示例：

main[aria-hidden='true'] { pointer-events: none;}

Answer 3

您正在询问焦点陷阱，此演示中对此进行了很好的演示：http : //davidtheclark.github.io/focus-trap/demo/

添加role="dialog"不会自动为该元素内的焦点提供陷阱。实际上，浏览器没有提供本机焦点陷阱。

您需要使用以下选项之一：

• 自己实施焦点陷阱
• 使用焦点陷阱的第三方解决方案，例如https://github.com/davidtheclark/focus-trap
• 使用模态窗口的第三方解决方案，例如https://github.com/sweetalert2/sweetalert2，它与WAI-ARIA规范完全兼容并为您提供焦点陷阱