如何在Javascript中将焦点捕获到弹出窗口?

6vl6ewon  于 2023-02-11  发布在  Java
关注(0)|答案(2)|浏览(182)

我已经为一个需要访问的弹出窗口创建了下面的JavaScript代码。
问题是,在键盘浏览的标签按钮选择所有的按钮后面的弹出在着陆页第一。我需要它只选择按钮弹出和关闭按钮。
我知道焦点捕获弹出窗口是一个可能有效的方法,但我不知道如何将其添加到我的代码中。
https://codepen.io/aryanotstark/pen/KKBjLXY〈〈以下是代码
https://digitalcloud.co.za/kiron/〈〈您可以在此网站上查看正在运行的弹出窗口

<script>
    // Check if the popup has already been shown during the current session
    if (!sessionStorage.getItem('popupShown')) {
        setTimeout(function() {
            var popup = document.createElement("div");
            popup.style.position = "fixed";
            popup.style.top = "0";
            popup.style.left = "0";
            popup.style.zIndex = "999";
            popup.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
            popup.style.width = "100vw";
            popup.style.height = "100vh";
            popup.style.display = "flex";
            popup.style.alignItems = "center";
            popup.style.justifyContent = "center";
            var innerPopup = document.createElement("div");
            innerPopup.style.backgroundColor = "black";
            innerPopup.style.display = "flex";
            innerPopup.style.flexDirection = "column";
            innerPopup.style.alignItems = "center";
            innerPopup.style.justifyContent = "center";
            innerPopup.style.padding = "40px";
            innerPopup.style.margin = "35px";
            innerPopup.style.borderRadius = "25px";

            var img = document.createElement("img");
img.src = "https://digitalcloud.co.za/wp-content/uploads/2023/01/kerridge_pop_up_illustration.png ";
img.alt = "Find out about Kerridge’s core solution ";
img.style.width = "25%";
img.style.cursor = "pointer";
innerPopup.appendChild(img);

            var text = document.createElement("p");
            text.innerHTML = "Interested to find out more about our core solution?";
            text.style.color = "white";
            text.style.marginTop = "50px";
            text.style.textAlign = "center";
            text.style.fontSize = "20px";
            innerPopup.appendChild(text);

            var button = document.createElement("button");
            button.innerHTML = "Book a free demo today";
            button.style.backgroundColor = "#E8017B";
            button.style.color = "white";
            button.style.fontSize = "20px";
            button.style.padding = "15px";
            button.style.borderRadius = "50px"
            button.style.border = "none"
            button.onclick = function() {
                location.href = "https://digitalcloud.co.za/ ";
            }
            innerPopup.appendChild(button);
            
            var secondText = document.createElement("p");
            secondText.innerHTML = "Stay up to date with the latest Kerridge product updates and existing announcements";
            secondText.style.color = "white";
            secondText.style.marginTop = "50px";
            secondText.style.textAlign = "center";
            secondText.style.fontSize = "20px";
            innerPopup.appendChild(secondText);
            
            var secondButton = document.createElement("button");
                secondButton.innerHTML = "Sign up to our Newsletter";
                secondButton.style.color = "#E8017B";
                secondButton.style.background = "transparent";
                secondButton.style.border = "none";
                secondButton.style.fontSize = "20px";
                secondButton.onclick = function() {
                 location.href = "https://digitalcloud.co.za/ ";
                }
                
                innerPopup.appendChild(secondButton);

            var closeBtn = document.createElement("div");
            closeBtn.style.position = "absolute";
            closeBtn.style.top = "50px";
            closeBtn.style.right = "50px";
            closeBtn.style.cursor = "pointer";
            closeBtn.style.width = "60px";
            closeBtn.style.height = "60px";
            closeBtn.style.borderRadius = "50%";
            closeBtn.style.backgroundColor = "#E8017B";
            closeBtn.style.display = "flex";
            closeBtn.style.alignItems = "center";
            closeBtn.style.justifyContent = "center";

closeBtn.setAttribute("tabindex", "0");
closeBtn.setAttribute("role", "button");
closeBtn.setAttribute("aria-label", "Close");

closeBtn.addEventListener("click", function() {
  // Add logic to close something here
  popup.remove();
});

closeBtn.addEventListener("keydown", function(event) {
  if (event.key === "Enter" || event.key === " ") {
    // Add logic to close something here
    popup.remove();
  }
});

            var closeX = document.createElement("div");
            closeX.innerHTML = "X";
            closeX.style.color = "white";
            closeX.style.fontWeight = "bold";

            closeBtn.appendChild(closeX);
            closeBtn.onclick = function() {
                popup.remove();
            }
            innerPopup.appendChild(closeBtn);

            popup.appendChild(innerPopup);
            document.body.appendChild(popup);
            // Set a value in sessionStorage indicating that the popup has been shown
            sessionStorage.setItem('popupShown', 'true');
        }, 90000 );
    }
</script>
vof42yt1

vof42yt11#

可以使用js逻辑动态添加With <div id="div1" tabindex="-1"> content you'd like to prevent tab</div>

plicqrtu

plicqrtu2#

为了使问题更完整,对于模态对话框,您需要两件事:
1.陷印模式对话框内的焦点
1.对辅助技术隐藏所有其他内容
当然是there is more to it,但这是与问题相关的部分。
通过Tab键导航只是屏幕阅读器导航的一种方式。Android和iOS上的屏幕阅读器TalkBack和VoiceOver在真正的焦点和阅读焦点之间没有区别。这就是后者的意义所在:避免对对话框外部内容的读取访问。
在许多解决方案中,这做得很糟糕,并且可以在移动平台上移动到模态对话框之外,例如在Bootstrap 5中。

本机、标准方法

The <dialog> element被标准化以解决这些问题。
显然,这是最好的方法,因为这意味着您拥有浏览器供应商开发的所有动力来支持您的对话框。
According to Scott O'hara two weeks ago, you should Use it
如果您不想依赖这个原生元素,而想实现一个自定义模态对话框,那么针对您的问题,原生元素会做两件事。
showModal()方法调用的<dialog>元素将具有隐式aria-modal="true" [...]
[...]除了<dialog>及其内容之外的所有内容都应该使用inert属性呈现为惰性。
换句话说,这将引导我们

<main inert>
  …
  <p><a href="#">Can you focus me?</a></p>
</main>
<div role="dialog" aria-modal="true" aria-labelledby="d-title">
  <h2 id="d-title">Dialog title</h2>
  …
  <p><button>Can you focus me?</button></p>
</div>

不幸的是,同样在这里,浏览器支持还不是很好。

aria-modal的替代方案

该属性应该对辅助技术隐藏所有其他内容(上例中的<main>),对于不支持该属性的浏览器,aria-hidden可以应用于其他内容:

<main aria-hidden="true">
…
</main>
<div role="dialog" …>

这对注意力没有影响,但对通过辅助技术阅读有影响。

陷阱焦点

有两种策略。

截距focusin

这是Bootstrap’s ModalAPG’s Modal Dialog Example中使用的方法。
一种策略是将侦听器绑定到对话框外部的the focusin event内容,然后将焦点放回对话框中的第一个或最后一个交互式元素上,这取决于最后一次聚焦的是哪个元素。
您不能使用focusout事件,因为用户触发focus的焦点顺序将在focusout之后触发,并且后者不可取消。
一个二个一个一个

使其他所有内容不可聚焦

您可以尝试渲染所有其他交互式元素not focusableclickable
这显然更加脆弱,特别是如果交互性不是通过使用原生HTML元素或ARIA角色来公开的话,因此很难识别它们。

<main style="pointer-events: none">
  …
  <p><a href="#" tabindex="-1">Can you focus me?</a></p>
</main>
<div role="dialog" aria-modal="true" aria-labelledby="d-title">
  <h2 id="d-title">Dialog title</h2>
  …
  <p><button autofocus>Can you focus me?</button></p>
</div>

相关问题