CODEWITHSUNDEEP
htmlreactjsaccessibilitynvda
someone
someone

Reputation: 207

sibling text are read by NVDA when parent has role='alert'

I have this code below:

<div role="alert"> /// main div
  <button
    onClick={()=>{console.log('blabla')}}                               
    aria-label={'close button'}>
   Close
  </button>

  <div> /// parent div
    <h4> title </h4>
    <p> name </p>
    <a aria-label={'go to other page'}>
        link
    </a>
  </div>
</div>

now when we use NVDA and we focus on the 'a' tag, it reads everything that we have there in the main div!!

It reads from the button at the top and then the text in the 'h4' and 'p' and finally to the 'a' tag!

I noted that removing that role="alert" or removing the parent div will fix it and it will only read the 'a' tag 'aria-label',

but I need both role='alert' and the parent 'div' tag!!

Upvotes: 0

Views: 34

Answers (0)

Related Questions