NVDA - aria-labelledby can make the accessible name incorrect

[jessegreenberg]

From phetsims/greenhouse-effect#404

The following is a simplified version of the markup for PhET's ComboBox.

<h1>Testing</h1>
<div id='div'>
  <h4 id='heading'>Temperature</h4>
  <button id='button' aria-labelledby='heading button'>degrees Celcius</button>
</div>
<ul role="listbox"
    aria-labelledby="heading"
    tabindex="-1"
    id='listbox'>
  <li tabindex="0" role="option">Kelvin</li>
  <li tabindex="0" role="option">degrees Celsius</li>
  <li tabindex="0" role="option">degrees Fahrenheit</li>
</ul>

<script>
  const listbox = document.getElementById( 'listbox' );
  const button = document.getElementById( 'button' );

  // when the list box is clicked, update the name and then focus it
  listbox.addEventListener( 'keydown', ( event ) => {
    if ( event.key === 'Enter' ) {
      button.innerText = event.target.innerText;
      button.focus();
    }
  } );
</script>

NVDA reads the old value of the accessible name when focus is placed on the button after pressing "enter" on a list item. If you remove the aria-labelledby attribute from the <button>, the problem goes away.

We should submit a bug report to NV Access.