When I press tab to navigate through controls on screen (for an Angular app), it includes disabled controls in the tab sequence, when using this Angular mechanism for conditionally disabling a control:
<button [disabled]="!this.myForm.valid">
The problem is that if I also include a click event handler...
<button (click)="saveForm()" [disabled]="!this.myForm.valid">
...while it is true that you cannot activate the click-handler with a mouse-click you can activate it by pressing return (enter)!
That is a poor user experience; when the button is disabled by an expression such as that shown, I want it to be (a) either completely unfocusable or (b) able to ignore pressing enter. Any suggestions?
(Perhaps there is something in my codebase exacerbating this but to me the above looks like default Angular behavior.