Screen reader not contiuing after focus on nav bar element

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Tab to an element in the bootstrap navbar 
2.Screen reader no longer highlights after tabbing continues no voice output
3.

What is the expected output? What do you see instead?
I would expect the screen reader (vox) to announce the element and continue 
announcing elements after tabbing continues.


What version of the product are you using? On what operating system?
Chrome browser Version 43.0.2357.130 m
Chrome Vox 45.0.2428.0

Please provide any additional information below.
The following is the html code of the element causing the problem in the 
website. Settings is the element being highlighted:
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" role="navigation">
        <div class="container">
            <h2 class="sr-only">Bar launches user guide and Settings form </h2>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <!--<li role="option" aria-label="about"><a id="about-btn" href="#about" data-l10n-id="about" accesskey="T" aria-label="Link to About">About</a></li>-->
                    <li role="option" aria-label="settings">
                        <a data-l10n-id="settings" id="settings-btn" data-toggle="modal" accesskey="S" aria-hidden="false" aria-label="Open the settings form" href="#settings-form">Settings</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right ccs-online" style="display: none;">
                    <li id="user-dropdown" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            <span id="name-dropdown" class="name"></span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li aria-hidden="true" class="divider"></li>
                            <li role="option" aria-label="signout"><a id="signout" data-l10n-id="sign-out" href="#">Sign out</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>

Original issue reported on code.google.com by Ede...@gmail.com on 7 Jul 2015 at 11:29