0

I am making a HTML5/Bootstrap iOS app and I am trying to resolve a couple of issues. The first issue is that when I double tap outside the dropdown menu, to close it, focus stays in the same position on the page where focus was in the menu. It was going to the top of the page.

The second issue is that as swipe left to right, I move down the menu and if I am on '2nd item' focus goes to the content under the menu. How can I keep the focus only in the dropdown menu until I close it.

I have included my code below.

    <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>
Grady McGhee
  • 311
  • 5
  • 20

1 Answers1

0

In the first issue I found adding the following code to the show and hidden sections works.

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

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

I still haven't found a solution for the second one.

Grady McGhee
  • 311
  • 5
  • 20