当选项卡键打开时，如何将其限制在弹出模式内？

Question

我打开了一个模态弹出窗口。我有无障碍要求。所以增加了ARIA相关的标签。但是，当我单击选项卡键时，继续聚焦到实际页面后面的页面。

在html文件中添加了role=“对话框”。

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

从事Angular4, HTML5项目。如果我们在HTML本身中找到一个解决方案，更好一些，。我的意思是没有添加任何javascript/jQuery相关的东西来防止这种

Answer 1

您正在询问焦点陷阱，在本演示中很好地演示了这一点：https://focus-trap.github.io/focus-trap/

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

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

• 自己实现焦点陷阱(关于此的好文章：https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)
• 使用焦点陷阱的第三方解决方案，例如https://github.com/davidtheclark/focus-trap
• 使用模态窗口的第三方解决方案，例如https://github.com/sweetalert2/sweetalert2，它完全符合WAI规范，并为您提供焦点陷阱。

Answer 2

一种非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 3

注意任何只依赖javascript事件的方法，因为它不能正确处理屏幕阅读器

但是，如果没有javascript，这是不可能实现的，就像在如何在模态对话框中保持焦点？这样的多个问题中已经指出的那样。

你有三个步骤要做：

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

例如：

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

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

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

这是jQuery中的一行指令，使用jquery。

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

相反的情况可以通过以下方式实现：

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

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

css样本：

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