Screen readers read everything in the navigation bar when focus lands in it

[jessegreenberg]

Discovered by the QA team in phetsims/resistance-in-a-wire#176, and determined to be an issue in a recent user interview. Also related to a few issues, about accessible content in the navigation bar:
phetsims/a11y-research#94
#496

When focus lands in the navigation bar, screen readers generally read through all of the nav bar elements together at once This has been confusing for AT users.

HTML for the content right now looks something like

<h2 tabindex="-1" id="label-262-271">Sim Resources</h2>
<div tabindex="-1" id="262-271" role="region" aria-labelledby="label-262-271">
    <button tabindex="-1" id="262-271-325-324">Keyboard Shortcuts</button>
    <button tabindex="-1" id="262-271-316">PhET Menu</button>
</div>

Tagging @terracoda so that she is aware of this issue, but it after discussion in 9/25/18 a11y meeting this won't get any work until after JT with sound is deployed.

[terracoda]

Thanks @jessegreenberg, the bottom bar will evenetually be more like this:

<!-- Sim Resources region -->			
  <section id="simResources" aria-labelledby="labelSimResources">
    <h2 id="labelSimResources">Sim Resources</h2> 	   
      <!-- Keyboard Shortcuts widget--> 
      <div id="keyboardShortcutsWidget">
        <button id="keyboardShortcuts">Keyboard Shortcuts</button>
        <p>Tips on how to use this sim with a keyboard.</p>
      </div>   

      <!-- PhET Menu button widget -->
      <div class="menuWrapper" aria-label="Teacher tools and links">
        <button aria-haspopup="true" aria-controls="phetMenu">PhET Menu</button>
        <ul role="menu" id="phetMenu">
          <!-- phet menu items to go here -->
        </ul>
      </div><!-- end menu-wrapper -->
  </section> <!-- end Sim Resources region -->

[terracoda]

@jessegreenberg, a possible stop-gap measure for this issue is to put extra wrapper divs around the button elements.

<h2 tabindex="-1" id="label-262-271">Sim Resources</h2>
<div tabindex="-1" id="262-271" role="region" aria-labelledby="label-262-271">
    <div><button tabindex="-1" id="262-271-325-324">Keyboard Shortcuts</button></div>
    <div><button tabindex="-1" id="262-271-316">PhET Menu</button></div>
</div>

It might be worth testing this in a branch to see if it fixes the problem until we can implement the new structure for the bottom bar.