let checkboxColumn = `<div class="checkbox c-checkbox" >
<label> <input type="checkbox"
ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
/> <span
class="fa fa-check"></span>
</label>
</div>`;
self.dtColumns = [
DTColumnBuilder.newColumn("select").withTitle(checkboxColumn).notSortable(),
DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
]
I am creating a data table in which there is a checkbox in the header, clicking on it will select all the checkboxes of the row. The issue is that checkboxcolumn is getting rendered in aria-label as well. The snippet below will tell you what is getting rendered:
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;" aria-label="
<input type="checkbox"
ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
/> <span
class="fa fa-check">
">
<div class="checkbox c-checkbox">
<label> <input type="checkbox" ng-model="self.headerCheckBox" ng-change="self.headerSelected()"> <span class="fa fa-check"></span>
</label>
</div>
</th>
You can see the content of the header and aria-label value are the same. How can I assign a different value to the aria-label? Help will be appreciated.