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.
From https://github.com/phetsims/greenhouse-effect/issues/404
The following is a simplified version of the markup for PhET's ComboBox.
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.