Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jessegreenberg opened this issue May 10, 2024 · 0 comments
Assignees

Comments

@jessegreenberg
Copy link
Contributor

From phetsims/greenhouse-effect#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant