Problèmes de focus du menu déroulant Bootstrap

Question

Je crée une application HTML5/Bootstrap iOS et j'essaie de résoudre quelques problèmes. Le premier problème est que quand je tape deux fois en dehors du menu déroulant, pour le fermer, la mise au point reste dans la même position sur la page où le focus était dans le menu. Ça allait en haut de la page.

Le deuxième problème est que lorsque je fais glisser de gauche à droite, je descends dans le menu et si je suis sur le '2ème élément', le focus se place sur le contenu du menu. Comment puis-je garder le focus uniquement dans le menu déroulant jusqu'à ce que je le ferme.

J'ai inclus mon code ci-dessous.

<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

Dans le premier numéro, j'ai trouvé l'ajout du code suivant dans la section show et les sections cachées.

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

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

Je n'ai toujours pas trouvé de solution pour le second.