phetsims / a11y-research

a repository to track PhETs research into accessibility, or "a11y" for short
MIT License
3 stars 0 forks source link

NVDA - Components are described as 'unavailable' even when they are enabled #197

Open jessegreenberg opened 1 month ago

jessegreenberg commented 1 month ago

From https://github.com/phetsims/greenhouse-effect/issues/405.

NVDA will read components as "unavailable" if a parent element has aria-disabled="false". Reproduced in the following basic example.

<h1>Testing</h1>
<div id='div'>
  <button id='button'>Pause</button>
</div>

<script>
  const button = document.querySelector( 'button' );
  const div = document.querySelector( 'div' );

  window.setInterval( () => {
    const isDisabled = div.getAttribute( 'aria-disabled' ) === 'true';
    const newValue = isDisabled ? 'false' : 'true';
    div.setAttribute( 'aria-disabled', newValue );
  }, 5000 );
</script>

The problem goes away if the aria-disabled attribute is put on the button instead of the parent div. But we shouldn't have to do that. Something about the way Firefox updates when aria-disabled changes has broken.