Question

我尝试遵循可访问性请求，以便在打开模式时将焦点设置为模态。在打开模态的链接的单击事件上，我尝试将焦点设置为模态中的链接元素（当整个页面加载时存在模态，它只是不可见;还有链接元素在模态中有一个href值）。但是我无法改变焦点。我可以在文档keydown事件中执行此操作，这使我认为与on click存在一些冲突。是否有任何已知的冲突将重点放在刚被点击的东西上？有没有解决方法？

主页上的链接：

<li id="country-selector" class="country-selector">
    <a alt="Country Selector" href="#"><img src="../assets/images/countries/nz.png" alt="New Zealand flag"> New Zealand</a
</li>

关于模态的链接（使用Handlebars;不确定是否相关，但无论如何包括）：

<li class="cs-region {{#if @first}}active{{/if}}">
    <a href="#cs-{{slug}}" class="cs-tabs__link" {{#if @first}}id="cs-countries__first-focus" {{/if}}>{{region}}</a>
</li>

出现如下：

<li class="cs-region active">
    <a href="#cs-europe" class="cs-tabs__link" id="cs-countries__first-focus">Europe</a>
</li>

第一个链接。

这是我的JS：

$('#country-selector').on('click', function(e) {
    //Accessibility; make the modal keyboard navigable
    var modalParent = document.getElementById('cs-countries');

    if ($.contains(modalParent, document.activeElement) !== true) {
        //tabbed outside modal, so reset focus
        console.log("activeElement is outside modal: ", document.activeElement);
        document.getElementById('cs-countries__first-focus').focus(); //native js method
        $('#cs-countries__first-focus').focus(); //jquery method
        console.log("after set: ", document.activeElement);
    } else {
        console.log("activeElement is inside modal: ", document.activeElement);
    }
});

jQuery或本机JS方法都不起作用，尽管我已经在项目的其他地方使用它们来解决类似的问题，但只是没有点击事件。可以在浏览主页面元素的其余部分后选择模式，我可以在选项卡时设置焦点，但我需要将焦点从模态内的元素开始。

Answer 1

我能够通过使用setTimeout（并打破午餐）来解决这个问题：

$('#country-selector').on('click', function(e) {
    //Accessibility; make the modal keyboard navigable
    var modalParent = document.getElementById('cs-countries');

    if ($.contains(modalParent, document.activeElement) !== true) {
        //tabbed outside modal, so reset focus
        console.log("activeElement is outside modal: ", document.activeElement);
        setTimeout(function () {
                console.log("in set timeout");
                $('#cs-countries__first-focus').focus();
                console.log("afterset: ", document.activeElement);
            }, 1);
    } else {
        console.log("activeElement is inside modal: ", document.activeElement);
    }
});

点击事件和设置焦点之间的冲突？

1 个答案: