mfDefaultSorter is failing with ANDI tool for 508 compliance

[suryahanumandla]

If you are not aware of 508 compliance. In short, a law that requires federal government websites to be safe and accessible for people with disabilities.

while validating with ANDI tool. I could see the following error

Keyboard Access Alerts:
warning element has no [href], [id], or [tabindex]; This might be a link that only works with a mouse.

I feel it would be better to change to any other element rather using anchor element and there is no use of it, correct me if I'm wrong.

@Component({
    selector: "mfDefaultSorter",
    template: `
        <a style="cursor: pointer" (click)="sort()" class="text-nowrap">
            <ng-content></ng-content>
            <span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
            <span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
        </a>`
})

[PascalHonegger]

Hey @suryahanumandla I'm sort of maintaining a fork over at https://github.com/PascalHonegger/ng-datatable and came accross your issue. I found a fix for your problem in #162 and integrated the changes from there with some tweaking into my latest release.

I kept the <a> tag to reduce the impact on existing styling but added a tabindex and a enter and space keyboard mapping, maybe it can help you out 😉 .

[suryahanumandla]

thanks @PascalHonegger, let me give a try!