How to override the role link in the children elements which is inherited from parent in Accessibility

user_2345976 0
Viewed 204

Have a tooltip in which tooltip content div is added dynamically and role link is required as per requirement to get appended for aria label. Initial html of tooltip before it is expanded is

<div class="tooltip" tabindex="0" aria-expanded="false" role="link" aria-label="click here">
      <span>
        <i class="icon-tooltip"></i>
      </span>
</div>

After the user click on the tooltip icon below will be html

  <div class="tooltip" tabindex="0" aria-expanded="true" role="link" aria-label="click here">
      <span>
        <i class="icon-tooltip"></i>
      </span>
    <div class="tooltip content">   
        <p class="title">This is title</p>
        <div class="description">
            <p>this is line 1</p>
            <p>this is line 2</p>
        </div>
    </div>
   </div>

When verified in speech viewer the tooltip content is being read as expanded link This is title, expanded link This is line1, expanded link This is line2 instead of expected This is title, This is line1, This is line2. I tried to add role=none/presentation for the tooltip content to remove expanded link to prevent the parent role to the children elements but still it did not fix the issue. Is there a way to prevent the parent role and aria-expanded to inherit to the children elements?

nvda wai-aria accessibility html javascript
1 Answers

Lots of issues going on here. As the code is currently written (which is different from the OP, it was edited on Feb 2021), the aria-label is going to override all the text in the nested children so you will never hear "expanded This is title" or "expanded this is line 1".

As the code was originally written, without the aria-label, whether you hear "expanded" on every line of text depends on how you navigate with the screen reader. With a simple TAB to the link, you'll hear all the text together: "This is title this is line 1 this is line 2 expanded link".

But if you use the down arrow with the screen reader, you will navigate to each DOM element. That will be each <p> element separately and you'll hear the expanded state with each piece of text because each piece of text is part of the link and the link is marked as expanded.

  • "expanded link This is title"
  • "expanded link this is line 1"
  • "expanded link this is line 2"

This is correct behavior. You'd hear a similar announcement if you had a link that looked like this:

<a href="#" aria-expanded="true">
  line 1
  <span>line 2</span>
  <div>line 3</div>
  <div>line 4</div>
  line 5
</a>

If you arrow down to navigate to each DOM element, you'd hear:

  • "expanded link line 1 line 2"
  • "expanded link line 3"
  • "expanded link line 4"
  • "expanded link line 5"

(Note, "line1" and "line2" are read together because the <span> is not a blocking element.)

user_767140
Related