ngx-bootstrap
ngx-bootstrap copied to clipboard
WAVE Accessibility Warning: Redundant Link in Tabs
Is your feature request related to a problem? Please describe. For accessibility, a warning is issued for the link with the javascript:void(0); link in tabs.
A clear and concise description of what the problem is. We are trying to create a site with clear accessibility.
Describe the solution you'd like I have a current solution, but I am not certain it is the best one.
A clear and concise description of what you want to happen. Possibly remove the link, and handle the click on the list item element alone.
Describe alternatives you've considered Currently, replacing the javascript:void(0); with a hash (#) is a workaround.
A clear and concise description of any alternative solutions or features you've considered.
import {Injectable} from '@angular/core';
declare let jQuery: any;
@Injectable()
export class AccessibilityService {
/**
* This fixes the ngx-bootstrap tabs "redundant link" issue reported by WAVE Evaluation plugin.
*/
public fixTabs() {
jQuery('.nav-tabs a').attr('href', (n: any, old: any) => {
if (old === 'javascript:void(0);') {
return '#';
}
});
}
}
Additional context
Add any other context or screenshots about the feature request here.
Result after workaround:
Perhaps using a button instead of an anchor would remove the issue?