macht einen zugänglich als Link in einer Tabelle über Tabbing

Question

Ich habe diese Tabelle und in ihr ein Tag, in dem der Benutzer darauf klicken kann und es wird zu einer anderen Seite navigieren. Derzeit, wenn ich klicke, funktioniert es gut, aber wenn ich meine Tastatur benutze und versuche, auf den Link zu drücken, bringt es mich nirgendwohin und ich wollte wissen, wie ich es mit der Tastatur zugänglich machen kann, ohne es in eine Schaltfläche umzuwandeln .

Dies ist, was ich habe:

<td role="gridcell"> 
    <a (click)="userClicked(user)">{{user.Name}}</> 
</td> 

Ich habe versucht, eine Spannweite anstelle eines-Tag, aber noch kein Glück.

<td role="gridcell"> 
     <span role="button" tabindex="0" (click)="userClicked(user)">{{user.Name}}</span> 
</td 

Answer 1

(keyup.enter)

<a href="#" (keyup.enter)="userClicked(user)">{{user.Name}}</a> 

Answer 2

Sie versuchen stattdessen <button> Element verwenden, das funktioniert prima.

Ich hatte Probleme mit der Auswahl der <a> Tag überhaupt durch Klicken auf tab Schlüssel, aber das könnte ein anderes Problem sein (wie ich das auf bestehenden Projekt versuche).

<td><button (click)="test()">TEST</button></td> 

EDIT

Ihr Problem ist, dass Sie das href Attribut auf dem Anker nicht, und es ist daher nicht fokussierbar (wie @ Richard Medeiros hier in den Kommentaren angegeben). Ich habe es gerade getestet, und es funktioniert nur mit der (click) Bindung.

Vergessen Sie nicht false vom Handler zurück, so dass Sie folgen nicht dem href Attribut:

<td><a href="#" (click)="test()">TEST</a></td> 

test() { 
    // ... 
    return false; 
} 

Hier arbeitet Beispiel: https://angular-playground-1ji4ko.stackblitz.io