'How to disable Angular routerlink tabindex additions
The angular guide to accessibility does not mention how to NOT add tabindex on every routerlink'ed button.
My app ends up with tabindex="0" on buttons.
An accessibility expert told me it is better to not set tabindex than to set wrong attributes. But there seem to be no way to prevent that.
https://angular.io/guide/accessibility
I know how to add tabindex, but I have no idea how to say to angular and its router to NOT automatically add these attributes.
Solution 1:[1]
I know how to add tabindex, but i have no idea how to say to angular and its router to NOT automatically add these attributes.
For your use case, as of now there is no way to tell Angular not to add tabindex="0" unless you yourself set the attribute value on the element.
I do understand, that the button element doesn't need an explicit tabindex attribute to be specified, as it already has tabIndex property value of 0 and is keyboard focusable. But having specified tabindex="0" on it shouldn't harm in any way.
Why Angular added tabindex when using routerLink on button element?
With the current implementation, when routerLink is used with the elements other than <a> and <area>, and if there is no tabindex attribute value set on that element, Angular will by default set tabindex attribute value of 0.
this.setTabIndexIfNotOnNativeEl('0');
setTabIndexIfNotOnNativeEl(newTabIndex) method: Modifies the tab index if there was not a tabindex attribute on the element during instantiation.
There is already a long pending GitHub issue open regarding the same:
routerLink directive always makes element focusable
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |