クリックイベントと設定フォーカスの競合ですか？

Question

モーダルが開いているときにモーダルにフォーカスを設定するアクセシビリティ要求に準拠しようとしています。モーダルを開くリンクのon clickイベントでは、モーダル内のリンク要素にフォーカスを設定しようとしています（モーダルは、ページ全体が読み込まれても表示されず、モーダルのリンク要素もhref値）。しかし、私は焦点を変更するように見えることはできません。私は文書のkeydownイベントでそれを行うことができます。これは、クリック時の矛盾があると私に思います。フォーカスをクリックしたばかりのものから離れて設定することとの間に、既知の競合はありますか？回避策はありますか？メインページ

リンク：（ハンドルバーを使用して、関連するとにかく含む場合はわからない）モーダルで

<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> 

リンク：

<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); 
    } 
});