How to handle interactive controls must be nested by screenreader for the checkbox but checkbox is still readable by the screenreader

Question

I am working on accessibility and test the application by Axe Dev Tool i.e Google Chrome browser extension. I use a table to display content, where each row (each cell in the row) should be clickable by mouse click. and each row having the checkbox like below code snippet:-

Error (interactive controls must be nested) is coming while scan the page via Axe Dev Tool

<tr data-ng-repeat="getUser in getUserList"  data-ng-click="toggleOrganizationSelection(getOrganization)" tabindex="0" aria-hidden="false">
<td>
    <input type="checkbox" ng-change="onchange()" ng-model="getOrganization.check" role="checkbox" aria-checked="false"  aria-labelledby="select-organisation" aria-label="selectUserList"/>
    
</td>
<td>{{getUser.firstName}}</td>
<td>{{getUser.secondname}} </td>

Help me to fix this.

Thank you in advance

Answer 1

Are you sure the error isn't

Error (interactive controls must NOT be nested)

If you have an interactive element nested inside another interactive element and you click on the inner element, should only the inner element receive the click event or should the outer element as well?

It's undefined what should happen and is not a good idea to nest them this way.

I understand you want to click on the table row to perform some action but when you click on the checkbox, should it also run the click handler for the row?

I think your code is semantically correct, meaning it's allowed by HTML, but the behavior might be undefined. Axe is just warning you about it. It's not a technical WCAG failure unless the nested elements is not allowed by HTML, in which case it would fail WCAG 4.1.1.

An example of invalid HTML is:

<a href="...">
  <button>foo</button>
</a>

The content model for <a> elements says "there must be no interactive content descendant".