ブートストラップドロップダウンメニューのフォーカス問題

Question

私はHTML5/Bootstrap iOSアプリケーションを作成しており、いくつかの問題を解決しようとしています。最初の問題は、ドロップダウンメニューの外をダブルタップして閉じるときに、フォーカスがメニューにあるページの同じ位置にとどまることです。それはページの上部に向かっていた。

2番目の問題は、左から右にスワイプするとメニューを下に移動し、「2番目のアイテム」にある場合は、メニューの下のコンテンツにフォーカスが移動することです。私はそれを閉じるまで、どのようにドロップダウンメニューにフォーカスを保持することができます。

以下に私のコードを含めました。

<div class="container" role="dialog"> 

     <div class="dropdown" role="document"> 
      <button id="btnMenu" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" arid-haspopup="true" aria-expanded="false"> 
       Cool dropdown <span class="caret"></span> 
      </button> 

      <ul class="dropdown-menu" role="menu" aria-expanded="false"> 
       <li><a href="">First page</a></li> 
       <li><a href="">2nd page</a></li> 
       <li><a href="">3rd page</a></li> 
       <li class="divider"></li> 
       <li><a href="">1st item</a></li> 
       <li><a href="">2nd item</a></li> 
      </ul> 
     </div> 
    </div> 
<footer> 
    <div class="container"> 
     <hr> 
     <p><small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p> 
     <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p> 
     <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small></p> 
    </div> <!-- end container --> 
</footer> 

<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
    // On dropdown open 
    $(document).on('shown.bs.dropdown', function(event) { 
     var dropdown = $(event.target); 

     // Set aria-expanded to true 
     dropdown.find('#btnMenu').attr('aria-expanded', true); 

     // Set focus on the first link in the dropdown 
     setTimeout(function() { 
      dropdown.find('.dropdown-menu li:first-child a').focus(); 
     }, 10); 
    }); 

    // On dropdown close 
    $(document).on('hidden.bs.dropdown', function(event) { 
     var dropdown = $(event.target); 

     // Set aria-expanded to false   
     dropdown.find('#btnMenu').attr('aria-expanded', false); 

     // Set focus back to dropdown toggle 
     dropdown.find('#btnMenu').focus(); 
    }); 
</script> 

Answer 1

最初の問題では、次のコードをショーと非表示セクションに追加することができました。

// Hide everything around menu 
     $('#mainHeader, footer').attr('aria-hidden', 'true'); 

    // Show everything around menu 
     $('#mainHeader, footer').attr('aria-hidden', 'false'); 

まだ2番目の解決策が見つかりませんでした。