当打开时，如何限制tab键仅在模态弹出窗口内按下？ [英] How can restrict the tab key press only within the modal popup when its open?

问题描述

我打开了一个模态弹出窗口。我有无障碍要求。所以添加了ARIA相关标签。但是当我点击tab键时，会继续关注实际页面后面的页面。

I have a modal popup opened. I have accessibility requirement. So added ARIA related labels. But when i click tab key continuously focus going to the page behind the actual page.

在html文件中添加了role =dialog

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

But when modal opened i want only the focus navigate within the modal popup.

工作 Angular4，HTML5 项目。 如果我们在HTML文件中找到解决方案，那就更好了。 我的意思是没有添加任何javascript / jQuery相关的东西来防止这种情况

Working on Angular4, HTML5 project. Better if we find a solution within HTML file itself. I mean without added any javascript/jQuery related stuffs to prevent this

推荐答案

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

然而，如果没有像
如何将焦点保持在模态对话框中？

例如：

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

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

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

2. disable any keyboard interaction with them

This has to be done in Javascript / or jQuery.

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

This is a one-liner instruction in jQuery, using jquery-ui

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

反向可以通过以下方式实现：

The reverse can be achieved using:

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

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

css样本：

3. remove any pointer event for those elements to disable mouse interaction

css sample:

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

这篇关于当打开时，如何限制tab键仅在模态弹出窗口内按下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！